如何使用自动布局为 UITableViewCell 高度设置动画? [英] How to animate UITableViewCell height using auto-layout?

问题描述

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

自定义单元格:

@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.这是内容视图的子视图(唯一的子视图)的高度限制.

例如，

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

然后，在 See All 操作中我想展开单元格，我的代码:

- (IBAction)seeAllButtonAction:(id)sender {BOOL 垂直 = !self.carouselCell.carouselView.vertical;self.carouselCell.carouselView.type = 垂直?iCarouselTypeCylinder:iCarouselTypeLinear；self.carouselCell.carouselView.vertical = 垂直；[UIView transitionWithView:self.carouselCell.carouselView持续时间:0.2选项:0动画:^{self.carouselCell.carouselHeightConstraint.constant = 垂直?CGRectGetHeight(self.tableView.frame) : 230;[self.carouselCell setNeedsUpdateConstraints];[self.carouselCell updateConstraintsIfNeeded];[self.tableView 开始更新];[self.tableView endUpdates];完成:^(布尔完成){}];}

如您所见，我尝试使用这个很好的旧解决方案:
(纯 Swift 和纯自动布局 -真正的未来之路).

There are lot of similar questions on Stack Overflow about UITableViewCell height animation, but nothing works for new iOS8 auto-layout driven table view. My issue:

Custom cell:

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

Note carouselHeightConstraint. This is height constraint for content view's subview (the only subview).

Height is set to 230.0f for example. On first load it looks like:

Then, on See All action I want to expand cell, my code:

- (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) {
                  }];
}

As you can see, I try to use this good old solution:
Can you animate a height change on a UITableViewCell when selected?

And the result:

My cell shrinks to 44.0f height.

Question:

Why this happens? I expect to see my cell smoothly expanded with magic of auto-layot.

Note:
I dont't want to use -tableView:heightForRowAtIndexPath:. It's auto-layout era, right?

解决方案

The following worked for me:

Preparation:

1. On viewDidLoad tell the table view to use self-sizing cells:

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

2. Add the constraints as you normally would, but add them to the cell's contentView!

Animate height changes:

Say you change a constraint's constant:

myConstraint.constant = newValue;

...or you add/remove constraints.

To animate this change, proceed as follows:

1. Tell the contentView to animate the change:

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

2. Then tell the table view to react to the height change with an animation

   [tableView beginUpdates];
   [tableView endUpdates];
   

The duration of 0.3 on the first step is what seems to be the duration UITableView uses for its animations when calling begin/endUpdates.

Bonus - change height without animation and without reloading the entire table:

If you want to do the same thing as above, but without an animation, then do this instead:

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

Summary:

// 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];
}

---

You can check out my implementation of a cell that expands when the user selects it here (pure Swift & pure autolayout - truly the way of the future).

这篇关于如何使用自动布局为 UITableViewCell 高度设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！