文档章节

iOS 经典的外卖列表 双Table联动

魔笛GNR
 魔笛GNR
发布于 2017/05/05 17:35
字数 1505
阅读 64
收藏 0

        我们经常使用美团外卖、饿了么、口碑等外卖软件点餐,几乎所有的外卖软件所展示的商品类别都无一例外,采用双列表的形式呈现,商品的分类,以及对商品的下单操作。我们拿美团外卖为例,截图如下:

暂时忽略头部视图,只关注下面的商品分组列表。

思路:

        在开始之前,我们首先应该思考其实现的流程和可能遇到的问题!首先映入眼帘的是左侧的商品分类列表,以及右侧的分区展现的商品列表。所以:

  • 我们至少需要两个tableView,单纯的放上两个tableView还不能满足实际需求。
  • 拿美团外卖这个界面来看,点击左侧商品分类,右侧的商品列表会将该分类的分区第一条数据滚动至右侧tableView的顶部。用户滚动右侧列表,左侧分类列表会随之高亮显示相应的分类标签。可以通过UITableViewDelegate的协议,即分区头、脚视图的显示周期,以及UIScrollViewDelegate的相应协议来实现左侧和右侧列表的联动。并结合tableView的滚动方法实现双列表的联动效果。
  • //分区头视图将要显示
    - (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section
    //分区脚视图已经结束显示
    - (void)tableView:(UITableView *)tableView didEndDisplayingFooterView:(UIView *)view forSection:(NSInteger)section
    //以及结束减速
    - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;
    //滚动至某一行
    - (void)scrollToRowAtIndexPath:(NSIndexPath *)indexPath atScrollPosition:(UITableViewScrollPosition)scrollPosition animated:(BOOL)animated;

     

实践:

1、创建两个tableView:

  •     为了尽可能简单实现,我们采用StoryBoard来创建这两个tableView(当然你也可以使用代码来创建),左侧tableView宽度为固定宽度100,右侧tableView宽度为剩余屏幕宽度,这里采用自动布局技术约束(这里不再赘述其实现过程)。如下图所示:


两个tableView布局、delegate的连接 及 关联代码

2、模拟分类的商品数据

_relate = YES;    
goodsList = @[
                      @{@"title" : @"精选特卖",
                        @"list" : @[@"甜点组合", @"毛肚", @"菌汤", @"甜点组合", @"毛肚", @"菌汤",@"甜点组合", @"毛肚", @"菌汤"]
                        },
                      @{@"title" : @"饭后(含有茶点)",
                        @"list" : @[@"甜点组合", @"毛肚", @"菌汤"]
                        },
                      @{@"title" : @"茶点(含有茶点)",
                        @"list" : @[@"甜点组合", @"毛肚", @"菌汤",@"甜点组合", @"毛肚", @"菌汤"]
                        },
                      @{@"title" : @"素材水果拼盘",
                        @"list" : @[@"甜点组合", @"毛肚", @"菌汤",@"甜点组合", @"毛肚", @"菌汤",@"甜点组合", @"毛肚", @"菌汤",@"甜点组合", @"毛肚", @"菌汤",]
                        },
                      @{@"title" : @"水果拼盘生鲜果",
                        @"list" : @[@"甜点组合", @"毛肚", @"菌汤",]
                        },
                      @{@"title" : @"拼盘",
                        @"list" : @[@"甜点组合"]
                        },
                      @{@"title" : @"烤鱼盘",
                        @"list" : @[@"甜点组合", @"毛肚", @"菌汤",@"甜点组合", @"毛肚", @"菌汤"]
                        },
                      @{@"title" : @"饮料",
                        @"list": @[@"甜点组合", @"毛肚", @"菌汤",@"甜点组合", @"毛肚", @"菌汤",@"甜点组合", @"毛肚", @"菌汤",@"甜点组合", @"毛肚", @"菌汤"]
                        },
                      @{@"title": @"小吃",
                        @"list": @[@"甜点组合", @"毛肚"]
                        },
                      @{@"title" : @"作料",
                        @"list" : @[@"甜点组合", @"毛肚", @"菌汤"]
                        },
                      @{@"title" : @"主食",
                        @"list" : @[@"甜点组合", @"毛肚", @"菌汤"]
                        },
                      ];


3、绘制两tableView

  •     首先别忘了让ViewController遵守tableView的delegate:

  • 分区数、行数的实现:
//分区数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    if (tableView==_leftTableView) {
        return 1;
    }
    return goodsList.count;
}

//行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    if (tableView==_leftTableView) {
        return goodsList.count;
    }
    return [[goodsList[section] objectForKey:@"list"] count];
}
  • 单元格内容的实现,这里只使用系统简单的cell风格,左侧cell高度默认80,右侧默认100,如下图所示:
//单元格内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (cell==nil) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
    }
    if (tableView==_leftTableView) {
        //分类标题
        cell.textLabel.text = [goodsList[indexPath.row] objectForKey:@"title"];
    }else{
        //商品标题
        cell.textLabel.text = [[goodsList[indexPath.section] objectForKey:@"list"] objectAtIndex:indexPath.row];
    }
    return cell;
}

//行高
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    if (tableView==_leftTableView) {
        return 80;
    }
    return 100;
}

    测试运行工程可以看到一个简单的双列表已经呈现在你的面前,如下图所示:

  • 绘制分区头视图,高度设置为30:
//分区头视图
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    if (tableView==_rightTableView) {
        UIView * view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, _rightTableView.bounds.size.width, 30)];
        view.backgroundColor = [UIColor colorWithWhite:0.9 alpha:0.9];
        UILabel * label = [[UILabel alloc] initWithFrame:view.bounds];
        [view addSubview:label];
        label.text = [goodsList[section] objectForKey:@"title"];
        return view;
    }
    return nil;
}

//分区头视图高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    if (tableView==_leftTableView) {
        return CGFLOAT_MIN;
    }
    return 30;
}

//脚视图高度
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
    if (tableView == self.leftTableView) {
        return 0;
    } else {
        //重要
        return CGFLOAT_MIN;
    }
}

       

    至此,两个tableView的绘制完成了,接下来解决联动的问题吧。

4、两个tableView的联动

    首先定义一个BOOL类型的变量_relate 来标记左侧列表是否滚动,在viewDidLoad和下面的代理中把_relate置为YES:

#pragma mark - UIScrollViewDelegate
//已经结束减速
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    _relate = YES;
}
  • 实现点击左侧单元格,右侧列表自动滚动到相应分区
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    if (tableView == _leftTableView) {
        _relate = NO;
        //选择该行,并自动滚动至列表中心区域
        [self.leftTableView selectRowAtIndexPath:indexPath animated:NO scrollPosition:UITableViewScrollPositionMiddle];
        //右侧滚动至相应分区
        [self.rightTableView scrollToRowAtIndexPath:[NSIndexPath indexPathForItem:0 inSection:indexPath.row] atScrollPosition:UITableViewScrollPositionTop animated:YES];
    }else {
        //取消选中
        [self.rightTableView deselectRowAtIndexPath:indexPath animated:NO];
        
    }
}

 

  • 实现滚动右侧列表,左侧列表自动选中相应分区标题
//分区头即将显示
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {
    if (_relate) {
        //获取显示在最顶部的cell的分区数
        NSInteger topCellSection = [[[tableView indexPathsForVisibleRows] firstObject] section];
        if (tableView == self.rightTableView) {
            //滚动该分区对应的标题至列表靠近中部区域
            [self.leftTableView selectRowAtIndexPath:[NSIndexPath indexPathForItem:topCellSection inSection:0] animated:YES scrollPosition:UITableViewScrollPositionMiddle];
        }
    }
}

//分区头已经结束显示
- (void)tableView:(UITableView *)tableView didEndDisplayingFooterView:(UIView *)view forSection:(NSInteger)section {
    if (_relate) {
        //获取显示在最顶部的cell的分区数
        NSInteger topCellSection = [[[tableView indexPathsForVisibleRows] firstObject] section];
        if (tableView == self.rightTableView) {
            //滚动该分区对应的标题至列表靠近中部区域
            [self.leftTableView selectRowAtIndexPath:[NSIndexPath indexPathForItem:topCellSection inSection:0] animated:YES scrollPosition:UITableViewScrollPositionMiddle];
        }
    }
}

至此一个简单实用的经典双列表联动效果已经实现了!

Demo地址:

https://github.com/ly918/Demos

 

优化:


另外,我对其做了进一步的扩展优化,如加入购物车的动画,导航渐变等,效果图如下所示:

项目地址:

https://github.com/ly918/TakeawayList-ShoppingCart

© 著作权归作者所有

共有 人打赏支持
魔笛GNR
粉丝 6
博文 84
码字总数 42504
作品 0
郑州
iOS工程师
IOS学习,最简单的表格应用程序,学习,列出博客

IOS编程浅蓝教程,这是博客地址http://www.cnblogs.com/haichao/category/425378.html IOS编程浅蓝教程:锲子 IOS编程浅蓝教程(一)先决条件:开始iOS编程的必要准备 IOS编程浅蓝教程(二) Hel...

andy521zhu
2015/01/17
0
0
100%移植阿里云移动测试技术_竟仅需1周?!——移动测试专有云(3)——内容详解

一、自动化测试服务 Android兼容性测试 Android兼容性测试旨在帮助解决Android应用在不同真机机型上的各类兼容性问题,包括 Crash/ANR分析、6项性能分析、UI检测、3个版本的覆盖安装检测等。...

乐乎无趣
2017/11/02
0
0
iOS小白点效果、打地鼠游戏、轮播效果、画板、富文本编辑器等源码

iOS精选源码 美团外卖商家点菜页面(http://www.code4app.com/thread-29383-1-1.html) 板书录制演示程序(http://www.code4app.com/thread-29384-1-1.html) 分类轮播、直播间礼物列表轮播 -- O...

sunnyaigd
04/24
0
0
iOS 方法中 单指针和双指针的区别

iOS 双指针 iOS 单指针,双指针在方法参数中的区别 传入单指针,在方法内会复制一个临时的指针副本,在方法内操作的都是这个临时副本 传入双指针,在方法内会改变方法外 指针的指向 iOS 双指...

iOS_愛OS
07/19
0
0
完美解决ios10及以上Safari无法禁止缩放的问题

移动端web缩放有两种: 1.双击缩放; 2.双指手势缩放。 在iOS 10以前,iOS和Android都可以通过一行meta标签来禁止页面缩放 但iOS 10开始,meta设置在Safari内无效了。 后来在网上看到一个解决...

互联网学徒
07/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Nginx防盗链、访问控制、Nginx解析PHP相关配置、Nginx代理

Nginx防盗链 在配置文件里写入以下内容: 用curl测试 访问控制 Nginx限制某些IP不能访问或者只允许某些IP访问。 配置文件写入如下内容: allow 表示允许访问的IP,deny限制访问的IP。 匹配正...

黄昏残影
16分钟前
0
0
自己动手实现RPC服务调用框架

转载 TCP的RPC 引言 本文利用java自带的socket编程实现了一个简单的rpc调用框架,由两个工程组成分别名为battercake-provider(服务提供者)、battercake-consumer(服务调用者)。 设计思路...

雨中漫步的鱼
18分钟前
0
0
Centos6.x安装之后的9件事

Centos6.x安装之后的9件事 这些不是必须都做的,只不过是我个人的习惯,在此记录一下。 1.修改yum源到国内 CentOS系统更换软件安装源 备份你的原镜像文件,以免出错后可以恢复。 mv /etc/yu...

叶云轩
23分钟前
5
0
springboot2 使用jsp NoHandlerFoundException

开发图片上传功能,为验证测试功能是否正常,使用JSP编写表单提交进行测试 开发完成后,请求API提示如下异常: No mapping found for HTTP request with URI [/WEB-INF/jsp/avatar_upload.j...

showlike
29分钟前
0
0
springboot踩坑记--springboot正常启动但访问404

一 spring boot的启动类不能直接放在main(src.java.main)这个包下面,把它放在有包的里面就可以了。 二 正常启动了,但是我写了一个controller ,用的@RestController 注解去配置的controlle...

onedotdot
30分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部