这个问题 https://stackoverflow.com/questions/40680588/uicollectionviewcell-contents-do-not-animate-alongside-cells-contentview(及其答案)已经让我实现了我想要的一半。
但现在我陷入了下一部分,(老实说)我什至不确定这是否可能。
我已经像这样定义了一个单元格......
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
}
然后动画就变成这样了……
...这比我开始时更糟糕。
有没有办法使细胞状态的变化动画化?理想情况下,我希望图像视图的动画速度与布局动画相同。
如果我不改变单元内的东西,那么这不是问题。但在某些情况下,我会想要改变单元内的内容,并且我希望无论哪种方式都能顺利过渡。