UICollectionViewDelegateFlowLayout

UICollectionViewDataSource

UICollectionViewDelegate

UICollectionViewDelegateFlowLayout

UICollectionViewCell

UICollectionViewLayout

---

1 UICollectionViewDelegateFlowLayout

1. 获取Item的Size
2. 获取Section的间隔
3. 获取Header和Footer的Size

2 实战演练

1. 界面搭建
2. 类YJCollectionViewDelegateFlowLayoutVC
3. 实现UICollectionViewDelegateFlowLayout

---

1 UICollectionViewDelegateFlowLayout

UICollectionViewDelegateFlowLayout是UICollectionViewDelegate的子类，也就是说它继承了UICollectionViewDelegate的所有协议。在UICollectionViewDelegate的基础上，UICollectionViewDelegateFlowLayout增加了关于UICollectionViewFlowLayout的相关控制，让我们能够更加精细的控制视图的布局。

1.1 获取Item的Size

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize

1.2 获取Section的间隔

// 边间隔
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets

// MARK: 行间隔
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat

// MARK: 列间隔
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat

1.3 获取Header和Footer的Size

// MARK: Header显示
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize

// MARK: Footer显示
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize

2 实战演练

2.1 界面搭建

界面搭建如UICollectionViewDataSource所示，这里不在详细解锁。

2.2 类YJCollectionViewDelegateFlowLayoutVC

这里使用类YJCollectionViewDelegateFlowLayoutVC为搭建演示关于UICollectionViewDelegateFlowLayout的使用，下面是部分源代码。

//
//  YJCollectionViewDelegateFlowLayoutVC.swift
//  UI
//
//  CSDN:http://blog.csdn.net/y550918116j
//  GitHub:https://github.com/937447974/Blog
//
//  Created by yangjun on 15/12/21.
//  Copyright © 2015年 阳君. All rights reserved.
//

import UIKit

/// UICollectionViewDelegateFlowLayout
class YJCollectionViewDelegateFlowLayoutVC: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    /// UICollectionView
    @IBOutlet weak var collectionView: UICollectionView!
    /// 数据源
    private var data = [[Int]]()

    override func viewDidLoad() {
        super.viewDidLoad()
        // 测试数据
        for _ in 0...2 {
            var list = [Int]()
            for i in 0..<10 {
                list.append(i)
            }
            self.data.append(list)
        }
        // 长点击事件，做移动cell操作
        self.collectionView.allowsMoveItem()
    }

    // MARK: - UICollectionViewDataSource
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return self.data.count
    }

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.data[section].count
    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath)
        cell.backgroundColor = UIColor.grayColor()
        if let label: UILabel = cell.viewWithTag(8) as? UILabel {
            label.text = "\(indexPath.item)"
        }
        return cell
    }

    func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
        var crView: UICollectionReusableView!
        if (kind == UICollectionElementKindSectionHeader) { // Header
            crView = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "header", forIndexPath: indexPath)
            // 标题
            if let label: UILabel = crView.viewWithTag(8) as? UILabel {
                label.text = "\(indexPath.section) Section"
            }
            crView.backgroundColor = UIColor.orangeColor()
        } else { // Footer
            crView = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "footer", forIndexPath: indexPath)
            crView.backgroundColor = UIColor.purpleColor()
        }
        return crView
    }

}

2.3 实现UICollectionViewDelegateFlowLayout

接下来实现UICollectionViewDelegateFlowLayout。

// MARK: - UICollectionViewDelegateFlowLayout
// MARK: - Getting the Size of Items
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    print(__FUNCTION__)
    // 每一行显示5个
    let weight = (YJUtilScreenSize.screenMinLength-10*5)/4
    return CGSize(width: weight, height: weight)
}

// MARK: - Getting the Section Spacing
// 边间隔
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
    print(__FUNCTION__)
    return UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
}

// MARK: 行间隔
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
    print(__FUNCTION__)
    return 10
}

// MARK: 列间隔
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
    print(__FUNCTION__)
    return 10
}

// MARK: - Getting the Header and Footer Sizes
// MARK: Header显示
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    print(__FUNCTION__)
    return CGSize(width: collectionView.frame.width, height: 50)
}

// MARK: Footer显示
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
    print(__FUNCTION__)
    return CGSize(width: collectionView.frame.width, height: 50)
}

运行项目后，看见如下效果图，会发现每个item之间的间隔都是相等的。

 

---

其他

源代码

Swift

参考资料

UICollectionView Class Reference

UICollectionViewDataSource Protocol Reference

UICollectionViewDelegateFlowLayout Protocol Reference

文档修改记录

时间	描述
2015-12-23	博文完成

版权所有

CSDN：http://blog.csdn.net/y550918116j

GitHub：https://github.com/937447974/Blog