ios - UICollectionViewCell - 当单元格内容改变时动画单元格高度改变

Question

我有一个非常简单的 UICollectionView , 使用 iOS 13 的 UICollectionViewCompositionalLayout .单元格有一个垂直 UIStackView ，当您按下“切换详细信息”按钮时，我只需更改 isHidden detailsView 的值.当单元格通知 View Controller 它需要执行 collectionView.collectionViewLayout.invalidateLayout() 时，一切基本正常:打开和关闭详细信息 View 。但它没有动画，所以它看起来有点刺耳。

class ViewController: UIViewController {
  @IBOutlet private var collectionView: UICollectionView!

  override func viewDidLoad() {
    super.viewDidLoad()
    collectionView.collectionViewLayout = createLayout()
  }

  private func createLayout() -> UICollectionViewLayout {
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(200))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(200))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

    let section = NSCollectionLayoutSection(group: group)
    section.contentInsets = .init(top: 16, leading: 16, bottom: 16, trailing: 16)
    section.interGroupSpacing = 16

    let layout = UICollectionViewCompositionalLayout(section: section)
    return layout
  }
}

extension ViewController: UICollectionViewDataSource {
  func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 10
  }

  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! Cell
    cell.resize = { [weak self] in
      UIView.animate(withDuration: 2) {
        self?.collectionView.collectionViewLayout.invalidateLayout()
      }
    }
    return cell
  }
}

class Cell: UICollectionViewCell {
  @IBOutlet private var detailsView: UIView!

  var resize: (() -> Void)?

  override func awakeFromNib() {
    super.awakeFromNib()
    contentView.layer.cornerRadius = 10
  }

  @IBAction private func toggleDetails() {
    detailsView.isHidden.toggle()
    resize?()
  }
}

复制项目: https://github.com/kevinrenskers/CellHeight .

我怎样才能动画这个细节 View 的切换，以便高度变化动画？并且可以与 UIStackView 结合使用吗？并显示/隐藏其 subview ？请注意，详细信息 View 在现实世界的应用程序中没有固定高度，所以我不能只是在两个固定值之间切换单元格高度。

Answer 1

随着集合 View 的动画，我将你的 repo 放在一起并进行一些更改。

https://github.com/lebaotrung93/CellHeight

有用。但是使用 UIStackView，似乎很难在 CollectionView 中管理它的大小。由于自己的行为。