缘起于看见书旗小说的列表有点击折叠的动效,觉得十分炫酷。想了三分钟,不知道怎么写。晚上百度了下,知道了大致流程,于是自己实现了下,发现不少坑,于是写下这篇博文

实现原理:

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折叠动效的更多相关文章

  1. iOS转场弹窗、网易云音乐动效、圆环取色器、Loading效果等源码

    iOS精选源码 view controller transition and popover (控制器转场和弹窗) UITableView头部悬停+UITableView侧滑嵌套 一行代码集成时间选择 ...

  2. iOS开发Facebook POP动效库使用教程

    如果说Origami这款动效原型工具是Facebook Paper的幕后功臣,那么POP便是Origami的地基.感谢Facebook开源了POP动效库,让人人都能制作出华丽的动效.我们只需5步,便能 ...

  3. 一个绚丽的loading动效分析与实现!

    最终效果如下 从效果上看,我们需要考虑以下几个问题: 1.叶子的随机产生: 2.叶子随着一条正余弦曲线移动: 3.叶子在移动的时候旋转,旋转方向随机,正时针或逆时针: 4.叶子遇到进度条,似乎是融合进 ...

  4. 用AE如何制作如下三个loading动效,

    在本期象牙绘UED团队分享当中,我们将详细演示用AE如何制作如下三个loading动效, 其中涉及到AE表达式的应用.值曲线调整.速度曲线编辑等知识. 对于初学者来说可能信息量略大,希望通过是视频教程 ...

  5. 玩转HTML5移动页面(动效篇)(转载)

    本文转载自: 玩转HTML5移动页面(动效篇)

  6. 玩转HTML5移动页面(动效篇)

    原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有 ...

  7. 动效解析工厂:Mask 动画

    转载自:http://www.cocoachina.com/ios/20160214/15250.html 前言:很多动效都是多种动画的组合,有时候你可能只是需要其中某个动画,但面对庞杂的代码库或是教 ...

  8. Web动效研究与实践

    随着CSS3和HTML5的发展,越来越多狂拽炫酷叼炸天的动效在网页设计上遍地开花,根据最新的浏览器市场份额报告,IE6的份额已经降到了5.21%,这简直是一个喜大普奔的消息,做动效可以完全不care低 ...

  9. Android 一个绚丽的loading动效分析与实现!

    http://blog.csdn.net/tianjian4592/article/details/44538605 前两天我们这边的头儿给我说,有个 gif 动效很不错,可以考虑用来做项目里的loa ...

随机推荐

  1. 【遥感数字图像处理实验】Erdas版详细图文实验教程(8实验全)

    @ 目录 1. 专栏简介 2. 专栏地址 3. 专栏目录 1. 专栏简介 遥感数字图像的处理,是对遥感数字图像的计算机处理.与工业和医学数字图像不同,遥感数字图像类型更为多样,内容更为复杂.因此,遥感 ...

  2. SpringBoot2 集成测试组件,七种测试手段对比

    一.背景描述 在版本开发中,时间段大致的划分为:需求,开发,测试: 需求阶段:理解需求做好接口设计: 开发阶段:完成功能开发和对接: 测试上线:自测,提测,修复,上线: 实际上开发阶段两个核心的工作, ...

  3. Selenium3自动化测试【18】XPath定位元素(2)

    层级与属性结合定位 如果被定为的元素,无法通过自身属性来唯一标识自己,此时可以考虑借助上级元素来定位自己.举生活中的例子,一个婴儿刚出生,还没有姓名与身份证号,此时给婴儿进行检查时往往会标注为&quo ...

  4. GO学习-(17) Go语言基础之反射

    Go语言基础之反射 本文介绍了Go语言反射的意义和基本使用. 变量的内在机制 Go语言中的变量是分为两部分的: 类型信息:预先定义好的元信息. 值信息:程序运行过程中可动态变化的. 反射介绍 反射是指 ...

  5. Python+Selenium自动化-定位一组元素,单选框、复选框的选中方法

    Python+Selenium自动化-定位一组元素,单选框.复选框的选中方法   之前学习了8种定位单个元素的方法,同时webdriver还提供了8种定位一组元素的方法.唯一区别就是在单词elemen ...

  6. 优雅关闭springboot应用

    1.添加钩子函数,钩子函数中指定要调用的方法 @PostConstruct public void run() { this.zkClient.start(this); this.schedulerS ...

  7. 策略模式干掉if-else,switch

    1.传统if -else 写法 String nodeModelStr = ""; if (nodeType == NodeType.START){ StartModel star ...

  8. AI推理单元

    AI推理单元 推理服务供了一套面向 MLU(Machine Learning Unit,机器学习单元)设备的类似服务器的推理接口(C++11标准),以及模型加载与管理,推理任务调度等功能,极大地简化了 ...

  9. CUDA运行时 Runtime(二)

    CUDA运行时 Runtime(二) 一. 概述 下面的代码示例是利用共享内存的矩阵乘法的实现.在这个实现中,每个线程块负责计算C的一个方子矩阵C sub,块内的每个线程负责计算Csub的一个元素.如 ...

  10. 编译器架构Compiler Architecture(下)

    编译器架构Compiler Architecture(下) Combining Scanning and Parsing 实际上没有必要将扫描(词法分析/标记化)与解析(语法分析/树生成)分开.基于P ...