定義collectionView的布局類型，流式布局
let layout = UICollectionViewFlowLayout()
設(shè)置item（cell）的大小
layout.itemSize = CGSize(width: width/2, height: height/3)
設(shè)置滑動方向
/**
默認方向是垂直
UICollectionViewScrollDirection.vertical? 省略寫法是.vertical
水平方向
UICollectionViewScrollDirection.horizontal 省略寫法是.horizontal
*/
layout.scrollDirection = .vertical
設(shè)置每個item之間最小的間距
layout.minimumInteritemSpacing = 0
設(shè)置每行之間最小的間距
layout.minimumLineSpacing = 0
定義一個UICollectionView
let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: width, height: height), collectionViewLayout: layout)
collectionView.backgroundColor = UIColor.red
設(shè)置collectionView的代理 (注意：設(shè)置完代理之后會有錯誤，原因是代理的必要方法沒有實現(xiàn))
collectionView.delegate = self
collectionView.dataSource = self
collectionViewCell的注冊
collectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "MyCell")
header 的注冊
collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headView")
加載collectionView
self.view.addSubview(collectionView)
實現(xiàn)collectionView的相關(guān)代理方法
使用關(guān)鍵字extension繼承代理，方法如下
extension MainViewController: UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout
numberOfSections方法，該方法為 可選 方法，返回sections的個數(shù)，默認return 1
// MARK: UICollectionViewDataSource 代理方法
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
numberOfItemsInSection方法，該方法為 必選 方法，返回section中item的個數(shù)
// MARK: UICollectionviewDataSource? 代理方法
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 8
}
cellForItemAt方法，該方法為 必選 方法，返回繪制collectionView的cell
// MARK: UICollectionviewDataSource? 代理方法
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath) as! CollectionViewCell
cell.imageView.image = UIImage(named: "\((indexPath as NSIndexPath).row + 2).png")
cell.label.text = "美景\((indexPath as NSIndexPath).row + 1)"
return cell
}
didSelectItemAt方法，該方法為 可選 方法，當點擊某個item之后的響應(yīng)
// MARK: UICollectionViewDelegate的代理方法
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print("(\((indexPath as NSIndexPath).section), \((indexPath as NSIndexPath).row))")
}
referenceSizeForHeaderInSection方法，該方法為 可選 方法，return: header的大小
// MARK: UICollectionViewDelegateFlowLayout的代理方法
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSize(width: width, height: 17)
}
sizeForItemAt方法，該方法為 可選 方法，return: item的大小
// MARK: UICollectionViewDelegateFlowLayout的代理方法
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if (indexPath as NSIndexPath).row % 2 == 1 {
return CGSize(width: width/2, height: height/3)
}
else {
return CGSize(width: width/2, height: height/2)
}
}
完整代碼
class MainViewController: UIViewController {
// 屏幕的寬和高
let width = UIScreen.main.bounds.width
let height = UIScreen.main.bounds.height
override func viewDidLoad() {
super.viewDidLoad()
// 加載UICollectionView
self.setupCollectionView()
}
// MARK: 加載UICollectionView
func setupCollectionView() {
// 1. 定義collectionView的布局類型，流布局
let layout = UICollectionViewFlowLayout()
// 2. 設(shè)置cell的大小
layout.itemSize = CGSize(width: width/2, height: height/3)
// 3. 滑動方向
/**
默認方向是垂直
UICollectionViewScrollDirection.vertical? 省略寫法是.vertical
水平方向
UICollectionViewScrollDirection.horizontal 省略寫法是.horizontal
*/
layout.scrollDirection = .vertical
// 4. 每個item之間最小的間距
layout.minimumInteritemSpacing = 0
// 5. 每行之間最小的間距
layout.minimumLineSpacing = 0
// 6. 定義一個UICollectionView
let collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: width, height: height), collectionViewLayout: layout)
collectionView.backgroundColor = UIColor.red
// 7. 設(shè)置collectionView的代理和數(shù)據(jù)源
collectionView.delegate = self
collectionView.dataSource = self;
// 8. collectionViewCell的注冊
collectionView.register(UINib(nibName: "CollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "MyCell")
// 9. header 的注冊
collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "headView")
self.view.addSubview(collectionView)
}
}
extension MainViewController: UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
// MARK: UICollectionViewDataSource 代理方法
/**
該方法為可選方法，默認為1
return: collectionView中section的個數(shù)
*/
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
// MARK: UICollectionviewDataSource? 代理方法
/**
改方法為必選方法
return: section中的item的個數(shù)
*/
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 8
}
// MARK: UICollectionviewDataSource? 代理方法
/**
改方法為必選方法
return: 繪制collectionView的cell
*/
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "MyCell", for: indexPath) as! CollectionViewCell
cell.imageView.image = UIImage(named: "\((indexPath as NSIndexPath).row + 2).png")
cell.label.text = "美景\((indexPath as NSIndexPath).row + 1)"
return cell
}
// MARK: UICollectionViewDelegate的代理方法
/**
Description: 當點擊某個item之后的回應(yīng)
*/
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print("(\((indexPath as NSIndexPath).section), \((indexPath as NSIndexPath).row))")
}
// MARK: UICollectionViewDelegateFlowLayout的代理方法
/**
return: header的大小
*/
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSize(width: width, height: 17)
}
/**
可以定制不同的item
return： item的大小
*/
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if (indexPath as NSIndexPath).row % 2 == 1 {
return CGSize(width: width/2, height: height/3)
}
else {
return CGSize(width: width/2, height: height/2)
}
}
}
