文章按照顺序写的，之前文章写过的很多逻辑都会略过，建议顺序阅读，并下载源码结合阅读。
目录
UICollectionView 01 - 基础布局篇
UICollectionView 02 - 布局和代理篇
UICollectionView 03 - 自定义布局原理篇
UICollectionView 04 - 卡片布局
UICollectionView 05 - 可伸缩Header
UICollectionView 06 - 瀑布流布局
UICollectionView 07 - 标签布局
上一篇 写了 UICollectionView 最基础的用法（这篇会直接使用上一篇的变量，建议先阅读上一篇或者下载代码结合代码阅读） - 一个分组的网格布局， 这篇接上一篇来还是用系统的 UICollectionViewFlowLayout 来实现更多的特性。
如果一个页面只能有一种布局，一种网格那这个控件就略显单调，同UITableView ， CollectionView 也支持多类型的布局，不同的section可以使用不同的size ， 甚至不同的row也可以不同的size。这里演示下不同section使用不同size 。 上一篇中我们直接使用flowLayout 设置的是整个 collectionView 的单元格大小，如果要动态设置 则需要实现delegate 。UICollectionViewDelegate 中包含了cell的didSelectItemAt 、 willDisplay 等和 UITableView 类似的代理方法，如果需要动态设定layout的size之类的需要实现 UICollectionViewDelegateFlowLayout 代理。它集成自 UICollectionViewDelegate 并补充了一些布局方面的代理。
在 viewDidLoad 中去掉flowLayout相关的布局代码 ， 加上代理。大概是这样
collectionView.dataSource = self
collectionView.delegate = self
collectionView.register(UINib(nibName: "BasicsHeaderView", bundle: nil), forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: BasicsHeaderView.reuseID)
collectionView.register(UINib(nibName: "BasicsFooterView", bundle: nil), forSupplementaryViewOfKind: UICollectionView.elementKindSectionFooter, withReuseIdentifier: BasicsFooterView.reuseID)
colors.append(DataManager.shared.generalColors(5))
colors.append(DataManager.shared.generalColors(3))
colors.append(DataManager.shared.generalColors(4))
增加代理方法
extension BasicsViewController02: UICollectionViewDelegateFlowLayout {
// 设置itemsize
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
if indexPath.section == 0 {
let itemWidth = (view.bounds.width - 4)/3
return CGSize(width: itemWidth, height: itemWidth)
}else if indexPath.section == 1 {
return CGSize(width: view.bounds.width, height: 50)
}else {
let itemWidth = (view.bounds.width - 15)/2
return CGSize(width: itemWidth, height: itemWidth)
}
}
// 设置sectionInset
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
if section == 0{
return UIEdgeInsets(top: 0, left: 1, bottom: 0, right: 1)
}else if section == 1{
return .zero
}else{
return UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
}
}
// 设置 minimumLineSpacing
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
if section == 0{
return 1
}else if section == 1{
return 2
}else{
return 5
}
}
// 设置 minimumInteritemSpacing
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
if section == 0{
return 1
}else if section == 1{
return 2
}else{
return 5
}
}
// 设置header size
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
let width = view.bounds.width
if section == 0{
return CGSize(width: width, height: 30)
}else if section == 1{
return CGSize(width: width, height: 50)
}else{
return CGSize(width: width, height: 70)
}
}
// 设置footer size
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
let width = view.bounds.width
return CGSize(width: width, height: 20)
}
}
看起来代码比较长，但都是一些基础代码。把上篇写的一些布局设置，分section修改了一下。这样就实现了对不同section，使用不同的布局， 看下效果。
还有一些其他的代理和 UITableView 非常类似，比如说点击事件等，这里不再描述可以看一些有意思的东西。
比如我们想实现一些简单的点击动画，我点击了cell希望得到反馈，我们可以对其做一些放射变换。这几个代理方法可以很轻松的实现。
// 设置footer size
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
let width = view.bounds.width
return CGSize(width: width, height: 20)
}
func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
guard let cell = collectionView.cellForItem(at: indexPath) else {
return
}
UIView.animate(withDuration: 0.1) {
cell.transform = CGAffineTransform.identity.scaledBy(x: 0.8, y: 0.8)
}
}
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
guard let cell = collectionView.cellForItem(at: indexPath) else {
return
}
UIView.animate(withDuration: 0.1) {
cell.transform = CGAffineTransform.identity
}
}
看下效果：
从iOS 9 之后，在UICollectionView 中实现长按拖动排序变得非常的简单，系统提供的便利的API。
首先在viewDidLoad最后添加一个长按手势。
let longGesture = UILongPressGestureRecognizer(target: self, action: #selector(longPressed(_:)))
collectionView.addGestureRecognizer(longGesture)
以及他的实现
@objc
func longPressed(_ gesture: UILongPressGestureRecognizer) {
let position = gesture.location(in: collectionView)
switch gesture.state {
case .began:
if let indexPath = collectionView.indexPathForItem(at: position) {
collectionView.beginInteractiveMovementForItem(at: indexPath)
}
case .changed:
collectionView.updateInteractiveMovementTargetPosition(position)
case .ended:
collectionView.endInteractiveMovement()
default:
collectionView.cancelInteractiveMovement()
}
}
基本都是在调用系统给我们写好的api，然后再实现两个代理方法
func collectionView(_ collectionView: UICollectionView, canMoveItemAt indexPath: IndexPath) -> Bool {
return true
}
func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
// 修改数据源
let removedColor = self.colors[sourceIndexPath.section][sourceIndexPath.row]
self.colors[sourceIndexPath.section].remove(at: sourceIndexPath.row)
self.colors[destinationIndexPath.section].insert(removedColor, at: destinationIndexPath.row)
}
ok了，你已经实现了一个长按拖动排序的功能，这在之前是非常困难的一件事我们需要长按隐藏cell对cell进行截图，然后移动的时候动态监测移动的位置，动态移动很多cell。那个逻辑想都不想想。 先来看下效果。 这里gif是在模拟器上录制的，感觉卡卡的，但是在真机上一点都不卡 ， 而且每次移动到一个cell上会有一点笑震动的触感。
还有长按弹出菜单。是实现shouldShowMenuForItemAt 、 canPerformAction 、 performAction 这几个代理。也非常简单，这个不再赘述。
系统的UICollectionViewFlowLayout 就写这么多吧，后面把中心放到自定义布局上。这才是UICollectionView 强大之处。
