在伯乐在线上看到一个挺好玩的文章,自己也参考文章实现了一下。

效果实现如图所示:

具体实现的内容可以参考原文,参考文章:《iOS 类似美团外卖 app 两个 tableView 联动效果实现》

首先,从界面上来看,很显然是两个UITableview上下滑动的效果。而这种滑动的效果核心是左边的tableView如何和右边的tableView进行关联,并且点击左边tableView之后右边的tableview也可以滑动到对应的section。

好了,分析完毕之后,我们应该清楚了我们的2个需求:
1.当点击左边TableViewCell时候,右边TableView会跟随着滑动到对应的section
2.当滑动右边TableView时候,左边TableView会根据右边UITableViewsection滑动到对应的UITableViewCell位置

但是个人认为还有几个需要注意的点。

1.设置右边View的时候,这里把右边的view设置为控制器,巧妙的利用view的frame达到这种效果。但是一定记得在左边的控制器上添加子控制器(右边view所在的控制器),否则容易会使左边的view不能识别点击效果。分成连个控制器的好处就是避免了一个控制器中代码量过多,造成的混乱。

- (void)setupRightView
{
self.productVC = [[DLProductController alloc] init]; self.productVC.delegate = self;
// 当前控制器一定添加产品的子控制器(否则会出现点击的view混乱)
[self addChildViewController:self.productVC]; [self.view addSubview:self.productVC.view]; }

2.在右边的控制器中写这个方法时注意

scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:indexPath.row] atScrollPosition:UITableViewScrollPositionTop animated:YES

[NSIndexPath indexPathForRow:0 inSection:indexPath.row] 指的是哪一组的第几行(这里是第0行),indexPath是从DLCategoryController传递过来的,所以indexPath.row在本控制器中指的是哪一组
- (void)scrollToSelectedIndexPath:(NSIndexPath *)indexPath
{ // [NSIndexPath indexPathForRow:0 inSection:indexPath.row] 指的是哪一组的第几行(这里是第0行),indexPath是从DLCategoryController传递过来的,所以indexPath.row在本控制器中指的是哪一组
[self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow: inSection:indexPath.row] atScrollPosition:UITableViewScrollPositionTop animated:YES]; }

3.注意右边的view向上滑和向下滑的情况。分别调用不同的代理。

iOS 类似外卖 两个tableView联动的更多相关文章

  1. 实现外卖选餐时两级 tableView 联动效果

    最近实现了下饿了么中选餐时两级tableView联动效果,先上效果图,大家感受一下: 下面说下具体实现步骤: 首先分解一下,实现这个需求主要是两点,一是点击左边tableView,同时滚动右边tabl ...

  2. iOS 类似美团外卖 app 两个 tableView 联动效果实现

    写在前面 首先声明哈,不是广告,我就是用的时候觉得这个功能比较好玩,就想着实现了一下.效果如图: 接下来简单的说一下思路吧~ 大体思路 可能我们看到这种功能的实现的时候,首先想着的是我在这个控制器中左 ...

  3. ios 两个 TableView 之间的联动, TableView 与 CollectionView 之间的联动

    两个 TableView 之间的联动, TableView 与 CollectionView 之间的联动 这是一个创建于 359 天前的主题,其中的信息可能已经有所发展或是发生改变. [联动] :两个 ...

  4. iOS 两个tableview的 瀑布流

    iOS 两个tableview的 瀑布流1. [代码]Objective-C     ////  DocViewController.m//  getrightbutton////  Created ...

  5. 两个TableView产生联动的一中方法

    如何使用两个TableView产生联动:将两个tableView的滚动事件禁止掉,最外层scrollView滚动时将两个TableView跟着滚动,并且更改contentOffset,这样产生效果滚动 ...

  6. ios开发之级联菜单(两个tableView实现)

    一:在ios项目实际开发中经常会看到级联菜单的效果:如图:点击左侧菜单,右侧菜单刷新数据.此篇用两个tableView来实现如图效果: 二:代码: 1:构造数据模型:利用kvc快速构建数据模型 #im ...

  7. iOS不得姐项目--推荐关注模块(一个控制器控制两个tableView),数据重复请求的问题,分页数据的加载,上拉下拉刷新(MJRefresh)

    一.推荐关注模块(一个控制器控制两个tableView) -- 数据的显示 刚开始加载数据值得注意的有以下几点 导航控制器会自动调整scrollView的contentInset,最好是取消系统的设置 ...

  8. 【转】swift实现ios类似微信输入框跟随键盘弹出的效果

    swift实现ios类似微信输入框跟随键盘弹出的效果 为什么要做这个效果 在聊天app,例如微信中,你会注意到一个效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会 ...

  9. MVC编辑状态两个DropDownList联动

    前几天使用jQuery在MVC应用程序中,实现了<jQuery实现两个DropDownList联动(MVC)>http://www.cnblogs.com/insus/p/3414480. ...

随机推荐

  1. 关于torch.nn.Linear的笔记

    关于该类: torch.nn.Linear(in_features, out_features, bias=True) 可以对输入数据进行线性变换: $y  = x A^T + b$ in_featu ...

  2. <style scoped >中使用深度选择器影响子组件

    摘自:https://blog.csdn.net/zhouzuoluo/article/details/95593143 <style scoped >中使用深度选择器影响子组件 在< ...

  3. Hibernate(二)——一对多查询

    1. 前言 本章节我们讨论Hibernate一对多查询的处理. 在上一章节中(Hibernate(一)——入门),我们探讨了Hibernate执行最基本的增删改查操作.现在我们将情况复杂化:加入我们在 ...

  4. tensorflow之最近邻算法实现

    最近邻算法,最直接的理解就是,输入数据的特征与已有数据的特征一一进行比对,最靠近哪一个就将输入数据划分为那一个所属的类,当然,以此来统计k个最靠近特征中所属类别最多的类,那就变成了k近邻算法.本博客同 ...

  5. Q8:String to Integer (atoi)

    8. String to Integer (atoi) 官方的链接:8. String to Integer (atoi) Description : Implement atoi to conver ...

  6. CSS(2)之重新认识 CSS3 新特性

    CSS3选择器(全) 相邻兄弟选择器:+ 选择到紧随目标元素后的第一个元素 普通兄弟选择器:~ 选择到紧随其后的所有兄弟元素 伪类选择器 :link :visited :hover :active : ...

  7. 注册网站 captcha reCHAPTCHA 错误

    原因 出现这个错误,是因为注册和提交时候,没有正确输出验证码导致的.网站可能会为了防止恶意注册,而使用验证码.如果验证码没有被正确加载或验证,就会出现相关错误. 解决方案 如果是访问类似kaggle, ...

  8. Python不区别字符串大小写的列表比较法

    一开始想这样写,结果报了索引错误 后来改正: if user_name.lower() in [names.lower() for names in names]: 我觉得应该是in后面应该跟列表,而 ...

  9. 当初对"软件工程"这个专业的期待和想象是什么?

    很多期待,很多幻想 印象很深刻的初中语文老师让我们背诵的一首诗<错误>: <错误> 作 者:郑愁予 我打江南走过 那等在季节里的容颜如莲花的开落 东风不来,三月的柳絮不飞 你底 ...

  10. F5 BIG-IPLTM单臂组网的三种连接模式