设置UICollectionView框架动画时的布局和单元格问题

时间:2018-07-14 08:20:16

标签: ios uicollectionview uicollectionviewcell uiviewanimation uicollectionviewlayout

我正遇到UICollectionView的一个非常奇怪的问题。我不太喜欢某些高级集合视图布局的东西,但我仍然认为这有点令人困惑。

Collection view animated frame update glitch

通过动画应用帧更新(特别是高度更改)时,将高度设置为较低值时,收集视图(右侧为红色单元格)将立即冲洗即将消除的单元格。在UITableView上执行相同的更改(左侧带有黄色单元格)可以很好地工作。请参见以下Playground示例进行演示:

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController, UITableViewDelegate,
    UITableViewDataSource, UICollectionViewDelegate, UICollectionViewDataSource
{
    var col : UICollectionView?

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 50
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 50
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let c = UITableViewCell()
        c.textLabel?.text = "cell"
        c.contentView.backgroundColor = UIColor.yellow
        return c
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 50
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let c = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        c.contentView.backgroundColor = UIColor.red
        return c
    }

    func collectionView(_ collectionView: UICollectionView, didEndDisplaying cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
//      print(Thread.callStackSymbols.joined(separator: "\n") + "\n\n")
    }

    override func loadView() {
        let view = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
        view.backgroundColor = .white

        var f = view.bounds
        f.size.height = 300

        let holder = UIView(frame: view.bounds)
        holder.autoresizingMask = [.flexibleWidth]

        f.size.width = 150
        f.size.height = view.frame.size.height

        let table = UITableView(frame: f, style: .plain)
        table.delegate = self
        table.dataSource = self
        table.autoresizingMask = [.flexibleWidth, .flexibleHeight, .flexibleRightMargin]

        f.origin.x = 150

        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSize(width: 150, height: 50)
        layout.minimumInteritemSpacing = 0
        layout.sectionInset = UIEdgeInsets.zero
        layout.minimumLineSpacing = 1

        let collection = UICollectionView(frame: f, collectionViewLayout: layout)
        collection.register(UICollectionViewCell.self, forCellWithReuseIdentifier: "cell")
        collection.delegate = self
        collection.dataSource = self
        collection.autoresizingMask = [.flexibleWidth, .flexibleHeight, .flexibleLeftMargin]
        col = collection

        view.addSubview(holder)
        holder.addSubview(table)
        holder.addSubview(collection)

        self.view = view
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        toggleContent()
    }

    func toggleContent()
    {
        guard let v = self.view.subviews.first else { return }

        var f = v.frame
        f.size.height = (f.size.height == 300) ? 150:300

        UIView.animate(withDuration: 1.0) {
            v.frame = f
        }

        DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 1.5) {
            self.toggleContent()
        }
    }
}

PlaygroundPage.current.liveView = MyViewController()

由于表格视图不受此问题的影响,我希望它首先具有魅力。

我已经尝试使用替代流布局和:

  • 设置shouldInvalidateLayout方法以返回false(在单元格即将消失时被测试为命中),这样我以后就可以处理手动失效了
  • 扩展layoutAttributesForElements(in:)的矩形
  • 覆盖finalLayoutAttributesForDisappearingItem

没有任何影响。 print()中被注释掉的collectionView(_:didEndDisplaying:)显示了layoutSubviews单元格被解雇的情况。

动机:这是由此引起的现实问题:

Real-world problem

我想可能有一个非常简单,适当的解决方案?我更喜欢它,而不是“极端hacky”。​​

请继续修复Playground示例,不要猜测! ;)

1 个答案:

答案 0 :(得分:0)

尝试在动画时更新视图,方法是在动画块中添加layoutIfNeeded(),如下所示:

UIView.animate(withDuration: 1.0) {
    v.frame = f
    self.view.layoutIfNeeded()
}

并查看是否有效:/