UICollectionView左上对齐布局

最新推荐文章于 2024-06-05 09:54:28 发布

Kevin写代码

最新推荐文章于 2024-06-05 09:54:28 发布

阅读量564

点赞数 4

CC 4.0 BY-SA版权

分类专栏： iOS 文章标签： ios collectionview widget

本文链接：https://blog.youkuaiyun.com/weixin_42979360/article/details/134268093

iOS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用Swift开发一个可自定义尺寸的左上对齐瀑布流布局库，通过UICollectionView、UIScrollView、格子复用和布局管理，解决项目中不同尺寸格子的需求。作者还提供了GitHub仓库链接以便于使用和贡献。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近完成的项目需要左上对齐的瀑布流，每个格子的尺寸不同，可以使用UICollectionView定义不同的尺寸，但是CollectionView的格子高度是相同的，我想要的是这样在这里插入图片描述
左上对齐分别是0、1、2；3、4；
当前只能自定义一个组件来完成需求。

使用UIScrollView来复用格子

注册格子类型

    public func register(_ viewClass: WidgetCollectionCell.Type?, forViewWithReuseIdentifier identifier: String) {
        registers[identifier] = viewClass
    }

提取格子

    public func dequeueReusableView(withReuseIdentifier identifier: String, for index: Int) -> WidgetCollectionCell? {
        var cell: WidgetCollectionCell?
        let reuseIdentifier = "\(identifier)_\(index)"
        if let reuseCell = outOfScreens[reuseIdentifier] {
            cell = reuseCell
        }
        if let viewClass = registers[identifier] as? WidgetCollectionCell.Type {
            cell = viewClass.init(reuseIdentifier: identifier, index: index)
        }
        if let _ = cell {
            onScreens[reuseIdentifier] = cell
            outOfScreens.removeValue(forKey: reuseIdentifier)
        }
        return cell
    }

移除不显示的格子

        var screenFrame = scrollView.bounds
        screenFrame.origin = scrollView.contentOffset
        allScreens.forEach { v in
            let reuseIdentifier = "\(String(describing: v.reuseIdentifier))_\(v.index)"
            if CGRectIntersectsRect(v.frame, screenFrame) {
                onScreens[reuseIdentifier] = v
                outOfScreens.removeValue(forKey: reuseIdentifier)
                addSubview(v)
            }else {
                onScreens.removeValue(forKey: reuseIdentifier)
                outOfScreens[reuseIdentifier] = v
                v.removeFromSuperview()
            }
        }

兼容原本的UIScrollViewDelegate

            if let d = delegate as? WidgetCollectionViewDelegate {
                widgetDelegate = d
                delegate = self
            }

然后就是布局了

上传至GitHub

github上创建lib WidgetCollection-Swift
本地创建lib
cd 到指定文件夹
pod lib create WidgetCollection-Swift
按提示输入相应内容
将创建好的lib上传WidgetCollection-Swift

pod 'WidgetCollection-Swift', :git => 'https://github.com/KevinSnoopy/WidgetCollection-Swift.git'