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

效果实现如图所示:

具体实现的内容可以参考原文,参考文章:《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. 吴裕雄--天生自然JAVA SPRING框架开发学习笔记:Java Spring的特点和优点

    Spring 是另一个主流的 Java Web 开发框架,该框架是一个轻量级的应用框架,具有很高的凝聚力和吸引力. Spring 是分层的 Java SE/EE full-stack 轻量级开源框架, ...

  2. Android自定义View——QQ音乐中圆形旋转碟子

    1.在onMeasure中测量整个View的宽和高后,设置宽高 2.获取我们res的图片资源后,在ondraw方法中进行绘制圆形图片 3.通过Handler发送Runnable在主线程中更新UI,达到 ...

  3. c#textBox控件限制只允许输入数字及小数点,是否为空

    c#textBox控件限制只允许输入数字及小数点 转载 //判断按键是不是要输入的类型. if (((int)e.KeyChar < 48 || (int)e.KeyChar > 57) ...

  4. 201771010123汪慧和《面向对象程序设计Java》第十二周实验总结

    一.理论部分 1.在Java提供的GUI构建工具中可以分为组件和容器两类. 2.在Java中的组件有:按钮.标签.复选框.单选按钮.选择框.列表框.文本框.滚动条.画布.菜单. 3.在Java中的容器 ...

  5. Elasticsearch分布式搜索

    ElasticSearch之介绍 一 Elasticsearch产生背景 1.1 大规模数据如何检索 如:当系统数据量上了10亿.100亿条的时候,我们在做系统架构的时候通常会从以下角度去考虑问题:1 ...

  6. JSON整理

    1.什么是JSON JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. 2.JSON基于两种结构: (1 )“名称/值“对的集合(A co ...

  7. HashMap面试总结

    作者:孤独烟 出处: http://rjzheng.cnblogs.com/ 文章由点及线再及面,写的非常好.修改部分内容 (1) HashMap的实现原理 看过HashMap源码吗,知道原理吗? h ...

  8. DRF项目之JWT认证方式的简介及使用

    什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点 ...

  9. nodejs(7)练习 http 和 express 创建简单的服务器

    http const http = require('http') // 创建服务器 const server = http.createServer() // 绑定事件,监听客户端的请求 serve ...

  10. mysql分组和排序操作

    分组.排序操作                                                                                         sele ...