美文网首页动画相关iOS 进阶iOS 客户端精品博文
UITableView列表动画详细解说

UITableView列表动画详细解说

作者: sea_biscute | 来源:发表于2017-09-09 16:13 被阅读815次

    前言

    UITableView是开发中常用的列表组件,它封装了UITableViewCell的复用等功能,但是这不是我们今天讨论的重点.今天要讨论的是UITableView的列表动画,其中包括

    1.动态插入元素
    2.动态删除元素
    3.批量插入和删除元素
    4.动态修改cell内item的样式
    5.动态改变cell的高度

    动态插入和删除元素

    UITableView提供了以下方法来进行插入删除和刷新的操作

    - (void)insertSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation;
- (void)deleteSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation;
- (void)reloadSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation;
 
- (void)insertRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation: (UITableViewRowAnimation)animation;
- (void)deleteRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation: (UITableViewRowAnimation)animation;
- (void)reloadRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;

    需要注意的是在进行插入和删除动画前,记得要更改数据源.数据源必须和编辑后的元素保持一致.
    这里引出一个异常*** Assertion failure in -[UITableView _endCellAnimationsWithContext:],当进行了insert,delete等操作,但是和datasource不一致时,就会出现该异常.

    以上操作都是独立执行的(也就是修改一次数据源,执行一次insert或delete),这里我们遇到一个问题,如果我想批量操作列表,举例 : 删除section0的row0,同时想删除整个section2,与此同时我还想在section2的row3添加某个元素,应该怎么做呢?

    UITableView提供了批量操作delete,insert和reload的方法,并且按照特定的顺序规则动态的执行这些操作,这个顺序的规范下面我们会提到,继续往下看.

    批量删除和插入动画

    如果想批量处理insert,delete和reload方法,这里我们要引入一个动画块

    在这两个方法内执行的操作,都会被包装好,统一交由UITableView处理.在动画块执行完成之后,tableview还是回去datasource和delegete来获取数据,所以就说明了为什么一定要在进行插入和删除动画前,记得要更改数据源.

    下面的效果是我们删除了section0的row1,同时删除了整个section1,因为调用了

     [self.tableView deleteRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:1 inSection:0]] withRowAnimation:UITableViewRowAnimationFade];
 [self.tableView deleteSections:[NSIndexSet indexSetWithIndex:1] withRowAnimation:UITableViewRowAnimationLeft];

    所以只能封装在动画块内执行,即

    //修改数据源
[self.tempArray[0] removeObjectAtIndex:1];
[self.tempArray removeObjectAtIndex:1];

//执行动画
 [self.tableView beginUpdates];
 [self.tableView deleteRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:1 inSection:0]] withRowAnimation:UITableViewRowAnimationFade];
 [self.tableView deleteSections:[NSIndexSet indexSetWithIndex:1] withRowAnimation:UITableViewRowAnimationLeft]
 [self.tableView endUpdates];
    删除row和section.gif

    tips:iOS11以后提供了方法performBatchUpdates(_:completion:)
    来代替上面的beginUpdates和endUpdates

    批量删除和插入的执行顺序

    在-beginUpdates和-endUpdates代码块内的更新指令,并不是安装他们的添加顺序执行的,我们看下面的例子

    1.  [tableview beginUpdates];
2.  [tableview insertRowsAtIndexPaths:insertIndexPaths withRowAnimation:UITableViewRowAnimationRight];
3.  [tableview deleteRowsAtIndexPaths:deleteIndexPaths withRowAnimation:UITableViewRowAnimationFade];
4.  [tableview endUpdates];

    插入和删除哪个先执行呢?
    你一定以为deleteRowsAtIndexPaths:withRowAnimation:是在insertRowsAtIndexPaths:withRowAnimation:以后执行的,其实不然.
    UITableView会延迟所有的插入操作,先执行列表的删除操作.
    除此之外,UITableView对update block内调动reload方法也不是顺序执行的,当在update的代码块内调用reload方法时,会延迟列表的插入和删除操作,首先执行reload方法.

    先执行删除,然后再执行插入,了解这个概念非常重要

    批量删除和插入可能会出现意想不到的后果

    这段要介绍一下delete和insert内部实现,上面我们已经了解了先执行删除,然后再执行插入,但是他们操作的数据源是不同的,这段可能有点绕,我会借助一些图形和示例进行解释,请认真看下去.

    以下的讨论都是在beginUpdates和endUpdates动画块内执行的前提下,这个前提我们不再赘述.首先看一下官方文档的描述 :

    • delete和reload操作,针对的数据源是在所有操作未进行前的原始数据源.
    • insert操作,针对的数据源是在所有操作执行后的结果数据源.
    插入是针对结果数据源

    我们说过: insert操作,针对的数据源是在所有操作执行后的结果数据源.
    如果有个数组,内部元素为递增整数[1...8],执行下面代码,数据源结果和动画执行结果分别是什么呢?

     [self.tempArray insertObject:@100 atIndex:3];
 [self.tempArray insertObject:@200 atIndex:5];

 [self.tableView beginUpdates];
 [self.tableView insertRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:3 inSection:0]] withRowAnimation:UITableViewRowAnimationLeft];
 [self.tableView insertRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:5 inSection:0]] withRowAnimation:UITableViewRowAnimationLeft];
 [self.tableView endUpdates];

    先看数据源的变化: [1, 2, 3,100, 4, 200, 5, 6, 7, 8]

    插入的数据源变化

    执行动画的结果: [1, 2, 3,100, 4, 200, 5, 6, 7, 8]

    插入动画的执行结果
    我们看到插入动画的执行结果,和编辑后的self.tempArray是一样的,即 insert操作,针对的数据源是在所有操作执行后的结果数据源.
    那么什么叫原始数据源,什么又是 delete和reload操作,针对的数据源是在所有操作未进行前的原始数据源.往下看
    删除是针对原始数据源

    先进行个小总结: 同时对一个数组的多个删除操作会导致删除的动画执行结果和数据源不一致.原因是数组内index的计算数据源和动画的计算方式是不一样的.
    所以请尽量避免同时对一个数组进行多次删除操作,具体我们来解释下!

    如果有个数组,内部元素为递增整数[1...8],执行结果应该是什么呢?

     [self.tempArray removeObjectAtIndex:1];
 [self.tempArray removeObjectAtIndex:5];

 [self.tableView beginUpdates];
 [self.tableView deleteRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:1 inSection:0]] withRowAnimation:UITableViewRowAnimationFade];
 [self.tableView deleteRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:5 inSection:0]] withRowAnimation:UITableViewRowAnimationFade];
 [self.tableView endUpdates];

    这里我们顺便回顾一下上面代码块内执行顺序的介绍先执行删除,然后再执行插入,即beginUpdates内的insert代码,放在delete前面和后面对结果都不会有任何影响.(对数组的操作,即tempArray的增加和删除还是按照先后顺序执行的,我们说的顺序只是代码块内的动画执行顺序)

    先看数据源的改变: 变为了[1, 3, 4, 5, 6, 8]

    数据源变化结果

    但是我们看一下动画的执行结果: [1, 3, 4, 5, 7, 8]

    动画执行结果

    WHAT?居然和数据源不一样?别急,我们来解释下

    还记得上面说过: delete和reload操作,针对的数据源是在所有操作未进行前的原始数据源.这个数据源,是在执行动画块前,在tableview当前展示的原始的数据源[1, 2, 3, 4, 5, 6, 7, 8],也可以理解为tableview已经缓存好的数据源.

    我们知道的是动画的删除操作,并不会真正的修改数据源,所以执行以下代码,都是从[1, 2, 3, 4, 5, 6, 7, 8]里面去对应index,也就是row1和row5,所以结果变为了[1, 3, 4, 5, 7, 8]

     [self.tableView deleteRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:1 inSection:0]] withRowAnimation:UITableViewRowAnimationFade];
 [self.tableView deleteRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:5 inSection:0]] withRowAnimation:UITableViewRowAnimationFade];

    这就解释了上面的说法: delete和reload操作,针对的数据源是在所有操作未进行前的原始数据源.

    最终还是使用数据源

    上面的操作,列表的展示结果和数据源不一致,我们上面说过,动画块执行结束后,UITableView还是去datasource和deletgate去获取数据
    还记得UITableViewCell的复用机制吗?当我们滑动界面时,如果展示错误的cell-----7不在当前可视屏幕范围内时,它会进入复用池,被其他cell复用,当cell-----7再次回到屏幕时,它会通过调用cellForRowAtIndexPath:(NSIndexPath *)indexPath方法来获取数据,这时的使用的数据源self.tempArray是[1, 3, 4, 5, 6, 8],所以你猜发生了什么?没错,cell-----7变成了cell-----6,和self.tempArray的数据一致了.

    滑动复用后的界面

    这样界面的变化,会让用户非常的困惑,所以请尽量避免同时对一个数组进行多次删除操作

    动态改变cell的样式

    UITableView有编辑模式(edit mode)和普通模式(normal mode)两种模式,可以通过方法 setEditing:animated:来切换这两种模式.
    当tableview接收setEditing:animated:方法时,会触发每个可视UITableViewCell的同名方法setEditing:animated:.先看下效果图

    动态改变cell样式.gif

    修改做了以下事情:

    • titleLabel左移动
    • switch隐藏
    • ...

    实现方法:

    1. 进入编辑模式[self.tableView setEditing:YES animated:YES];
    2. 在UITableViewCell的方法- (void)setEditing:(BOOL)editing animated:(BOOL)animated内修改frame
    - (void)setEditing:(BOOL)editing animated:(BOOL)animated{
    [super setEditing:editing animated:animated];
    self.titleLabel.frame.origin.x -= 12;
}

    不需要自己添加任何animation的代码,搞定!

    动态改变cell的高度

    -beginUpdates和-endUpdates除了用作批量处理动画外,还可以用于动态刷新某些cell的样式.
    可以通过执行-beginUpdates和-endUpdates,即不在动画块内添加任何代码,来动态改变cell的高度.

    改变cell高度.gif

    具体实现:
    1.在heightForRowAtIndexPath:(NSIndexPath *)indexPath进行设置,_isEdit是自己管理的一个状态变量

    -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
  if (_isEdited && indexPath.row == 0) {
      return 100;
  }
  return 44;
}

    2.通过-beginUpdates和-endUpdates调用更新

    - (void)updateHeight {
    _isEdited = YES;
    [self.tableView beginUpdates];
    [self.tableView endUpdates];
}

    搞定!

    相关文章

      网友评论

      本文标题：UITableView列表动画详细解说

      本文链接：https://www.haomeiwen.com/subject/jbcijxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      动画相关

      iOS 进阶

      iOS 客户端精品博文

      iOS基础

      @IT·互联网

      首页投稿（暂停使用，暂停投稿）

      创作

      iOS绘图与动画

      关于我们|服务条款|联系我们|UITableView列表动画详细解说|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！