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

写在前面

首先声明哈,不是广告,我就是用的时候觉得这个功能比较好玩,就想着实现了一下。效果如图:

接下来简单的说一下思路吧~

大体思路

可能我们看到这种功能的实现的时候,首先想着的是我在这个控制器中左右各放一个tableView,然后进行关联。我是用了另一个思路,具体如下:

我建了两个类LGJCategoryVC用来盛放左边写着第几类的tableView和LGJProductsVC用来盛放右边写在各种产品的tableView。然后将LGJProductsVC作为LGJCategoryVC的childViewController,将LGJProductsVC的viewaddSubView到LGJCategoryVC的view上。

代码实现如下:

- (void)createProductsVC {

_productsVC = [[LGJProductsVC alloc] init];

_productsVC.delegate = self;

[self addChildViewController:_productsVC];

[self.view addSubview:_productsVC.view];

}

这样做有什么好处呢?简单的说就是将tableView分离,各自使用一个congtroller,这样做使每个控制器管理自己的tableView里面的事件,可以更好的分离代码,降低两个tableView之间的耦合度,同时也避免了把两个 tableView放在一个controller里造成一个controller代码的冗余,这样使逻辑更清晰。

接下来说一下我们点击左边tableView的cell的时候怎样使右边的tableView跟着滑动。我在LGJCategoryVC也就是左边tableView的这个代理方法中didSelectRowAtIndexPath做了些操作:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

if (_productsVC) {

[_productsVC scrollToSelectedIndexPath:indexPath];

}

}

其中这个scrollToSelectedIndexPath方法是在_productsVC中声明的。这个方法就是具体调动右边tableView滑动的。

#pragma mark - 一级tableView滚动时 实现当前类tableView的联动

- (void)scrollToSelectedIndexPath:(NSIndexPath *)indexPath {

[self.productsTableView selectRowAtIndexPath:([NSIndexPath indexPathForRow:0 inSection:indexPath.row]) animated:YES scrollPosition:UITableViewScrollPositionTop];

}

我们需要的只是让右边tableView的sectionHeaderView跟随左边的点击cell移动到最上部就可以了,所以在这里我们设置selectRowAtIndexPath:([NSIndexPath indexPathForRow:0 inSection:indexPath.row])

接下来就是当我们滑动右边tableView的时候左边的tableView的cell跟随滑动。这里我们在LGJProductsVC类中声明了一个协议。

@protocol ProductsDelegate <NSObject>

- (void)willDisplayHeaderView:(NSInteger)section;

- (void)didEndDisplayingHeaderView:(NSInteger)section;

@end

同时声明两个变量,这两个变量非常有用。

@property(nonatomic, assign)BOOL isScrollUp;//是否是向上滚动

@property(nonatomic, assign)CGFloat lastOffsetY;//滚动即将结束时scrollView的偏移量

具体作用就在这里了:

#pragma mark - scrollViewDelegate

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

NSLog(@"_lastOffsetY : %f,scrollView.contentOffset.y : %f", _lastOffsetY, scrollView.contentOffset.y);

_isScrollUp = _lastOffsetY < scrollView.contentOffset.y;

_lastOffsetY = scrollView.contentOffset.y;

NSLog(@"______lastOffsetY: %f", _lastOffsetY);

}

在这个方法中,_isScrollUp用来判断右边的tableView是否是向上滑,当scrollView滑动时,我们用上次的偏移量和本次的偏移量作对比,如果上次的偏移量小于本次的偏移量说明tableView是向上滑动的。(关于contentOffset我在上篇的《iOS 实现NavigationController的titleView动态缩放效果》链接:http://www.jianshu.com/p/bcf3d692f99d 中有简单介绍)此时,_isScrollUp为YES,反之为NO。我们根据_isScrollUp这个重要的标识来到这儿:UITableViewDelegate的这两个代理方法

- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section {

if (self.delegate != nil && [self.delegate respondsToSelector:@selector(willDisplayHeaderView:)] != _isScrollUp) {

[self.delegate willDisplayHeaderView:section];

}

}

- (void)tableView:(UITableView *)tableView didEndDisplayingHeaderView:(UIView *)view forSection:(NSInteger)section {

if (self.delegate != nil && [self.delegate respondsToSelector:@selector(didEndDisplayingHeaderView:)] && _isScrollUp) {

[self.delegate didEndDisplayingHeaderView:section];

}

}

在UITableViewDelegate的这两个代理方法中,第一个方法是当headerView将要显示时调用。第二个方法是当headerView结束显示时调用。在这里我们根据_isScrollUp的BOOL值,当headerView将要显示的时候说明此时_isScrollUp为NO,因为此时是向下滑动的。当headerView结束显示的时候说明此时_isScrollUp为YES,因为此时是向上滑动的。此时我们调用ProductsDelegate代理方法,在LGJCategoryVC类中实现代理方法:

#pragma mark - ProductsDelegate

- (void)willDisplayHeaderView:(NSInteger)section {

[self.categoryTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:section inSection:0] animated:YES scrollPosition:UITableViewScrollPositionMiddle];

}

- (void)didEndDisplayingHeaderView:(NSInteger)section {

[self.categoryTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:section + 1 inSection:0] animated:YES scrollPosition:UITableViewScrollPositionMiddle];

}

在willDisplayHeaderView这个代理方法中,右边tableView向下滑动,此时headerView即将显示,左边cell选择indexPathForRow:section,在didEndDisplayingHeaderView代理方法中,右边tableView向上滑动,此时headerView结束显示,左边cell选择indexPathForRow:section+1

总结

基本的大体思路就是上面这些,可能老是左边tableView右边tableView的看起来有点儿绕了,具体的还是看代码吧。最后贴上代码链接:

https://github.com/iOSJason/TableViewTwoLevelLinkageDemo.git

希望可以和大家一起交流,一同进步。3Q

时间: 2024-10-13 17:16:44

iOS 类似美团外卖 app 两个 tableView 联动效果实现的相关文章

iOS 类似外卖 两个tableView联动

在伯乐在线上看到一个挺好玩的文章,自己也参考文章实现了一下. 效果实现如图所示: 具体实现的内容可以参考原文,参考文章:<iOS 类似美团外卖 app 两个 tableView 联动效果实现> 首先,从界面上来看,很显然是两个UITableview上下滑动的效果.而这种滑动的效果核心是左边的tableView如何和右边的tableView进行关联,并且点击左边tableView之后右边的tableview也可以滑动到对应的section. 好了,分析完毕之后,我们应该清楚了我们的2个需求:1.

美团外卖app可行性分析

小组:韩睿哲,王永强,孟烈,徐殿强 1 引言 1.1编写目的年轻人追求时尚,快捷,因此外卖行业拥有广阔的消费群体:团购的兴起,也促进了人们的消费欲望,人们继续一个外卖平台,来满足他们的欲望.O2o模式的日渐完善,使得以前的进店消费模式发展为送餐就餐模式,o2o将线下商务的机会与互联网结合在了一起,让互联网成为线下交易的前台.这样线下服务就可以用线上来揽客,消费者可以用线上来筛选服务,还有成交可以在线结算,很快达到规模.该模式最重要的特点是:推广效果可查,每笔交易可跟踪.1.2项目背景 项目名称:

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

swift实现ios类似微信输入框跟随键盘弹出的效果 为什么要做这个效果 在聊天app,例如微信中,你会注意到一个效果,就是在你点击输入框时输入框会跟随键盘一起向上弹出,当你点击其他地方时,输入框又会跟随键盘一起向下收回,二者完全无缝连接,那么这是怎么实现的呢,也许你会说直接在键盘弹出的时候把输入框也向上移动不就行了?但是我使用这种方法的时候,发现效果十分不理想,会有明显的滞后现象,原因有以下几点: 键盘弹出动画并不是匀速,键盘和输入框的时间曲线不完全一致,运动不同步 各种键盘的高度不一样(比如

iOS中一个页面显示两个tableview的情况

一个页面显示两个tableview,并且每个tableview上的数据都不一样,一般用以下方法: 首先建一个继承自UIView的类,来表示用来切换tableview的view //在view的类的.h文件中 #import <UIKit/UIKit.h> @protocol MyAttentionHeadViewDelegate <NSObject> //建一个叫MyAttentionHeadViewDelegate的一个代理 @optional //两个代理方法(可选择实现opt

ios实现两个tableview联动

两个tableview的联动,滑动左侧tableview,右侧tableview跟着滑动 其实实现起来比较简单,只是需要搞清楚他们之间的区别和联系,还有就是调用一个 - (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)section 这个方法,从而实现左右两个tableview的联动 直接上代码 @implementation ViewContr

iOS 类似美团或饿了么评价中的星星评分控件

1.做的好几个项目都用到了评分控件,可以用来展示评分,也可以用来写评分,图片和间距大小都可以定制,之前就已经简单封装了一个,现在把它分享出来,有需要的拿去用. 2.下面是展示截图: image.png image.png 3.代码 https://github.com/alan12138/Custom-Control/tree/master/StarView 原文地址:https://www.cnblogs.com/alan12138/p/9634916.html

iOS 类似淘宝商品详情查看翻页效果的实现

基本思路: 1.设置一个 UIScrollView 作为视图底层,并且设置分页为两页 2.然后在第一个分页上添加一个 UITableView 并且设置表格能够上提加载(上拉操作即为让视图滚动到下一页) 3. 在第二个分页上添加一个 UIWebView 并且设置能有下拉刷新操作(下拉操作即为让视图滚动到上一页) ps:以上所提及UITableView与UIWebView 可以自行更改为其他滚动控件也是可行的 实现需要的第三方支持:MJRefresh 关于此第三方,可参考:githua 地址 请点击

【Android开源库】美团等APP城市选择

CityPicker 现在使用比较多的类似美团等APP的城市选择界面. 2步即可实现,就是这么简单粗暴! Gif image APK 下载demo.apk体验. Install Gradle: compile 'com.zaaach:citypicker:1.1' or Maven: <dependency> <groupId>com.zaaach</groupId> <artifactId>citypicker</artifactId> <

WeGeek Talk | 美团外卖

今天前来专栏分享的极客,是来自美团外卖的小程序前端团队. 在 2017 年 1 月 9 日,美团外卖作为首批小程序正式上线,截止到目前,美团外卖小程序 DAU 已近千万.但事实上,美团外卖早期时更多的是主打手机网页端,在美团外卖的小程序刚上线时并没有过多去维护,之后才与微信官方有了更多交流.在此基础上,美团还开源了 mpvue 框架来优化小程序的开发体验. 那么美团为何对小程序发生了态度转变,如今如此看重其发展呢?一起来看看今天的极客故事. 美团外卖小程序前端团队共有 10 余人,归属于美团外卖