swift4.1 类似QQ分组的tableview实现原理探究

前言：OC时代就已经熟用铺开的技术，但在swift却实现的不够优雅，网上清一色copy的技术文档说烂了都只有一种实现方法，8102年了，这种不是很优雅的方式不应该出现在这里。

先说说展开tableview的实现

• 我们一般有两种方式，但这里我只想讨论使用secion实现的方法。即第一层为section，展开层为cell这种。下面是效果图
  image.png
  
  
  类似这种效果的，就需要我们自定义sectionView（创建view，添加控件那些就省略了，这里提一下需要的是,我们自定义的section需要继承自系统的UITableViewHeaderFooterView，否则无效），给sectionView添加点击手势(展开cell，以及箭头的动画)，给sectionView添加delegate协议。
  delegate方法.png
  
  通过传入的标记值改变箭头方向
  
  箭头→变成↓的动画.png
  
  

  delegate将点击事件传递出去

  
  
  image.png
  
  到此，sectionView层的自定义就结束了，关键的还在controller层
  #################################分割线#################################

• controller里面创建自定义的sectionView并指定当前controller为代理

  
  
  image.png

• 这里需要提一下的是，我们的sectionView应该有个flag来记录当前的展开关闭状态，一般我们都是在model里面添加一个falg属性。但是这里为了方便演示，我手动初始化一个flag
  默认有两个sectionView并且都是未展开状态.png
• 这个flag有以下作用：

1. 控制row的行数。

   
   
   image.png
   
   

   2.控制row高度

   
   
   image.png
   
   3.控制sectionView的展开动画(箭头旋转，row数据更新）
   
   image.png

到此分歧点就来了，更新数据这一块，网上清一色使用的是tableview.reloadSection这个方法。甚至我在github上面发现一个800+star的库也是用的这种方法，其实这种方法基本上能实现展开收缩，但是有一个BUG。不是很优雅,看下图

42342.gif

当点击section时,会闪一下，并且箭头的动画也不是很自然。网上基本上清一色的都使用这种设计方法

• 下面我将介绍一个更加优雅的方式来实现这个效果。先上图，再解释
  image.png

我们除了reloadSection以外，还可以使用insert/deleteRows的方式，这样的好处是动态的添加row，界面会过度的更自然平滑,动画使用的是transform形变，简单方便。

效果图.gif

OK，讲到这里差不多把我遇到的一些问题理顺了一遍，之前动画点击有闪一下的效果使我感觉不是很好，所以才有了这边文章。顺便我还想吐槽一下，都8102年了，swift作为一个“未来趋势”的语言，技术文章也太少了点吧。都停留在2016年- -，希望大家平时有啥奇技淫巧，可以写出来多多交流~