UITableView列表動畫詳細(xì)解說

前言

UITableView是開發(fā)中常用的列表組件,它封裝了UITableViewCell的復(fù)用等功能,但是這不是我們今天討論的重點(diǎn).今天要討論的是UITableView的列表動畫,其中包括

1.動態(tài)插入元素
2.動態(tài)刪除元素
3.批量插入和刪除元素
4.動態(tài)修改cell內(nèi)item的樣式
5.動態(tài)改變cell的高度

動態(tài)插入和刪除元素

UITableView提供了以下方法來進(jìn)行插入刪除和刷新的操作

- (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;

需要注意的是在進(jìn)行插入和刪除動畫前,記得要更改數(shù)據(jù)源.數(shù)據(jù)源必須和編輯后的元素保持一致.
這里引出一個異常*** Assertion failure in -[UITableView _endCellAnimationsWithContext:],當(dāng)進(jìn)行了insert,delete等操作,但是和datasource不一致時,就會出現(xiàn)該異常.

以上操作都是獨(dú)立執(zhí)行的(也就是修改一次數(shù)據(jù)源,執(zhí)行一次insert或delete),這里我們遇到一個問題,如果我想批量操作列表,舉例 : 刪除section0的row0,同時想刪除整個section2,與此同時我還想在section2的row3添加某個元素,應(yīng)該怎么做呢?

UITableView提供了批量操作delete,insert和reload的方法,并且按照特定的順序規(guī)則動態(tài)的執(zhí)行這些操作,這個順序的規(guī)范下面我們會提到,繼續(xù)往下看.

批量刪除和插入動畫

如果想批量處理insert,delete和reload方法,這里我們要引入一個動畫塊

在這兩個方法內(nèi)執(zhí)行的操作,都會被包裝好,統(tǒng)一交由UITableView處理.在動畫塊執(zhí)行完成之后,tableview還是回去datasource和delegete來獲取數(shù)據(jù),所以就說明了為什么一定要在進(jìn)行插入和刪除動畫前,記得要更改數(shù)據(jù)源.

下面的效果是我們刪除了section0的row1,同時刪除了整個section1,因為調(diào)用了

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

所以只能封裝在動畫塊內(nèi)執(zhí)行,即

//修改數(shù)據(jù)源
[self.tempArray[0] removeObjectAtIndex:1];
[self.tempArray removeObjectAtIndex:1];

//執(zhí)行動畫
 [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

批量刪除和插入的執(zhí)行順序

在-beginUpdates和-endUpdates代碼塊內(nèi)的更新指令,并不是安裝他們的添加順序執(zhí)行的,我們看下面的例子

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

插入和刪除哪個先執(zhí)行呢?
你一定以為deleteRowsAtIndexPaths:withRowAnimation:是在insertRowsAtIndexPaths:withRowAnimation:以后執(zhí)行的,其實(shí)不然.
UITableView會延遲所有的插入操作,先執(zhí)行列表的刪除操作.
除此之外,UITableView對update block內(nèi)調(diào)動reload方法也不是順序執(zhí)行的,當(dāng)在update的代碼塊內(nèi)調(diào)用reload方法時,會延遲列表的插入和刪除操作,首先執(zhí)行reload方法.

先執(zhí)行刪除,然后再執(zhí)行插入,了解這個概念非常重要

批量刪除和插入可能會出現(xiàn)意想不到的后果

這段要介紹一下delete和insert內(nèi)部實(shí)現(xiàn),上面我們已經(jīng)了解了先執(zhí)行刪除,然后再執(zhí)行插入,但是他們操作的數(shù)據(jù)源是不同的,這段可能有點(diǎn)繞,我會借助一些圖形和示例進(jìn)行解釋,請認(rèn)真看下去.

以下的討論都是在beginUpdates和endUpdates動畫塊內(nèi)執(zhí)行的前提下,這個前提我們不再贅述.首先看一下官方文檔的描述 :

  • delete和reload操作,針對的數(shù)據(jù)源是在所有操作未進(jìn)行前的原始數(shù)據(jù)源.
  • insert操作,針對的數(shù)據(jù)源是在所有操作執(zhí)行后的結(jié)果數(shù)據(jù)源.
插入是針對結(jié)果數(shù)據(jù)源

我們說過: insert操作,針對的數(shù)據(jù)源是在所有操作執(zhí)行后的結(jié)果數(shù)據(jù)源.
如果有個數(shù)組,內(nèi)部元素為遞增整數(shù)[1...8],執(zhí)行下面代碼,數(shù)據(jù)源結(jié)果和動畫執(zhí)行結(jié)果分別是什么呢?

 [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];

先看數(shù)據(jù)源的變化: [1, 2, 3,100, 4, 200, 5, 6, 7, 8]

插入的數(shù)據(jù)源變化

執(zhí)行動畫的結(jié)果: [1, 2, 3,100, 4, 200, 5, 6, 7, 8]

插入動畫的執(zhí)行結(jié)果

我們看到插入動畫的執(zhí)行結(jié)果,和編輯后的self.tempArray是一樣的,即 insert操作,針對的數(shù)據(jù)源是在所有操作執(zhí)行后的結(jié)果數(shù)據(jù)源.
那么什么叫原始數(shù)據(jù)源,什么又是 delete和reload操作,針對的數(shù)據(jù)源是在所有操作未進(jìn)行前的原始數(shù)據(jù)源.往下看

刪除是針對原始數(shù)據(jù)源

先進(jìn)行個小總結(jié): 同時對一個數(shù)組的多個刪除操作會導(dǎo)致刪除的動畫執(zhí)行結(jié)果和數(shù)據(jù)源不一致.原因是數(shù)組內(nèi)index的計算數(shù)據(jù)源和動畫的計算方式是不一樣的.
所以請盡量避免同時對一個數(shù)組進(jìn)行多次刪除操作,具體我們來解釋下!

如果有個數(shù)組,內(nèi)部元素為遞增整數(shù)[1...8],執(zhí)行結(jié)果應(yīng)該是什么呢?

 [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];

這里我們順便回顧一下上面代碼塊內(nèi)執(zhí)行順序的介紹先執(zhí)行刪除,然后再執(zhí)行插入,即beginUpdates內(nèi)的insert代碼,放在delete前面和后面對結(jié)果都不會有任何影響.(對數(shù)組的操作,即tempArray的增加和刪除還是按照先后順序執(zhí)行的,我們說的順序只是代碼塊內(nèi)的動畫執(zhí)行順序)

先看數(shù)據(jù)源的改變: 變?yōu)榱?code>[1, 3, 4, 5, 6, 8]

數(shù)據(jù)源變化結(jié)果

但是我們看一下動畫的執(zhí)行結(jié)果: [1, 3, 4, 5, 7, 8]

動畫執(zhí)行結(jié)果

WHAT?居然和數(shù)據(jù)源不一樣?別急,我們來解釋下

還記得上面說過: delete和reload操作,針對的數(shù)據(jù)源是在所有操作未進(jìn)行前的原始數(shù)據(jù)源.這個數(shù)據(jù)源,是在執(zhí)行動畫塊前,在tableview當(dāng)前展示的原始的數(shù)據(jù)源[1, 2, 3, 4, 5, 6, 7, 8],也可以理解為tableview已經(jīng)緩存好的數(shù)據(jù)源.

我們知道的是動畫的刪除操作,并不會真正的修改數(shù)據(jù)源,所以執(zhí)行以下代碼,都是從[1, 2, 3, 4, 5, 6, 7, 8]里面去對應(yīng)index,也就是row1和row5,所以結(jié)果變?yōu)榱?code>[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操作,針對的數(shù)據(jù)源是在所有操作未進(jìn)行前的原始數(shù)據(jù)源.

最終還是使用數(shù)據(jù)源

上面的操作,列表的展示結(jié)果和數(shù)據(jù)源不一致,我們上面說過,動畫塊執(zhí)行結(jié)束后,UITableView還是去datasource和deletgate去獲取數(shù)據(jù)
還記得UITableViewCell的復(fù)用機(jī)制嗎?當(dāng)我們滑動界面時,如果展示錯誤的cell-----7不在當(dāng)前可視屏幕范圍內(nèi)時,它會進(jìn)入復(fù)用池,被其他cell復(fù)用,當(dāng)cell-----7再次回到屏幕時,它會通過調(diào)用cellForRowAtIndexPath:(NSIndexPath *)indexPath方法來獲取數(shù)據(jù),這時的使用的數(shù)據(jù)源self.tempArray是[1, 3, 4, 5, 6, 8],所以你猜發(fā)生了什么?沒錯,cell-----7變成了cell-----6,和self.tempArray的數(shù)據(jù)一致了.

滑動復(fù)用后的界面

這樣界面的變化,會讓用戶非常的困惑,所以請盡量避免同時對一個數(shù)組進(jìn)行多次刪除操作

動態(tài)改變cell的樣式

UITableView有編輯模式(edit mode)和普通模式(normal mode)兩種模式,可以通過方法 setEditing:animated:來切換這兩種模式.
當(dāng)tableview接收setEditing:animated:方法時,會觸發(fā)每個可視UITableViewCell的同名方法setEditing:animated:.先看下效果圖

動態(tài)改變cell樣式.gif

修改做了以下事情:

  • titleLabel左移動
  • switch隱藏
  • ...

實(shí)現(xiàn)方法:

  1. 進(jìn)入編輯模式[self.tableView setEditing:YES animated:YES];
  2. 在UITableViewCell的方法- (void)setEditing:(BOOL)editing animated:(BOOL)animated內(nèi)修改frame
- (void)setEditing:(BOOL)editing animated:(BOOL)animated{
    [super setEditing:editing animated:animated];
    self.titleLabel.frame.origin.x -= 12;
}

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

動態(tài)改變cell的高度

-beginUpdates和-endUpdates除了用作批量處理動畫外,還可以用于動態(tài)刷新某些cell的樣式.
可以通過執(zhí)行-beginUpdates和-endUpdates,即不在動畫塊內(nèi)添加任何代碼,來動態(tài)改變cell的高度.

改變cell高度.gif

具體實(shí)現(xiàn):
1.在heightForRowAtIndexPath:(NSIndexPath *)indexPath進(jìn)行設(shè)置,_isEdit是自己管理的一個狀態(tài)變量

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

2.通過-beginUpdates和-endUpdates調(diào)用更新

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

搞定!

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 概述在iOS開發(fā)中UITableView可以說是使用最廣泛的控件，我們平時使用的軟件中到處都可以看到它的影子，類似...
    liudhkk閱讀 9,290評論 3贊 38
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,210評論 4贊 61
  • 版權(quán)聲明:未經(jīng)本人允許,禁止轉(zhuǎn)載. 1. TableView初始化 1.UITableView有兩種風(fēng)格:UITa...
    蕭雪痕閱讀 2,989評論 2贊 10
  • 陳落叼著棒棒糖，斜靠在高二（三）班后門口，夏天下午五點(diǎn)的太陽，剛好落下半個。 下課鈴聲在陳落頭頂響起，陳落捂著耳朵...
    哩哩李閱讀 507評論 0贊 1
  • Dear Linda， I am so exciting that our advertisement will ...
    紅果sugar閱讀 196評論 0贊 0

友情鏈接更多精彩內(nèi)容