• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

ios - 动画 UICollectionView 框架时的布局和单元格问题

[复制链接]
菜鸟教程小白 发表于 2022-12-11 20:21:31 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

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

Collection view animated frame update glitch

通过动画应用帧更新(特别是高度变化)使 Collection View (右侧有红色单元格)在将高度设置为较低值时立即刷新即将关闭的单元格。对 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()

我希望它首先作为一个魅力发挥作用,因为表格 View 不受此问题的影响。

我已经尝试过使用覆盖流布局并且:

  • 设置 shouldInvalidateLayout 方法以返回 false(测试为在单元格即将消失时触发),以便稍后处理手动失效
  • 扩展 layoutAttributesForElements(in 的矩形
  • 覆盖 finalLayoutAttributesForDisappearingItem

没有任何影响。 collectionView(_:didEndDisplaying 中注释掉的 print() 显示了 layoutSubviews 无论如何都会调用单元格解除。

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

Real-world problem

我想可能有一个非常简单、适当的解决方案?我更喜欢它而不是任何“非常hacky”的东西。

请让我们坚持修复 Playground 示例,不要猜测! ;)



Best Answer-推荐答案


尝试通过在动画 block 中添加 layoutIfNeeded() 来更新您的 View ,如下所示:

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

看看它是否有效:/

关于ios - 动画 UICollectionView 框架时的布局和单元格问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51336653/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap