【iOS开发实战】经典的外卖列表(双Table联动)

2019独角兽企业重金招聘Python工程师标准>>>

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

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

思路&＃xff1a;

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

我们至少需要两个tableView&＃xff0c;单纯的放上两个tableView还不能满足实际需求。
拿美团外卖这个界面来看&＃xff0c;点击左侧商品分类&＃xff0c;右侧的商品列表会将该分类的分区第一条数据滚动至右侧tableView的顶部。用户滚动右侧列表&＃xff0c;左侧分类列表会随之高亮显示相应的分类标签。可以通过UITableViewDelegate的协议&＃xff0c;即分区头、脚视图的显示周期&＃xff0c;以及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;

实践&＃xff1a;

1、创建两个tableView:

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

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

2、模拟分类的商品数据

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

3、绘制两tableView

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

分区数、行数的实现&＃xff1a;

//分区数 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{if (tableView&＃61;&＃61;_leftTableView) {return 1;}return goodsList.count; }//行数 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{if (tableView&＃61;&＃61;_leftTableView) {return goodsList.count;}return [[goodsList[section] objectForKey:&＃64;"list"] count]; }

单元格内容的实现&＃xff0c;这里只使用系统简单的cell风格&＃xff0c;左侧cell高度默认80&＃xff0c;右侧默认100&＃xff0c;如下图所示&＃xff1a;

//单元格内容 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{UITableViewCell * cell &＃61; [tableView dequeueReusableCellWithIdentifier:&＃64;"cell"];if (cell&＃61;&＃61;nil) {cell &＃61; [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:&＃64;"cell"];}if (tableView&＃61;&＃61;_leftTableView) {//分类标题cell.textLabel.text &＃61; [goodsList[indexPath.row] objectForKey:&＃64;"title"];}else{//商品标题cell.textLabel.text &＃61; [[goodsList[indexPath.section] objectForKey:&＃64;"list"] objectAtIndex:indexPath.row];}return cell; }//行高 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{if (tableView&＃61;&＃61;_leftTableView) {return 80;}return 100; }

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

绘制分区头视图&＃xff0c;高度设置为30&＃xff1a;

//分区头视图 - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{if (tableView&＃61;&＃61;_rightTableView) {UIView * view &＃61; [[UIView alloc] initWithFrame:CGRectMake(0, 0, _rightTableView.bounds.size.width, 30)];view.backgroundColor &＃61; [UIColor colorWithWhite:0.9 alpha:0.9];UILabel * label &＃61; [[UILabel alloc] initWithFrame:view.bounds];[view addSubview:label];label.text &＃61; [goodsList[section] objectForKey:&＃64;"title"];return view;}return nil; }//分区头视图高度 - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{if (tableView&＃61;&＃61;_leftTableView) {return CGFLOAT_MIN;}return 30; }//脚视图高度 - (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{if (tableView &＃61;&＃61; self.leftTableView) {return 0;} else {//重要return CGFLOAT_MIN;} }

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

4、两个tableView的联动

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

#pragma mark - UIScrollViewDelegate //已经结束减速 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {_relate &＃61; YES; }

实现点击左侧单元格&＃xff0c;右侧列表自动滚动到相应分区

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {if (tableView &＃61;&＃61; _leftTableView) {_relate &＃61; NO;//选择该行&＃xff0c;并自动滚动至列表中心区域[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];} }

实现滚动右侧列表&＃xff0c;左侧列表自动选中相应分区标题

//分区头即将显示 - (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {if (_relate) {//获取显示在最顶部的cell的分区数NSInteger topCellSection &＃61; [[[tableView indexPathsForVisibleRows] firstObject] section];if (tableView &＃61;&＃61; 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 &＃61; [[[tableView indexPathsForVisibleRows] firstObject] section];if (tableView &＃61;&＃61; self.rightTableView) {//滚动该分区对应的标题至列表靠近中部区域[self.leftTableView selectRowAtIndexPath:[NSIndexPath indexPathForItem:topCellSection inSection:0] animated:YES scrollPosition:UITableViewScrollPositionMiddle];}} }

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