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__)
    // 每一行显示5let 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值