iOS_Swift之UICollectionView详解

github下载地址:下载源码

一、简单介绍

      UICollectionView是一种很常用的控件，与常用控件UITableView有很多相似的地方，它们都是UIScrollView的子类。UICollectionView可以实现很多不同布局的设计，比如常见的九宫格就是通过UICollectionView来实现的。下面通过一个Demo来详细介绍它的使用。

二、Demo介绍

1）UICollectionViewDataSource和UICollectionViewDelegate的代理方法

    // #MARK: --UICollectionViewDataSource的代理方法    /**    - 该方法是可选方法，默认为1    - returns: CollectionView中section的个数    */    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {        return 1    }        /**     - returns: Section中Item的个数     */    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {        return 8    }        /**     - returns: 绘制collectionView的cell     */    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("MyCell", forIndexPath: indexPath) as! CollectionViewCell                cell.imageView.image = UIImage(named: "\(indexPath.row + 2).png")        cell.label.text = "美景\(indexPath.row + 1)"                return cell    }        /**     - returns: 返回headview或者footview     */    func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {        let headView = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "headView", forIndexPath: indexPath)        headView.backgroundColor = UIColor.whiteColor()                return headView    }    

    // #MARK: --UICollectionViewDelegate的代理方法    /**    Description:当点击某个Item之后的回应    */    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {        print("(\(indexPath.section),\(indexPath.row))")    }    

2）UICollectionViewFlowLayout基本设置如下：

        //定义collectionView的布局类型，流布局        let layout = UICollectionViewFlowLayout()        //设置cell的大小        layout.itemSize = CGSize(width: width/2, height: height/3)        //滑动方向 默认方向是垂直        layout.scrollDirection = .Vertical        //每个Item之间最小的间距        layout.minimumInteritemSpacing = 0        //每行之间最小的间距        layout.minimumLineSpacing = 0

3）自定义UICollectionViewCell

A：新建CollectionViewCell.swift继承UICollectionViewCell并同时创建相应的xib

import UIKitclass CollectionViewCell: UICollectionViewCell {    @IBOutlet weak var imageView: UIImageView!    @IBOutlet weak var label: UILabel!        override func awakeFromNib() {        super.awakeFromNib()                self.contentView.backgroundColor = UIColor(red: 23/255, green: 232/255, blue: 233/255, alpha: 1)    }}

B：UICollectionViewCell的注册

  //CollectionViewCell的注册        collectionView.registerNib(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "MyCell")

4）Header和Footer的注册，以及使用UICollectionViewDelegateFlowLayout的代理方法

       在XCode中通过CMD键+单击可以查看UICollectionViewDelegateFlowLayout，可以发现它继承于UICollectionViewDelegate，从它协议内部方法可以发现，都是与布局相关的回调方法。其中有定义item大小，section之间的间距以及绘制header和footer的回调方法，当我看到这里发现这与UICollectionFlowLayout里面部分属性一样，于是打开UICollectionViewFlowLayout协议，将里面的属性一比对，发现很多属性方法都一致，如设置itemSize，也就是定义item的大小，minimumLineSpacing是定义最小行距等。不难发现，在UICollectionViewDelegateFlowLayout里面的回调方法是可以单独定制某个item的，如果有不同类型item的需求，只能通过回调方法。

        header的绘制如下(footer原理一样):

    /**     - returns: 返回headview或者footview     */    func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {        let headView = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "headView", forIndexPath: indexPath)        headView.backgroundColor = UIColor.whiteColor()                return headView    }

        header的注册如下:

 //header的注册        collectionView.registerClass(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headView")        

       定制不同的item，回调方法如下:

    /**     Description:可以定制不同的item          - returns: item的大小     */    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {        if  indexPath.row % 2 == 1{            return CGSize(width: width/2, height: height/3)        }        else{            return CGSize(width: width/2, height: height/2)        }    }

三、Demo gif(下载源码)

定制item前：

定制item后：