自定义UICollectionViewFlowLayout

最新推荐文章于 2024-09-04 07:34:52 发布

疯狂的剁椒鱼头

最新推荐文章于 2024-09-04 07:34:52 发布

阅读量1.5k

点赞数

分类专栏： swift

本文链接：https://blog.csdn.net/u014051401/article/details/49742681

版权

本文详细介绍了如何在Swift中自定义UICollectionViewFlowLayout，包括水平排列、理解shouldInvalidateLayoutForBoundsChange与layoutAttributesForElementsInRect的关系以及实现缩放效果。提供代码示例和GitHub资源，适合初学者学习。

摘要由CSDN通过智能技术生成

swift:自定义UICollectionViewFlowLayout

写作目的

UICollectionView是ios中一个十分强大的控件，利用它能够十分简单的实现一些很好看的效果。UICollectionView的效果又依赖于UICollectionViewLayout或者它的子类UICollectionViewFlowLayout。而关于自定义UICollectionViewFlowLayout网上介绍的比较少。出于这一目的，写下这边文章，希望能够帮助初学者(我也是)实现一些简单的流水布局效果。下面的演示就是本篇文章的目标。最终版代码和所有图片素材(图片名和项目中有点不一样)已经上传至Github,大家可以下载学习。

几个简单的概念

UICollectionViewLayout与UICollectionViewFlowLayout

UICollectionView的显示效果几乎全部由UICollectionViewLayout负责(甚至是cell的大小)。所以，一般开发中所说的自定义UICollectionView也就是自定义UICollectionViewLayout。而UICollectionViewFlowLayout是继承自UICollectionViewLayout的，由苹果官方实现的流水布局效果。如果想自己实现一些流水布局效果可以继承自最原始UICollectionViewLayout从头写，也可以继承自UICollectionViewFlowLayout进行修改。文本是继承自UICollectionViewFlowLay*t

UICollectionViewLayoutAttributes

第二点就说了UICollectionView的显示效果几乎全部由UICollectionViewLayout负责，而真正存储着每一个cell的位置、大小等属性的是UICollectionViewLayoutAttributes。每一个cell对应着一个属于自己的UICollectionViewLayoutAttributes，而UICollectionViewLayout正是利用UICollectionViewLayoutAttributes里存在的信息对每一个cel进行布局。

流水布局

所谓流水布局就是：就是cell以一定的规律进行如同流水一般的有规律的一个接着一个的排列。最经典的流水布局便是九宫格布局，绝大部分的图片选择器也是流水布局。

准备工作

xcode7.0
swift2.0
自己我提供的素材并在控制器中添加如下代码

class ViewController: UIViewController,UICollectionViewDelegate, UICollectionViewDataSource {

    lazy var imageArray: [String] = {

        var array: [String] = []

        for i in 1...20 {
            array.append("\(i)-1")
        }

        return array
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        let collectionView =  UICollectionView(frame: CGRectMake(0, 100, self.view.bounds.width, 200), collectionViewLayout: UICollectionViewFlowLayout())
        collectionView.backgroundColor = UIColor.blackColor()
        collectionView.dataSource  = self
        collectionView.delegate = self

        collectionView.registerClass(ImageTextCell.self, forCellWithReuseIdentifier: "ImageTextCell")
        self.view.addSubview(collectionView)
    }

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.imageArray.count;
    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("ImageTextCell", forIndexPath: indexPath) as! ImageTextCell
        cell.imageStr = self.imageArray[indexPath.item]

        return cell
    }

}
//这里是自定义cell的代码
class ImageTextCell: UICollectionViewCell {

    var imageView: UIImageView?
    var imageStr: NSString? {

        didSet {
            self.imageView!.image = UIImage(named: self.imageStr as! String)
        }

    }

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.imageView = UIImageView()
        self.addSubview(self.i