在布局更改的同时重新加载/动画 UICollectionView

Posted 2023-02-23

【中文标题】在布局更改的同时重新加载/动画 UICollectionView

【英文标题】：Reloading/animating a UICollectionView alongside a layout change

【发布时间】：2018-07-08 21:08:23

【问题描述】：

This question（及其答案）让我达到了我想要的一半。

但现在我被困在下一部分并且（老实说）我什至不确定这是否可能。

我已经定义了一个像这样的单元格......

class ExpandableCell: UICollectionViewCell 

    var priority: Expandable.Priority = .low 
        didSet 
            imageView.isHidden = priority != .high
        
    

    private let imageView: UIView = 
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = .red
        v.heightAnchor.constraint(equalTo: v.widthAnchor).isActive = true
        return v
    ()

    private let label: UILabel = 
        let l = UILabel()
        l.translatesAutoresizingMaskIntoConstraints = false
        l.font = UIFont.preferredFont(forTextStyle: .headline)
        l.numberOfLines = 0
        l.text = "Tap Me!"
        l.setContentCompressionResistancePriority(.required, for: .vertical)
        l.adjustsFontForContentSizeCategory = true
        l.textAlignment = .center
        return l
    ()

    override init(frame: CGRect) 
        super.init(frame: frame)

        let labelStack: UIStackView = 
            let s = UIStackView(arrangedSubviews: [label])
            s.translatesAutoresizingMaskIntoConstraints = false
            s.axis = .vertical
            s.alignment = .center
            s.distribution = .equalCentering
            s.isLayoutMarginsRelativeArrangement = true
            return s
        ()

        let stackView: UIStackView = 
            let s = UIStackView(arrangedSubviews: [imageView, labelStack])
            s.translatesAutoresizingMaskIntoConstraints = false
            s.axis = .horizontal
            s.spacing = 10
            s.layoutMargins = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
            s.alignment = .fill
            s.distribution = .fill
            s.isLayoutMarginsRelativeArrangement = true
            return s
        ()

        addSubview(stackView)

        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: topAnchor),
            stackView.bottomAnchor.constraint(equalTo: bottomAnchor),
            stackView.leadingAnchor.constraint(equalTo: leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: trailingAnchor),
            ])

        clipsToBounds = true

        backgroundColor = UIColor.init(white: 0.8, alpha: 1.0)

        layer.cornerRadius = 6
    

    func display(button: DigestButton) 
        label.text = button.title
    

    required init?(coder aDecoder: NSCoder) 
        fatalError("init(coder:) has not been implemented")
    

    override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) 
        super.apply(layoutAttributes)
        layoutIfNeeded()
    

它具有三种可能的状态（小、中或大），由优先级设置。

我正在更新集合视图的布局，以根据数据中存储的优先级更新大小。

它是这样工作的......

从这段代码可以看出...

var priority: Expandable.Priority = .low 
    didSet 
        imageView.isHidden = priority != .high
    

更新优先级将显示/隐藏单元格中的“imageView”。它只是一个标准的UIView，用于概念验证。

但它只在布局更新完成后显示/隐藏imageView。

根据链接的问题，我正在使用代码更新事物的布局...

collectionView.performBatchUpdates(nil)  _ in
    // completion block
    collectionView.reloadItems(at: changedIndexPaths)

我正在为完成块中更改的单元格重新加载数据。 （因此动画完成后更新）。

如果我这样移动它......

collectionView.performBatchUpdates(
    collectionView.reloadItems(at: changedIndexPaths)
)  _ in
    // completion block

然后动画就变成了这个……

...这比我开始的时候更糟糕。

有没有办法为单元格状态的变化设置动画？理想情况下，我希望图像视图以与布局动画相同的速率进行动画处理。

如果我不更改单元格内的内容，那么这不是问题。但在某些情况下，我会想要更改单元格内的内容，并且我希望无论哪种方式都能顺利过渡。

【参考方案1】：

好的...我在这里添加这个作为初步答案，但我想我刚刚破解了它。

诀窍是通过UICollectionViewLayoutAttributes 将布局动画期间所需的任何信息传递到单元格中。

从文档中可以看出，您可以对布局属性进行子类化，以在其中添加布局所需的其他信息。

通过将priority 信息放入布局属性中，我现在可以在单元格移动和调整大小的同时为进入视图的图像视图设置动画。

轰隆隆！ :D

好的...像这样子类化 UICollectionViewLayoutAttributes...

fileprivate class PriorityLayoutAttributes: UICollectionViewLayoutAttributes 
    var priority: DigestExpandable.Priority? = nil

    override func copy(with zone: NSZone? = nil) -> Any 
        let copy = super.copy(with: zone) as! PriorityLayoutAttributes
        copy.priority = self.priority
        return copy
    

    override func isEqual(_ object: Any?) -> Bool 
        guard let rhs = object as? PriorityLayoutAttributes else 
            return false
        

        return super.isEqual(rhs) && priority == rhs.priority
    

...然后为这个特定的单元格使用这些属性。

在单元格中，我像这样更新了apply(_) 函数...

override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) 
    super.apply(layoutAttributes)

    if let attributes = layoutAttributes as? PriorityLayoutAttributes,
        let priority = attributes.priority 
        self.priority = priority
    

    layoutIfNeeded()

现在它可以很好地工作并且动画效果很好：D