IOS详解TableView——选项抽屉（天猫商品列表）



在之前的有篇文章讲述了利用HeaderView来写类似QQ好友列表的表视图。

这里写的天猫抽屉其实也可以用该方法实现，具体到细节每个人也有所不同。这里采用的是点击cell对cell进行运动处理以展开“抽屉”。

最后完成的效果大概是这个样子。



主要的环节：

点击将可视的Cell动画弹开。

其他的Cell覆盖一层半透明视图，将视线焦点集中在弹出来的商品细分类别中。

再次点击选中的或其他Cell，动画恢复到点击之前所在的位置。

商品细分类别属于之前写过的九宫格实现。这里就不贴代码了。之前的文章：点击打开链接


这里的素材都来自之前版本天猫的IPA。

加载数据


 

- (void)loadData
{NSString *path = [[NSBundle mainBundle] pathForResource:@"shops" ofType:@"plist"];NSArray *array = [NSArray arrayWithContentsOfFile:path];NSMutableArray *arrayM = [NSMutableArray arrayWithCapacity:array.count];[array enumerateObjectsUsingBlock:^(NSDictionary *dict, NSUInteger idx, BOOL *stop) {ProductType *proType = [[ProductType alloc] init];proType.name = dict[@"name"];proType.imageName = dict[@"imageName"];proType.subProductList = dict[@"subClass"];[arrayM addObject:proType];}];self.typeList = arrayM;
}


 

一个ProductType数据模型，记录名称，图片名称等。


单元格数据源方法

 

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{TypeCell *cell = [tableView dequeueReusableCellWithIdentifier:RTypeCellIdentifier];[cell bindProductKind:_typeList[indexPath.row]];return cell;
}


将数据模型的信息绑定到自定义类中进行处理，这个类在加载视图之后由tableview进行了注册。

 


下面看看自定义单元格中的代码

初始化

 

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{self = [super initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:reuseIdentifier];if (self) {self.contentView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"tmall_bg_main"]];//设置clear可以看到背景，否则会出现一个矩形框self.textLabel.backgroundColor = [UIColor clearColor];self.detailTextLabel.backgroundColor = [UIColor clearColor];self.selectionStyle = UITableViewCellSelectionStyleNone;//coverView 用于遮盖单元格，在点击的时候可以改变其alpha值来显示遮盖效果_coverView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, RScreenWidth, RTypeCellHeight)];_coverView.backgroundColor = [UIColor whiteColor];_coverView.alpha = 0.0;[self addSubview:_coverView];}return self;
}

 


绑定数据

 

- (void)bindProductKind:(ProductType *)productType
{self.imageView.image = [UIImage imageNamed:productType.imageName];self.textLabel.text = productType.name;NSArray *array = productType.subProductList;NSMutableString *detail = [NSMutableString string];[array enumerateObjectsUsingBlock:^(NSDictionary *dict, NSUInteger idx, BOOL *stop) {NSString *string;if (idx < 2){string = dict[@"name"];[detail appendFormat:@"%@/", string];}else if (idx == 2){string = dict[@"name"];[detail appendFormat:@"%@", string];}else{*stop = YES;}}];self.detailTextLabel.text = detail;
}


遍历array然后进行判断，对string进行拼接然后显示到细节label上。

 


然后是对点击单元格事件的响应处理，处理过程会稍微复杂一点


 

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{if (!_animationCells){_animationCells = [NSMutableArray array];}if (!_open){[self openTableView:tableView withSelectIndexPath:indexPath];}else{[self closeTableView:tableView withSelectIndexPath:indexPath];}
}


_animationCells用于之后记录运动的单元格，以便进行恢复。

 


 

- (CGFloat)offsetBottomYInTableView:(UITableView *)tableView withIndexPath:(NSIndexPath *)indexPath
{UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];CGFloat screenHeight = RScreenHeight - RNaviBarHeight;CGFloat cellHeight = RTypeCellHeight;CGFloat frameY = cell.frame.origin.y;CGFloat offY = self.tableView.contentOffset.y;CGFloat bottomY = screenHeight - (frameY - offY) - cellHeight;return bottomY;
}


一个私有方法，为了方便之后获取偏移的高度，这个高度记录点击的单元格的高度到屏幕底部的距离。以便进行判断。

 


比如我们假设弹出的抽屉视图高度为200，那么如果点击的单元格到底部的距离超过200，则点击的单元格以及以上的不用向上偏移，只要将下面的单元格向下移动即可。

但是如果距离小于200，则所有单元格都要进行响应的移动才能给抽屉视图腾出空间。


按照思路进行开闭操作

 

- (void)openTableView:(UITableView *)tableView withSelectIndexPath:(NSIndexPath *)indexPath
{/******获取可见的IndexPath******/NSArray *paths = [tableView indexPathsForVisibleRows];CGFloat bottomY = [self offsetBottomYInTableView:tableView withIndexPath:indexPath];if (bottomY >= RFolderViewHeight){_down = RFolderViewHeight;[paths enumerateObjectsUsingBlock:^(NSIndexPath *path, NSUInteger idx, BOOL *stop) {TypeCell *moveCell = (TypeCell *)[tableView cellForRowAtIndexPath:path];if (path.row > indexPath.row){[self animateCell:moveCell WithDirection:RMoveDown distance:_down andStatus:YES];[_animationCells addObject:moveCell];}if (path.row != indexPath.row){//遮盖视图改变透明度 让其他单元格变暗moveCell.coverView.alpha = RCoverAlpha;}}];}else{_up = RFolderViewHeight - bottomY;_down = bottomY;[paths enumerateObjectsUsingBlock:^(NSIndexPath *path, NSUInteger idx, BOOL *stop) {TypeCell *moveCell = (TypeCell *)[tableView cellForRowAtIndexPath:path];if (path.row != indexPath.row){moveCell.coverView.alpha = RCoverAlpha;}if (path.row <= indexPath.row){[self animateCell:moveCell WithDirection:RMoveUp distance:_up andStatus:YES];}else{[self animateCell:moveCell WithDirection:RMoveDown distance:_down andStatus:YES];}[_animationCells addObject:moveCell];}];}//禁止滚动表格视图tableView.scrollEnabled = NO;
}


主要对可视的单元格进行了判断移动，

 

其中[self animateCell:moveCell WithDirection:RMoveDown distance:_down andStatus:YES];是一个私有的重构后的方法。

不过一般情况下，动画的方法尽量在所有需求完成后再进行重构，因为毕竟不同的情况可能处理会很不同（动画方式，动画后的处理），放到一个方法后之后可能会发生需要再改回去。

看下这个方法

 

- (void)animateCell:(TypeCell *)cell WithDirection:(RMoveDirection)direction distance:(CGFloat)dis andStatus:(BOOL)status
{CGRect newFrame = cell.frame;cell.direction = direction;switch (direction){case RMoveUp:newFrame.origin.y -= dis;break;case RMoveDown:newFrame.origin.y += dis;break;default:NSAssert(NO, @"无法识别的方向");break;}[UIView animateWithDuration:RCellMoveDurationanimations:^{cell.frame = newFrame;} completion:^(BOOL finished) {_open = status;}];
}


传入参数为单元格，动画方向，运动的距离以及一个判断是否打开的标识位。

 


最后看下闭合操作

 

- (void)closeTableView:(UITableView *)tableView withSelectIndexPath:(NSIndexPath *)indexPath
{[_animationCells enumerateObjectsUsingBlock:^(TypeCell *moveCell, NSUInteger idx, BOOL *stop) {if (moveCell.direction == RMoveUp){[self animateCell:moveCell WithDirection:RMoveDown distance:_up andStatus:NO];}else{[self animateCell:moveCell WithDirection:RMoveUp distance:_down andStatus:NO];}}];NSArray *paths = [tableView indexPathsForVisibleRows];for (NSIndexPath *path in paths){TypeCell *typeCell = (TypeCell *)[tableView cellForRowAtIndexPath:path];typeCell.coverView.alpha = 0;}_up = 0;   //对一系列成员进行处理。_down = 0;tableView.scrollEnabled = YES;[_animationCells removeAllObjects];
}


 


Demo源码：点击打开链接


不过这个素材来自于之前天猫客户端的版本，现在的天猫客户端对商品列表进行了改变。也是弹出，不过弹出的列表内容更多，占据了整个屏幕。



最近一直在写TableView的博客，常用的大部分都包含到了。

传送门：

IOS详解TableView——性能优化及手工绘制UITableViewCell

IOS详解TableView —— QQ好友列表的实现

IOS详解TableView——对话聊天布局的实现

IOS详解TableView——实现九宫格效果

IOS详解TableView——静态表格使用以及控制器间通讯



以上就是本篇博客全部内容，欢迎指正和交流。转载注明出处~


 

转载于:https://www.cnblogs.com/pangblog/p/3341683.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/376379.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Unicode与JavaScript详解 [很好的文章转]

Unicode与JavaScript详解 [很好的文章转]

上个月&#xff0c;我做了一次分享&#xff0c;详细介绍了Unicode字符集&#xff0c;以及JavaScript语言对它的支持。下面就是这次分享的讲稿。 一、Unicode是什么&#xff1f; Unicode源于一个很简单的想法&#xff1a;将全世界所有的字符包含在一个集合里&#xff0c;计算机只…
阅读更多...
编辑器使用说明

编辑器使用说明

欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来&#xff0c;用它写博客&#xff0c;将会带来全新的体验哦&#xff1a; Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰…
阅读更多...
关于产品的一些思考——百度之百度百科

关于产品的一些思考——百度之百度百科

百度百科最近改版了&#xff0c;发现有些地方不符合一般人的行为习惯。 1.新版本排版 首先应该将摘要&#xff0c;简介&#xff0c;目录什么的放在左侧&#xff0c;而不是右侧&#xff0c;因为我们都是从左到右&#xff0c;从上到下观察事物的&#xff0c;而且百科的东西我们不…
阅读更多...
Python3.6 IDLE 使用 multiprocessing.Process 不显示执行函数的打印

Python3.6 IDLE 使用 multiprocessing.Process 不显示执行函数的打印

要运行的程序&#xff1a; import os from multiprocessing import Process import timedef run_proc(name):print(Child process %s (%s) Running...%(name,os.getpid()))# time.sleep(5)if __name__ __main__:print("Show Start:")print(Parent process %s. % os…
阅读更多...
复制控制

复制控制

复制构造函数、赋值操作符和析构函数总称为复制控制。编译器自动实现这些操作&#xff0c;但类也可以定义自己的版本。 实现复制控制操作最困难的部分&#xff0c;往往在于识别何时需要覆盖默认版本。有一种特别常见的情况需要类定义自己的复制控制成员&#xff1a;类具有指针成…
阅读更多...
python Requests登录GitHub

python Requests登录GitHub

工具&#xff1a; python 3.6 Fiddler4 所需要的库&#xff1a; requests BeautifulSoup 首先抓包&#xff0c;观察登录时需要什么&#xff1a; 这个authenticity_token的值是访问/login后可以获取&#xff0c;值是随机生成的&#xff0c;所以登录前要获取一下。 注…
阅读更多...
你必须懂的 T4 模板：深入浅出

你必须懂的 T4 模板：深入浅出

示例代码&#xff1a;示例代码__你必须懂的T4模板&#xff1a;浅入深出.rar (一)什么是T4模板&#xff1f; T4&#xff0c;即4个T开头的英文字母组合&#xff1a;Text Template Transformation Toolkit。 T4文本模板&#xff0c;即一种自定义规则的代码生成器。根据业务模型可生…
阅读更多...
stdafx.h是什么用处, stdafx.h、stdafx.cpp的作用

stdafx.h是什么用处, stdafx.h、stdafx.cpp的作用

http://blog.csdn.net/songkexin/article/details/1750396 stdafx.h头文件的作用 Standard Application Fram Extend没有函数库&#xff0c;只是定义了一些环境参数&#xff0c;使得编译出来的程序能在32位的操作系统环境下运行。Windows和MFC的include文件都非常大&#xff0c…
阅读更多...
python3 Connection aborted.', RemoteDisconnected('Remote end closed connection without response'

python3 Connection aborted.', RemoteDisconnected('Remote end closed connection without response'

在写爬虫的时候遇到了问题&#xff0c;网站是asp.net写的 requests.exceptions.ConnectionError: (Connection aborted., RemoteDisconnected(Remote end closed connection without response,)) 于是就抓包分析&#xff0c;发现只要加了’Accept-Language’就好了。。。 A…
阅读更多...
id和instancetype的区别

id和instancetype的区别

id返回不确定类型的对象&#xff08;也就是任意类型的对象&#xff09;&#xff0c;- (id)arrayWithData;返回的就是不确定类型的对象&#xff0c;如果执行数组的方法&#xff0c; [- (id)arrayWithData objectOfIndex:0]编译时不会报错&#xff0c;但运行时会报错&#xff0c;…
阅读更多...
windows下Java 用idea连接MySQL数据库

windows下Java 用idea连接MySQL数据库

Java用idea连接数据库特别简单。 首先就是下载好MySQL数据库的驱动程序。 链接&#xff1a;https://dev.mysql.com/downloads/connector/j/ 然后就是选下载版本了&#xff1a; 选个zip格式的嘛。。 下载完后就解压。打开idea&#xff0c;建立个简单的项目 找到这个: …
阅读更多...
7-2

7-2

#include<stdio.h> int main(void) {int i;int fib[10]{1,1};for(i2;i<10;i)fib[i]fib[i-1]fib[i-2];for(i0;i<10;i){printf("%6d",fib[i]);if((i1)%50)printf("\n");}return 0; } 转载于:https://www.cnblogs.com/liruijia199531/p/3357481.h…
阅读更多...
岁月悄然前行，没有停留的痕迹

岁月悄然前行，没有停留的痕迹

岁月悄然前行&#xff0c;没有停留的痕迹。月落乌啼&#xff0c;总是千年的风霜;涛声依旧&#xff0c;不见当初的夜晚。走过岁月的痕迹&#xff0c;已是物是人非。我们在岁月的轨道上行走&#xff0c;不要给岁月太多的装饰&#xff0c;不要给岁月太多的言语。给它我们随着时光追…
阅读更多...
160 - 41 defiler.1.exe

160 - 41 defiler.1.exe

环境&#xff1a; Windows xp sp3 工具&#xff1a; Ollydbg stud_PE LoadPE 先分析一下。 这次的程序要求更改了&#xff0c;变成了这个&#xff1a; defilers reversme no.1 -----------------------The task of this little, lame reverseme is to add some code to…
阅读更多...
HDU-2112 HDU Today

HDU-2112 HDU Today

http://acm.hdu.edu.cn/showproblem.php?pid2112 怎样把具体的字母的地点转换为数字的函数为题目的重点。 HDU Today Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 11385 Accepted Submission(s): 2663 P…
阅读更多...
AndEngine引擎之SmoothCamera 平滑摄像机

AndEngine引擎之SmoothCamera 平滑摄像机

SmoothCamera:就相当于现实世界的摄像机&#xff0c;要想照到一个物体&#xff0c;要么是摄像机移动&#xff0c;要么是物体移动到摄像头的范围内&#xff0c;想要放大或缩小一个物体&#xff0c;要么是物体向前或向后移动&#xff0c;要么是摄像头变焦 这里讨论的就是摄像头的…
阅读更多...
160 - 44 defiler.1.exe

160 - 44 defiler.1.exe

环境&#xff1a; Windows xp sp3 工具&#xff1a; 1.ollydbg 2.exeinfope 0x00 查壳 无壳就下一步 0x01 分析 随便输入个错的&#xff0c;出现了不知道哪国的语言。有个6&#xff0c;应该就是name的长度要大于6吧 OD载入&#xff0c;搜字符串。 00421BD7 |. 807D…
阅读更多...
时间与日期处理

时间与日期处理

主要有以下类&#xff1a; NSDate -- 表示一个绝对的时间点NSTimeZone -- 时区信息NSLocale -- 本地化信息NSDateComponents -- 一个封装了具体年月日、时秒分、周、季度等的类NSCalendar -- 日历类&#xff0c;它提供了大部分的日期计算接口&#xff0c;并且允许您在NSDate和N…
阅读更多...
C++ new/new operator、operator new、placement new初识

C++ new/new operator、operator new、placement new初识

简要释义 1.operator new是内存分配函数&#xff08;同malloc&#xff09;&#xff0c;C&#xff0b;&#xff0b;在全局作用域(global scope)内提供了3份默认的operator new实现&#xff0c;并且用户可以重载operator new。 1 void* operator new(std::size_t) throw(std::bad…
阅读更多...
160 - 45 Dope2112.2

160 - 45 Dope2112.2

环境&#xff1a; Windows xp sp3 工具 1.ollydbg 2.exeinfope 0x00 查壳 还是无壳的Delphi程序 0x01 分析 这次继续OD载入搜字符串&#xff0c;但是没找到错误信息的字符串。 又因为是Delphi程序&#xff0c;所以可以试一下这样&#xff1a; OD载入后还是搜字符串&…
阅读更多...
最新文章

Copyright @ 2022~2023