1、前言
上两篇已经介绍了UICollectionView的基本使用和利用UICollectionViewLayout子类实现了类似Keep勋章的画廊效果。现在我们再通过UICollectionViewFlowLayout子类实现UICollection分组效果，效果如图：
小睡眠搜索效果
2、创建项目
打开Xcode，点击File -> New -> Project，创建名为CollectionSectionDemo的App项目：
WeChat4ee4dfb1b121c09073f53e3020e1546a.jpg
3、添加资源
将40张测试图拖进Assets，每张图是一个小动物
添加资源
4、创建item
创建显示单个数据的ItemCell，继承自UICollectionViewCell，添加UIImageView，用于显示一个小动物图片
item
image.png
5、用UICollectionViewFlowLayout初始化UICollectionView
按照上两篇教程，打开ViewController.swift，同样是先用系统准备好的UICollectionViewFlowLayout初始化UICollectionView，完整的ViewController代码如下：
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
layout.itemSize = CGSize(width: 100, height: 100)
layout.sectionInset = UIEdgeInsets(top: 0, left: 36, bottom: 12, right: 36)
let collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
collectionView.backgroundColor = .lightGray
collectionView.dataSource = self
collectionView.delegate = self
collectionView.register(UINib(nibName: "ItemCell", bundle: nil), forCellWithReuseIdentifier: "ItemCell")
collectionView.register(UINib(nibName: "MyHeaderView", bundle: nil), forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "MyHeaderView")
collectionView.register(UINib(nibName: "MyFooterView", bundle: nil), forSupplementaryViewOfKind: UICollectionView.elementKindSectionFooter, withReuseIdentifier: "MyFooterView")
view.addSubview(collectionView)
}
}
extension ViewController: UICollectionViewDataSource {
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 4
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 5
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ItemCell", for: indexPath) as! ItemCell
let imageIndex = indexPath.section * 10 + indexPath.row
cell.imageView.image = UIImage(named: "\(imageIndex)")
return cell
}
}
运行项目，可以看到目前有4个section，每个section内有5个小动物（这里为了更好截图展示，每个section只返回5个itemCell，你可以将5修改为10）。但是目前只是简单的排列，没有如效果图那样有明显的分组效果。接下来我们来完成本篇的核心内容，显示分组背景
WechatIMG149.jpg
6、创建布局文件
新建MySectionLayout，继承自UICollectionViewFlowLayout，完整代码及注释：
import UIKit
class MySectionLayout: UICollectionViewFlowLayout {
override func prepare() {
super.prepare()
register(XCIntegralDecoretionView.self, forDecorationViewOfKind: "XCIntegralDecoretionView")
}
/// 返回rect范围内的cellItem、footer、header、装饰视图的布局属性
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
/// 调用super方法拿到原始的布局属性（包含cellItem、footer、header）
guard var attrs = super.layoutAttributesForElements(in: rect) else {
return nil
}
/// 添加装饰视图的布局属性
for attr in attrs {
if attr.representedElementKind == UICollectionView.elementKindSectionHeader {
attrs.append(self.layoutAttributesForDecorationViewOfKind(kind: "XCIntegralDecoretionView", at: attr.indexPath))
}
}
return attrs;
}
// 计算出装饰视图的布局属性
func layoutAttributesForDecorationViewOfKind(kind:String,at indexPath:IndexPath) -> UICollectionViewLayoutAttributes {
let attrs = UICollectionViewLayoutAttributes.init(forDecorationViewOfKind: kind, with: indexPath)
var frame = CGRect.zero
// 通过header和footer的布局，计算出装饰试图的布局
if let headerAttrs = layoutAttributesForSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, at: indexPath),let footerAttrs = layoutAttributesForSupplementaryView(ofKind: UICollectionView.elementKindSectionFooter, at: indexPath) {
frame = headerAttrs.frame.union(footerAttrs.frame)
}
attrs.frame = CGRect(x: sectionInset.left-16, y: frame.minY+16, width: max(frame.width-sectionInset.left-sectionInset.right+32 , 0), height: max(frame.height-16, 0));
/// 装饰视图置于最底部
attrs.zIndex = -100;
return attrs
}
}
/// 装饰视图对象
class XCIntegralDecoretionView: UICollectionReusableView {
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() {
/// 设置圆角和背景色白色
layer.cornerRadius = 12
layer.masksToBounds = true
backgroundColor = .white
}
}
7、实现headerView和footerView
分别创建MyHeaderView和MyFooterView继承自UICollectionReusableView。MyFooterView我们暂不做任何修改，而在MyHeaderView中，我们添加了一个UILabel，用以显示当前是几个section：
image.png
回到ViewController,collectionView中注册对应的headerView和footerView：
image.png
在ViewController的最后添加以下代码，实现UICollectionViewDelegateFlowLayout协议的方法：
extension ViewController:UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSizeMake(view.bounds.size.width-40,50)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
return CGSizeMake(view.bounds.size.width-40, 4)
}
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
if kind == UICollectionView.elementKindSectionHeader {
let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "MyHeaderView", for: indexPath) as! MyHeaderView
header.label.text = "第\(indexPath.section + 1)组"
return header
}else {
let footer = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "MyFooterView", for: indexPath) as! MyFooterView
return footer
}
}
}
7、运行查看效果
WechatIMG150.jpg
完整代码下载
可以试试自己动手实现加载更多的效果～
