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 UIKit

class 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后：