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

时间:2018-07-08 21:08:24

标签: ios swift uicollectionview uicollectionviewcell uicollectionviewlayout

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()
    }
}

它具有三种可能的状态(小,中或大),这些状态由优先级设置。

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

它像这样...

enter image description here

从这段代码中您可以看到...

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
}

然后动画更改为此...

enter image description here

...比我开始时要差。

是否有办法将更改的状态动画化?理想情况下,我希望图像视图以与布局动画相同的速率进行动画处理。

如果我不更改单元内部的内容,那么这不是问题。但是在某些情况下,我会想要更改单元格中的内容,并且我希望这两种方法都可以平滑过渡。

1 个答案:

答案 0 :(得分: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

enter image description here