解决UITableViewCell展开动画位移错位

iOS在项目中,常会用到的一个需求就是,UITableView列表展开看全文,增加展开和收缩的动画。

第一种动画方式

系统提供了动画效果,比如我们刷新一行:

[tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];

系统为我们提供UITableViewRowAnimation各种过渡动画效果:

typedef NS_ENUM(NSInteger, UITableViewRowAnimation) {
    UITableViewRowAnimationFade,
    UITableViewRowAnimationRight,           // slide in from right (or out to right)
    UITableViewRowAnimationLeft,
    UITableViewRowAnimationTop,
    UITableViewRowAnimationBottom,
    UITableViewRowAnimationNone,            // available in iOS 3.0
    UITableViewRowAnimationMiddle,          // available in iOS 3.2.  attempts to keep cell centered in the space it will/did occupy
    UITableViewRowAnimationAutomatic = 100  // available in iOS 5.0.  chooses an appropriate animation style for you
};

可以根据自己需要的效果去更换类型,然后改边cell行高就可以实现。

但是使用这种方式有的会出现cell的错位问题,这是苹果的动画bug。这个问题是因为动画过程中,预估高度带来的原因。
解决这个错位的问题,可以提前保存预先存预估高度来解决:

@property (nonatomic, strong) NSMutableDictionary *cellHeightsDictionary;

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    [self.cellHeightsDictionary setObject:@(cell.frame.size.height) forKey:indexPath];
}

- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSNumber *height = [self.cellHeightsDictionary objectForKey:indexPath];
    if (height) return height.doubleValue;
    return UITableViewAutomaticDimension;
}

这样可以解决错位的问题,但是有的会出现另外一个问题,就是使用cell复用时,点击屏幕最上面的cell时,也会出现错位问题。显然使用UITableViewRowAnimation还是各种问题出来,因此建议使用静态更新的动画来解决:

第二种动画方式
[self.tableView beginUpdates];
[self.tableView endUpdates];

只需要两行,就可以实现更改高度平滑的动画效果。但是需要注意一点,动画的执行过程是更改cell的高度的动画,内部的高度在没有做好约束的前提下,可能效果不会很好。如果使用layout的方式进行约束或者使用autoresizingMask,让内部的控件比如说cell上面的一个label去适配cell的高度变化。就会自然而然的变。
但是如果没有做约束的话,比如直接用纯代码去定义label.frame,最后的显示效果也会有问题。
第二种方式,在中间去对需要更改的frame做动画效果达到想要的方法:

UITableView *cell = [tableView cellForRowAtIndexPath:indexPath];
[self.tableView beginUpdates];

[UIView animateWithDuration:0.25 animations:^{
     cell.textLabel.frame = CGRectMake(0, 0,FOScreenW, 50);
}];

[self.tableView endUpdates];

建议使用第一种方式,直接做好layout适配,就可以了。到这里使用系统的方式进行展开收缩动画,就不会有问题,效果非常好。

题外:如果想在endUpdates动画结束后,做其他的操作呢,比如去隐藏或显示控件之类的操作。可以使用CATransaction,具体的代码方式:

[CATransaction begin];
[CATransaction setCompletionBlock:^{
// 在这里做动画结束后的操作
    [cell isOpenOrClose];
}];
[self.tableView beginUpdates];
[self.tableView endUpdates];
[CATransaction commit];
第三种动画方式

如果前面两种你都不想要,那就只能去自定义的方式,最简单粗暴的,用动画只改变当前cell的frame值:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

UITableView *cell = [tableView cellForRowAtIndexPath:indexPath];

[UIView animateWithDuration:0.25 animations:^{
     cell.frame = CGRectMake(0, 0,FOScreenW, 100);
      [cell setNeedsLayout];
       [cell layoutIfNeeded];
// 并且要更新底下的cell,否则会被覆盖掉
      NSArray *cells = [tableView visibleCells];
      for (UITableViewCell *vis_cell in cells) {
        if (![vis_cell isEqual:cell]) {
             vis_cell.frame = CGRectMake(0, 0,FOScreenW, 50); 
             [vis_cell setNeedsLayout];
             [vis_cell layoutIfNeeded];
        }
    }
} completion:^(BOOL finished) {
       [tableView reloadData];
    }];
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343