iOS 类似外卖 两个tableView联动

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

效果实现如图所示:

具体实现的内容可以参考原文,参考文章:《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:0 inSection:indexPath.row] atScrollPosition:UITableViewScrollPositionTop animated:YES];

}

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

时间: 2024-10-16 07:41:07

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

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

写在前面 首先声明哈,不是广告,我就是用的时候觉得这个功能比较好玩,就想着实现了一下.效果如图: 接下来简单的说一下思路吧~ 大体思路 可能我们看到这种功能的实现的时候,首先想着的是我在这个控制器中左右各放一个tableView,然后进行关联.我是用了另一个思路,具体如下: 我建了两个类LGJCategoryVC用来盛放左边写着第几类的tableView和LGJProductsVC用来盛放右边写在各种产品的tableView.然后将LGJProductsVC作为LGJCategoryVC的chi

ios实现两个tableview联动

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

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

两个 TableView 之间的联动, TableView 与 CollectionView 之间的联动 这是一个创建于 359 天前的主题,其中的信息可能已经有所发展或是发生改变. [联动] :两个 TableView 之间的联动, TableView 与 CollectionView 之间的联动 前言 现在市面上有很多 app 都有联动功能,有的是两个 TableView 之间的联动,比如美团外卖,百度外卖,饿了么等等.有的是 TableView 与 CollectionView 之间的联动

iOS 两个tableview的 瀑布流

iOS 两个tableview的 瀑布流1. [代码]Objective-C     ////  DocViewController.m//  getrightbutton////  Created by 隋文涛 on 12-12-9.//  Copyright (c) 2012年 隋文涛. All rights reserved.// #import "DocViewController.h"#define heightofimage(image) image.size.height

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

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

ios 类似淘宝商品详情页面的效果

今天试着写ios 类似淘宝商品详情页面的效果 我用到的第三方库EGORefreshTableHeaderView下拉刷新的效果还有就是PWLoadMoreTableFooterView上拉加载更多 主要的思路在于UISCrollView两页,一页展示商品概况,另一页展示商品更多详情 首先,第一页的view包含一个UITableView,这个tableView实现PWLoadMoreTableFooterView中的delegate方法, 实现delegate代理方法的时候使用 - (void)s

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

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

ios图片拉伸两种方法

ios图片拉伸两种方法 UIImage *image = [UIImage imageNamed:@"qq"]; 第一种: // 左端盖宽度 NSInteger leftCapWidth = image.size.width * 0.5f; // 顶端盖高度 NSInteger topCapHeight = image.size.height * 0.5f; // 重新赋值 image = [image stretchableImageWithLeftCapWidth:leftCapW

ios及android两个平台下x264编译脚本

今年做了一些音视频编解码工作,此前做图形.图像类工作多一些,做了音视频编解码才知道,这项工作还是很有趣.很神奇的.比如采集几十M的视频数据,经过编码存储后,文件体积仅仅有几十K大小,这当中就需要x264来发挥神奇了.下面将手机端ios及android两个平台下x264编译脚本分享出来,希望对正在做相关工作的同学有帮助.x264源码地址:http://www.videolan.org/developers/x264.html 1. ios平台下x264编译.这个编译脚本修改自:https://gi