tableview折叠动效
缘起于看见书旗小说的列表有点击折叠的动效,觉得十分炫酷。想了三分钟,不知道怎么写。晚上百度了下,知道了大致流程,于是自己实现了下,发现不少坑,于是写下这篇博文
实现原理:
1 tableview cell高度自适应
2 点击cell时,控制cell对应的数据源显示,更新约束后,tableView reloadData
贴下核心代码:
class CellMdl:NSObject {
var title:String?
var img:UIImage?
var detail:String?
} class FoldCell:UITableViewCell { var title:UILabel!
var detail:UILabel!
var imgView:UIImageView!
var indicator:UIImageView! var mdl:CellMdl! override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
addViews()
} required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
} func addViews() { } override func layoutSubviews() {
title.snp.makeConstraints { (make) in
make.top.left.equalTo(self)
make.height.equalTo(44)
make.right.equalTo(indicator.snp.left)
}
indicator.snp.makeConstraints { (make) in
make.centerY.equalTo(title)
make.right.equalTo(self)
}
imgView.snp.makeConstraints { (make) in
make.top.equalTo(title.snp.bottom)
make.left.right.equalTo(self)
}
detail.snp.makeConstraints { (make) in
make.top.equalTo(imgView.snp.bottom)
make.left.right.bottom.equalTo(self)
}
} func showIndicatorAni(back:Bool,blk:(()->Void)?) {
let rotate = !back ? CGAffineTransform(rotationAngle: .pi) : .identity
UIView.animate(withDuration: 0.3, animations: {
self.indicator.transform = rotate
}) { (finish) in
self.detail.text = !back ? self.mdl.detail : nil
self.imgView.image = !back ? self.mdl.img : nil
// self.layoutIfNeeded()
if blk != nil {
blk!()
}
}
} // 设置数据源
func setMdl(cellMdl:CellMdl) {
mdl = cellMdl
title.text = cellMdl.title
// detail.text = cellMdl.detail
// imgView.image = cellMdl.img
}
}
这里对应cell声明一个专属cell的model,为cell提供数据
实现autolayout的关键步骤是
1.setModel时,仅将显示的头部视图赋值,未赋值视图应没内容自适应后不会显示,将传入的model用变量存下来(后续使用)
2.点击动画,代码请细看showIndicatorAni函数
这里有两参数,第一个back参数:是否折叠,第二个是个blk,方便外部进行操作。
如果不折叠,即显示全部内容,将model的数据赋值给需要显示的视图;如果折叠,不需要显示全部内容,将不需显示的视图内容清空。
动画完且数据设置完全后,更新约束self layoutIfNeed后将动作传出
然后是外部tableView点击的具体实现
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if previousCell != nil {
previousCell?.showIndicatorAni(back: true,blk: nil)
} if let foldcell = tableView.cellForRow(at: indexPath) as? FoldCell {
weak var weakSelf = self
foldcell.showIndicatorAni(back: false,blk: {
weakSelf?.tableView.reloadData()
})
previousCell = foldcell
}
}
这里设置个变量previousCell标识前一个选择的cell。为什么写这个变量?选择的cell动画后,前一个cell的动画要还原,并且显示的视图要隐藏,要隐藏,要隐藏!!!
然后新选择的cell.showIndicator,回调中刷新tableview
顺带提一下tableview设置的关键点
1.cell自适应设置姿势
tableView.estimatedHeight = 100
tableView.rowHeight = UITableviewAutomaticDimension
2.cell单选
tableView.allowMutableSelection = false
效果图贴一张
tableview折叠动效的更多相关文章
- iOS转场弹窗、网易云音乐动效、圆环取色器、Loading效果等源码
iOS精选源码 view controller transition and popover (控制器转场和弹窗) UITableView头部悬停+UITableView侧滑嵌套 一行代码集成时间选择 ...
- iOS开发Facebook POP动效库使用教程
如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地基.感谢Facebook开源了POP动效库,让人人都能制作出华丽的动效.我们只需5步,便能 ...
- 一个绚丽的loading动效分析与实现!
最终效果如下 从效果上看,我们需要考虑以下几个问题: 1.叶子的随机产生: 2.叶子随着一条正余弦曲线移动: 3.叶子在移动的时候旋转,旋转方向随机,正时针或逆时针: 4.叶子遇到进度条,似乎是融合进 ...
- 用AE如何制作如下三个loading动效,
在本期象牙绘UED团队分享当中,我们将详细演示用AE如何制作如下三个loading动效, 其中涉及到AE表达式的应用.值曲线调整.速度曲线编辑等知识. 对于初学者来说可能信息量略大,希望通过是视频教程 ...
- 玩转HTML5移动页面(动效篇)(转载)
本文转载自: 玩转HTML5移动页面(动效篇)
- 玩转HTML5移动页面(动效篇)
原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有 ...
- 动效解析工厂:Mask 动画
转载自:http://www.cocoachina.com/ios/20160214/15250.html 前言:很多动效都是多种动画的组合,有时候你可能只是需要其中某个动画,但面对庞杂的代码库或是教 ...
- Web动效研究与实践
随着CSS3和HTML5的发展,越来越多狂拽炫酷叼炸天的动效在网页设计上遍地开花,根据最新的浏览器市场份额报告,IE6的份额已经降到了5.21%,这简直是一个喜大普奔的消息,做动效可以完全不care低 ...
- Android 一个绚丽的loading动效分析与实现!
http://blog.csdn.net/tianjian4592/article/details/44538605 前两天我们这边的头儿给我说,有个 gif 动效很不错,可以考虑用来做项目里的loa ...
随机推荐
- Docker之tomcat安装与部署项目
docker安装tomcat docker pull tomcat:8.5 等待... (1)正常的方式启动tomcat docker run -d --name tomcat -p 80:808 ...
- IP子网如何划分?so easy!
IP地址与子网掩码 1. IP地址划分 1.1 IP地址 1.2 由两部分组成 1.3 IP地址的分类 1.4 IP地址的规划原则 2.子网掩码划分 2.1 32个二进制位 2.2IP地址和子网掩码作 ...
- pytest - 失败重运行机制:rerun
失败重运行机制 用例失败的情况下,可以重新运行用例 一旦用例失败,马上重新运行 安装插件:pip install pytest-rerunfailures 使用命令:--reruns 重试次数 如 - ...
- 在OpenShift平台上验证NVIDIA DGX系统的分布式多节点自动驾驶AI训练
在OpenShift平台上验证NVIDIA DGX系统的分布式多节点自动驾驶AI训练 自动驾驶汽车的深度神经网络(DNN)开发是一项艰巨的工作.本文验证了DGX多节点,多GPU,分布式训练在DXC机器 ...
- GVS灵动系列家族上新 | 稳住,我们能“银”
用天赐的色库 给生活增加些艺术的气息 生活本应多点探索的乐趣 今天 GVS灵动系列家族流光银(白玻璃) 全新上线 用灵感朝圣自然之道 邂逅另一种柔性美学 与早前的经典黑.星耀灰 和而不同,美美与共 携 ...
- 给小米路由R1D增加WebDAV服务
我的R1D是14年买的,原装的硬盘已经不能用了,换了一块从笔记本上退役下来的500G硬盘后继续愉快的使用了-- 当初买这款路由器的原因之一是看中了它的内置硬盘,可以用来备份手机相册.存储智能摄像机录像 ...
- c语言经典算法---计算Fibonacci数列
算法是一个程序和软件的灵魂,作为一名优秀的程序员,只有对一些基础的算法有着全面的掌握,才会在设计程序和编写代码的过程中显得得心应手.下面我就分享一个C语言中比较基础却极为重要的一个算法----计算Fi ...
- 为什么我严重不建议去培训机构参加SAP培训?
欢迎关注微信公众号:sap_gui (ERP咨询顾问之家) 关于是否要参加SAP培训的话题已经是老生常谈了,知乎上随便一搜有好多人在问是否要去参加SAP培训,底下已经有很多人在上面给出了正确建议.但也 ...
- 重新整理 .net core 实践篇—————工作单元模式[二十六]
前言 简单整理一下工作单元模式. 正文 工作单元模式有3个特性,也算是其功能: 使用同一上下文 跟踪实体的状态 保障事务一致性 工作单元模式 主要关注事务,所以重点在事务上. 在共享层的基础建设类库中 ...
- C# 设置Word文本框中的文字旋转方向
在Word中可插入文本框,默认情况下插入的文本框中的文字方向为横向排列,对于一些特殊文档的设计要求,需要改变文字方向,如本次测试中的文档排版为考生试卷类型,考生信息栏的内容为下图中的这种, 本文将以C ...