ios - 如何使用自动布局为 UITableViewCell 高度设置动画？

Question

Stack Overflow 上有很多关于 UITableViewCell 高度动画的类似问题，但对新的 iOS8 自动布局驱动的表格 View 没有任何作用。我的问题:

自定义单元格:

@property (weak, nonatomic) IBOutlet iCarousel *carouselView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@property (weak, nonatomic) IBOutlet UIButton *seeAllButton;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *carouselHeightConstraint;

注意carouselHeightConstraint。这是内容 View 的 subview (唯一的 subview )的高度约束。

例如，高度设置为 230.0f。在第一次加载时它看起来像:

然后，在查看全部 操作中我想展开 单元格，我的代码:

- (IBAction)seeAllButtonAction:(id)sender {
  
  BOOL vertical = !self.carouselCell.carouselView.vertical;
  self.carouselCell.carouselView.type = vertical ? iCarouselTypeCylinder : iCarouselTypeLinear;
  self.carouselCell.carouselView.vertical = vertical;

  [UIView transitionWithView:self.carouselCell.carouselView
                    duration:0.2
                     options:0
                  animations:^{
  
    self.carouselCell.carouselHeightConstraint.constant = vertical ? CGRectGetHeight(self.tableView.frame) : 230;
    [self.carouselCell setNeedsUpdateConstraints];
    [self.carouselCell updateConstraintsIfNeeded];
    [self.tableView beginUpdates];
    [self.tableView endUpdates];

                  completion:^(BOOL finished) {
                  }];
}

如您所见，我尝试使用这个很好的旧解决方案:
Can you animate a height change on a UITableViewCell when selected?

结果:

我的单元格缩小到44.0f高度。

问题:

为什么会这样？我希望看到我的单元格借助自动布局的魔力顺利扩展。

注意:
我不想使用 -tableView:heightForRowAtIndexPath:。现在是自动布局时代，对吧？

Answer 1

以下对我有用:

准备:

1. 在 viewDidLoad 上告诉 TableView 使用自适应单元格:

   tableView.rowHeight = UITableViewAutomaticDimension;
   tableView.estimatedRowHeight = 44; // Some average height of your cells
   

2. 像往常一样添加约束，但将它们添加到单元格的 contentView!

动画高度变化:

假设您更改了约束的常量:

myConstraint.constant = newValue;

...或者您添加/删除约束。

要激活此更改，请按以下步骤操作:

1. 告诉 contentView 动画变化:

   [UIView animateWithDuration: 0.3 animations: ^{ [cell.contentView layoutIfNeeded] }]; // Or self.contentView if you're doing this from your own cell subclass
   

2. 然后告诉表格 View 用动画对高度变化使用react

   [tableView beginUpdates];
   [tableView endUpdates];
   

第一步中 0.3 的持续时间似乎是 UITableView 在调用 begin/endUpdates 时用于其动画的持续时间。

奖励 - 无需动画且无需重新加载整个表格即可更改高度:

如果你想做和上面一样的事情，但没有动画，那么这样做:

[cell.contentView layoutIfNeeded];
[UIView setAnimationsEnabled: FALSE];
[tableView beginUpdates];
[tableView endUpdates];
[UIView setAnimationsEnabled: TRUE];

总结:

// Height changing code here:
// ...

if (animate) {
    [UIView animateWithDuration: 0.3 animations: ^{ [cell.contentView layoutIfNeeded]; }];
    [tableView beginUpdates];
    [tableView endUpdates];
}
else {
    [cell.contentView layoutIfNeeded];
    [UIView setAnimationsEnabled: FALSE];
    [tableView beginUpdates];
    [tableView endUpdates];
    [UIView setAnimationsEnabled: TRUE];
}

---

您可以查看我在用户选择时展开的单元格的实现 here (纯 Swift 和纯自动布局 - 真正的 future 之路)。