ios-tableViewcell展开与收缩动画处理
【前言】
在使用华尔街见闻 app 时,看到它的 tableVeiw 上的 cell 具有很好的展开与收缩功能。于是自己想了一下实现,感觉应该挺简单的,于是心痒痒写个 demo 实现一波。华尔街见闻 app 上的效果如下:
【本 demo 实现的效果图】
【思路】
由它的效果图可以观察出,cell 上默认显示文字多于 4 行时省略,点击时文字全部展现,cell 也同时适应文字的高度。
1. label 行数可以用 numberOfLines 属性来控制,改变它就可以改变文字的高度。
2. cell 的高度需要变化,但是如果根据文字收缩时算一下高度,展开时又给 cell 一个高度这样会很麻烦,因为这样要去精确计算出文字高度,上下间距。所以这里我想到的是利用 tableView 估算 cell 高度的机制,cell 内的文字用 label 的约束将 cell "撑满"。
3. 用一个 model 对应一个 cell 来防止复用数据错乱,然后展开与收缩用 tableView 的刷新动画就好了。
4. 实际实现过程中遇到一些小坑,重点在处理动画流畅思路上。
【代码实现】
1. 开启 tableView 估算机制
- (HomeView *)homeView
{
if (!_homeView) {
_homeView = [[HomeView alloc] init];
_homeView.backgroundColor = [UIColor whiteColor];
_homeView.tableView.dataSource = self;
_homeView.tableView.delegate = self;
_homeView.tableView.estimatedRowHeight = ;
[_homeView.tableView registerClass:[HomeCell class] forCellReuseIdentifier:NSStringFromClass([HomeCell class])];
[self.view addSubview:_homeView];
}
return _homeView;
}
2. label 默认 numberOfLines 设置
- (UILabel *)contentL
{
if (!_contentL) {
_contentL = [[UILabel alloc] init];
_contentL.frame = CGRectMake(, , self.contentView.bounds.size.width, );
_contentL.lineBreakMode = NSLineBreakByTruncatingTail;
_contentL.numberOfLines = ;
[self.contentView addSubview:_contentL];
}
return _contentL;
}
3. cell 数据设置 (通过 model 内 isOpen 来防止 cell 复用数据发生错乱)
- (void)setModel:(HomeModel *)model
{
_model = model;
self.contentL.text = model.title; if (model.isOpen) {
self.contentL.numberOfLines = NSIntegerMax;
} else {
self.contentL.numberOfLines = ;
}
}
4. 点击时 tableView 动画刷新
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
HomeCell *cell = [tableView cellForRowAtIndexPath:indexPath];
cell.model.isOpen = !cell.model.isOpen; [tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
}
【细节优化】
上面的实现看似美好且不费力,但实际多滑两下,多点一些不同高度的 cell,会发现它的展开动画明显不流畅,会出现一点抖动状况。如下:
看到这里,展开和收缩动画在这个 cell 上简直抽风了,有种突然截断了的感觉。这是肯定不能忍的。
优化分析:
tableView 动画不会有问题,是很正常的刷新对应的 cell。唯一可能出问题的就是 cell 的估算机制。因为 cell 我们默认给的高度是 80,所以当 cell 实际高度与默认高度相差太大时,就会出现这种问题了。
解决方案:
我们还是采用 cell 高度的估算机制,但要让系统尽可能估计得准确,减少它调整高度带来的动画不流畅。那就是利用 tableView 返回估算高度的代理方法,我们先给它算好一个高度,并且这个高度肯定基本准确。(注意: 提前在拿到 model 数据时就算好 cell 高度存放在 model 中,而不是在 tableView 代理方法中去计算 cell 高度,因为代理方法调用太频繁,那里做一些简单取值操作就好,不然当数据量大时影响 tableView 滑动性能。)
1. 在 model 获取数据时就算好 cell 数据的高度。在 HomeModel 加一个 cellHeight 属性,并重写 setTitle: 方法。如下:
- (void)setTitle:(NSString *)title
{
_title = title; CGFloat w = [UIScreen mainScreen].bounds.size.width - ;
CGFloat h = MAXFLOAT;
NSDictionary *dict = @{NSFontAttributeName: [UIFont systemFontOfSize:]};
CGFloat height = [title boundingRectWithSize:CGSizeMake(w, h) options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil].size.height;
_cellHeight = height + ;
}
2. 在控制器中加上 tableView 返回估算高度的代理方法设置如下:
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath
{
HomeModel *model = self.testDataArray[indexPath.row];
return model.cellHeight;
}
这样再运行,无论怎么滑怎么点,都十分完美。
ios-tableViewcell展开与收缩动画处理的更多相关文章
- ios知识点总结——UITableView的展开与收缩及横向Table
UITableVIew是iOS开发中使用最为广泛的一种控件,对于UITableView的基本用法本文不做探讨,本文主要是针对UITableView的展开与收缩进行阐述,在文章的后面也会探讨一下横向ta ...
- max-height实现任意高度元素的展开收缩动画
http://dobinspark.com.cn/ 前言: 在说到实现元素的展开收缩,通常的想法是通过控制display的元素属性和none之间的切换,虽然说功能可以实现,但是这种展开是没有任何动画的 ...
- 右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
- 【iOS系列】-UITableViewCell的展开与收缩的实现思路
UITableViewCell的展开与收缩的实现思路 现在项目中很多地方都会用到,所以我这里介绍一种可以复用的思路,这与文章后面的Swift的实现思路不同,具体大家可自行对比. Demo项目地址 开始 ...
- iOS学习笔记-自定义过渡动画
代码地址如下:http://www.demodashi.com/demo/11678.html 这篇笔记翻译自raywenderlick网站的过渡动画的一篇文章,原文用的swift,由于考虑到swif ...
- iOS开发UI篇—核心动画(UIView封装动画)
iOS开发UI篇—核心动画(UIView封装动画) 一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画 ...
- iOS开发UI篇—核心动画(转场动画和组动画)
转自:http://www.cnblogs.com/wendingding/p/3801454.html iOS开发UI篇—核心动画(转场动画和组动画) 一.转场动画简单介绍 CAAnimation的 ...
- iOS开发UI篇—核心动画(关键帧动画)
转自:http://www.cnblogs.com/wendingding/p/3801330.html iOS开发UI篇—核心动画(关键帧动画) 一.简单介绍 是CApropertyAnimatio ...
- iOS开发UI篇—核心动画(基础动画)
转自:http://www.cnblogs.com/wendingding/p/3801157.html 文顶顶 最怕你一生碌碌无为 还安慰自己平凡可贵 iOS开发UI篇—核心动画(基础动画) iOS ...
随机推荐
- 如何成为优秀的技术Leader
技术主管,又叫技术经理,英文一般是 Tech Leader ,简称 TL.随着工作经验的不断积累,能力的不断提升,每个人都有机会成为 Team Leader. 然而在机会到来前,我们必须提前做好准备, ...
- Spring之XML解析
XML解析,我们可以通过我们常用的以下代码作为入口 也许,我们习惯使用第一种加载方式,但是以前也存在 第二种加载,并且这两种加载也有差别,下面再来分析. 先分析 第二种 使用 BeanFactory ...
- 使用JS和PHP导出table表格
把table表格的内容导出成excel 或者word等格式(简单容易不需要太多php) 导出需注意 1. 样式都在行间,导出excel表格会继承样式包括colspan.rowspan,非表格元素,样式 ...
- TP5 用cron实现linux定时任务
TP5 用cron实现linux定时任务 1) tp5的控制器内容: namespace app\test\controller; use think\Controller; use think\fa ...
- MySQL开启binlog无法启动ct 10 21:27:31 postfix/pickup[4801]: warning: 6BD991A0039: message has been queue
1 详细异常 ct 10 21:27:31 postfix/pickup[4801]: warning: 6BD991A0039: message has been queue Oct 10 21:2 ...
- 轻量化模型之MobileNet系列
自 2012 年 AlexNet 以来,卷积神经网络在图像分类.目标检测.语义分割等领域获得广泛应用.随着性能要求越来越高,AlexNet 已经无法满足大家的需求,于是乎各路大牛纷纷提出性能更优越的 ...
- 6. Design Patterns with First-Class Functions
1. Refactoring Strategy 1.1 Classic Strategy from abc import ABC, abstractmethod from collections im ...
- vector和list插入性能对比
int main() { clock_t t1 =clock(); vector<string> vec_Str; ;i<;i++) { vec_Str.push_back(&quo ...
- 【转载】网易极客战记官方攻略-地牢- 迷一般的 Kithmaze
关卡连接: https://codecombat.163.com/play/level/riddling-kithmaze 如果你第一次走上歧途,改变你的循环来找到出路. 简介: 敬请期待! 默认代码 ...
- 题解 [CF891C] Envy
题面 解析 首先根据Kruskal算法, 我们可以知道, 在加入权值为\(w\)的边时, 权值小于\(w\)的边都已经加进树里了(除了连成环的). 所以,我们可以保存一下每条边的端点在加入生成树之前的 ...