导读
该Demo展示了一个可展开折叠的TableView,类似于QQ好友分组列表,我参考了@zhenwenming 写的博客,通过研读,在实现原理不变的前提下,少放了几个不必要的对象,自己写了一个改进版的Demo。
对比差异
参考的Demo:
博主的Demo:
- 从 视图层次上看
通过分析代码,可以发现,该 ExpandTableView 折叠收缩的实现方式是: - 分组名:section 1 ——> 显示在 UITableView对象 的 Header View 上;
- Header View 上 ——> 用code画了一个 UIButton
- UIButton 上 ——> 用code分别画了 2个UIImageView 显示左右两边的图片,一个UILabel显示文字,底部又放了一张 Line 的图片显示分割线
- 每组可展开/收缩的内容:section 11/12/13 ——> 显示在 UITableView对象 的 UITableViewCell 上;然后UITableViewCell又是用Xib重新绘制了。
- 另外,我发现,该ExpandTableView中列表视图的父视图是基于UIViewController的,TableView也是code画上去的,而我自己创建的时候就直接把父视图设置为UITableViewController,这样就不用手动创建TableView了。
模仿实现
- 视图层次上的优化点,
- UIButton 上,通过设置 UIButton 自带的 ImageView 和 Label 属性设置UI,通过设置两者的偏移量让其水平左右显示。
- Header View 底部的分割线也没有通过放图片来设置,而是通过设置 UIButton 的背景为灰色,设置 Footer View 的高度为1,巧妙的显示了分割线。
实现原理
该可展开折叠的 TableView 通过 Header View 上的 Button 点击来实现 ,而每组的展开/折叠状态用1/0标记并存放在Flag数组中,每按一下Button,就修改一下Flag值,然后重新加载section,就实现分组展开收缩的动作了。
更多细节先参考源码吧: GitHub源码