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

效果实现如图所示:

具体实现的内容可以参考原文,参考文章:《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. bugku-Web 文件包含2

    打开网页查看源代码,在最上面发现upload.php,于是我们就访问这个文件:http://123.206.31.85:49166/index.php?file=upload.php 发现是让我们上传 ...

  2. 家中WIFI被人用WiFi万能钥匙共享后,我们应该怎么做?

    据之前WiFi万能钥匙官方称,其用户总数已经超过了8亿,且日活用户达到2亿,在海量APP中仅次于微信和QQ.可以想象有着数量如此庞大的用户,家里的WiFi是如何的"不保险". 而据 ...

  3. settings配置数据库和日志

    数据库的配置: 一.mysql配置 pip下载pymysql,用于mysql和django的连接. 在init.py上配置pymsqy. import pymysql pymysql.install_ ...

  4. nginx 4层代理配置

    1.nginx 从1.9.0版本开始支持四层代理,但做四层代理时 编译需要添加  --with-stream模块 # ./configure --prefix=/usr/local/nginx--us ...

  5. P3241 [HNOI2015]开店

    题解:动态点分治 建立点分树 每个点维护点分树子树内节点到这个节点和父亲节点距离的前缀和 二分查找锁定合法区间 对每个祖先分治中心查询路径和然后减去不合法子树内的路径和 注意:求大量LCA时用树剖 不 ...

  6. 十二、GUI设计-画图程序

    """小小画笔""" from tkinter import *from tkinter.filedialog import *from t ...

  7. ipa提取png图片,windows下显示黑色

    原因:ipa提取的png图片经过xcode特殊格式处理,在windows下查看会显示黑色   方法1:通过“ ipin.py文件”转化 过程: 1.安装python,需2.7版本,本文使用2.7.5 ...

  8. ZooKeeper解决的问题

    1.解决分布式单点问题 https://www.jianshu.com/p/08b76bd7a634 2.实现分布式环境数据的一致性.访问ZooKeeper树结构时,不同节点返回的数据是一致,不会引起 ...

  9. Vue中Js动画 与Velocity.js 多组件多元素 列表过渡

    Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...

  10. Python D9 学习

    Python 设置环境 当安装好Python 后 在计算机的属性里面   高级语言设置  环境变量. 环境变量里面的path  更改为Python的 树目录  可以从计算机直接下达命令 打开Pytho ...