Question

我有一个带有自定义布局和可区分数据源的集合视图。我想用动画调整单元格的大小。

使用自定义布局：看起来像在动画过程中单元格的内容缩放到新大小。只有当单元格达到最终大小时，它才会被重绘（见下面的动画）

使用库存流布局，子视图在动画期间正确布局：标签保持在顶部，没有调整大小，开关相同。

所以我认为问题出在布局实现中，可以在布局中添加什么以在动画期间实现正确的布局？

说明

本例中使用的自定义布局是FSQCollectionViewAlignedLayout，我也是通过我在代码中使用的自定义获得的。我注意到在某些情况下，始终返回相同的布局属性对象很重要，而 FSQCollectionViewAlignedLayout 不会这样做。我修改为不返回副本，结果是一样的。

对于单元格（在xib中定义），单元格的contentMode及其contentView设置为.top。单元格的 contentView 包含 2 个子视图：一个标签（布置在 layoutSubviews 中）和一个开关（布置有约束，但它的存在对动画没有影响）。

控制器代码为：

class ViewController: UIViewController, UICollectionViewDelegateFlowLayout {
    enum Section {
        case main
    }
    @IBOutlet weak var collectionView : UICollectionView!
    var layout = FSQCollectionViewAlignedLayout()
    var dataSource : UICollectionViewDiffableDataSource<Section, String>!
    var cellHeight : CGFloat = 100

    override func loadView() {
        super.loadView()
        
        layout.defaultCellSize = CGSize(width: 150, height: 100)
        collectionView.setCollectionViewLayout(layout, animated: false) // uncommented to use the stock flow layout
        
        dataSource = UICollectionViewDiffableDataSource(collectionView: collectionView, cellProvider: { cv, indexPath, item in
            guard let cell = cv.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as? Cell else { return nil }
            cell.label.text = item
            return cell
        })
        
        var snapshot = NSDiffableDataSourceSnapshot<Section, String>()
        snapshot.appendSections([.main])
        snapshot.appendItems(["1", "2"], toSection: .main)
        dataSource.apply(snapshot)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 150, height: cellHeight)
    }
    
    @IBAction func resizeAction(_ sender: Any) {
        if let layout = collectionView.collectionViewLayout as? FSQCollectionViewAlignedLayout {
            UIView.animate(withDuration: 0.25) {
                layout.defaultCellSize.height += 50
                let invalidation = FSQCollectionViewAlignedLayoutInvalidationContext()
                invalidation.invalidateItems(at: [[0, 0], [0, 1]])
                layout.invalidateLayout(with: invalidation)
                self.view.layoutIfNeeded()
            }
        }
        if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
            UIView.animate(withDuration: 0.25) {
                self.cellHeight += 50
                let invalidation = UICollectionViewFlowLayoutInvalidationContext()
                invalidation.invalidateItems(at: [[0, 0], [0, 1]])
                layout.invalidateLayout(with: invalidation)
                self.view.layoutIfNeeded()
            }
        }
    }
}

class Cell : UICollectionViewCell {
    @IBOutlet weak var label: UILabel!
    
    override func layoutSubviews() {
        super.layoutSubviews()
        label.frame = CGRect(x: 0, y: 0, width: bounds.width, height: 30)
    }
}

Answer 1

我在这个问题上花了一张开发者支持票。答案是不支持重新加载单元格时的自定义动画。

因此，作为一种解决方法，我最终创建了添加到视图层次结构中的新单元格实例，然后添加了自动布局约束，以便它们与正在调整大小的单元格完全重叠。然后在这些新添加的单元格上运行动画。在动画结束时，这些单元格被移除。

UICollectionView：使用动画和自定义布局调整单元格大小

1 个答案: