【iOS开发实战】经典的外卖列表(双Table联动)
咱们常常使用美团外卖、饿了么、口碑等外卖软件点餐，几乎全部的外卖软件所展现的商品类别都无一例外，采用双列表的形式呈现，商品的分类，以及对商品的下单操做。咱们拿美团外卖为例，截图以下：git
暂时忽略头部视图，只关注下面的商品分组列表。github
思路：
在开始以前，咱们首先应该思考其实现的流程和可能遇到的问题！首先映入眼帘的是左侧的商品分类列表，以及右侧的分区展示的商品列表。因此：布局
- 咱们至少须要两个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;
实践：
一、建立两个tableView:
- 为了尽量简单实现，咱们采用StoryBoard来建立这两个tableView（固然你也可使用代码来建立），左侧tableView宽度为固定宽度100，右侧tableView宽度为剩余屏幕宽度，这里采用自动布局技术约束（这里再也不赘述其实现过程）。以下图所示：
两个tableView布局、delegate的链接 及 关联代码测试
二、模拟分类的商品数据
_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" : @[@"甜点组合", @"毛肚", @"菌汤"]
},
];
三、绘制两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的绘制完成了，接下来解决联动的问题吧。动画
四、两个tableView的联动
首先定义一个BOOL类型的变量_relate 来标记左侧列表是否滚动，在viewDidLoad和下面的代理中把_relate置为YES：spa
#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地址：code
优化：
另外，我对其作了进一步的扩展优化，如加入购物车的动画，导航渐变等，效果图以下所示：
项目地址：
相关文章
- 1. 外卖App双列表联动
- 2. 移动Web App开发之实战美团外卖
- 3. Android仿美团外卖点菜联动列表
- 4. 《Java开发实战经典》笔记
- 5. 【面经】美团外卖测试开发实习生面经
- 6. mpvue实战开发美团外卖小程序
- 7. Vue实战——外卖商家页面 页面骨架开发
- 8. Java Web开发实战经典 实战练习2.5
- 9. 外卖小程序开发
- 10. RecycleView实现MVP框架下的双列表联动与悬停
- 更多相关文章...
- • Scala List(列表) - Scala教程
- • XSL-FO 列表 - XSL-FO 教程
- • PHP开发工具
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虚拟机中,安装华为电脑的deepin操作系统
- 2. 强烈推荐款下载不限速解析神器
- 3. 【区块链技术】孙宇晨：区块链技术带来金融服务的信任变革
- 4. 搜索引起的链接分析-计算网页的重要性
- 5. TiDB x 微众银行 | 耗时降低 58%，分布式架构助力实现普惠金融
- 6. 《数字孪生体技术白皮书》重磅发布（附完整版下载）
- 7. 双十一“避坑”指南：区块链电子合同为电商交易保驾护航！
- 8. 区块链产业，怎样“链”住未来？
- 9. OpenglRipper使用教程
- 10. springcloud请求一次好用一次不好用zuul Name or service not known
欢迎关注本站公众号,获取更多信息
相关文章