标签： UICollectionView

一、简单介绍
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后：