时间戳

首页 > 解决方案 > UICollectionViewCell - 当其内容改变时动画单元格高度改变

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

问题描述

我有一个非常简单UICollectionView的，使用 iOS 13 的UICollectionViewCompositionalLayout. 单元格有一个垂直UIStackView的，当你按下“切换细节”按钮时，我简单地改变isHidden了detailsView. 当单元格然后通知视图控制器它需要执行collectionView.collectionViewLayout.invalidateLayout()时，基本上一切正常：详细信息视图被打开和关闭。但它不会对此进行动画处理，因此看起来有点刺耳。

在此处输入图像描述 在此处输入图像描述

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 。

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

标签： iosuicollectionviewuicollectionviewcell

解决方案

随着集合视图的动画化，我将您的存储库提供给您并进行一些更改。

https://github.com/lebaotrung93/CellHeight

有用。CollectionView但是对于 UIStackView，由于其自​​身的行为，似乎很难管理它的大小。

推荐阅读