iOS UICollectionView记录
UICollectionView 在项目中是出现很高频的一个空间，它能灵活的展示各类布局。平时，咱们经常使用的水平、垂直及网格的效果基本上均可以使用系统提供的给咱们的 Layout 进行完成，最近恰好作了一个自定义布局的需求，这里将过程稍做记录，后面也说起了一些 DragAndDrop 的简单使用。git
- 准备知识
- Basic Layout
- Custom Layout
- Drag And Drop
准备知识
UICollectionView 的核心概念有三点：github
- Layout(布局)
- Data Source(数据源)
- Delegate(代理)
UICollectionViewLayout
一个抽象基类,用于生成 UICollectionView 的布局信息，每个 cell 的布局信息由 UICollectionViewLayoutAttributes 进行管理。缓存
系统为咱们提供了一个流式布局的类——UICollectionViewFlowLayout，咱们能够利用这个定义咱们经常使用的布局。它能够定义布局方向、cell大小、间距等信息。bash
UICollectionViewDataSource
数据源协议，遵照协议的 delegate 为 UICollectionView 提供数据的各类信息：分组状况、Cell 的数量、每一个 Cell 的内容等。session
经常使用代理方法：app
// 分组信息
optional func numberOfSections(in collectionView: UICollectionView) -> Int
// 每一个分组中，cell 的数量
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
// 返回须要显示的 cell
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
// 返回 UICollectionView 的 Header 或 Footer
optional func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView
复制代码
UICollectionViewDelegate
UICollectionViewDelegate 为咱们提供了 cell 点击的事件以及一些视图的显示事件。dom
经常使用代理方法：ide
// cell 点击事件
optional func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)
// cell 视图即将显示
optional func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath)
复制代码
Basic Layout
- 准备工做，后面的几个示例中，数据源的代理方法也是以下实现：
extension LayoutViewController: UICollectionViewDelegate, UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 14
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCell", for: indexPath) as! ImageCell
let random = dataSource[indexPath.row]
cell.showImage.image = UIImage(named: "\(random)")
return cell
}
}
复制代码
- 设置 Basic Layout 的布局
let layout = UICollectionViewFlowLayout()
// 垂直滚动
layout.scrollDirection = .vertical
// cell 大小
layout.itemSize = CGSize(width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.width)
self.collectionView.collectionViewLayout = layout
复制代码
这是最基本的使用，就很少赘述了，基本的使用若是不了解能够去看看官方文档。布局
Custom Layout
系统提供给咱们的布局只是简单的流式布局，当咱们须要一些特殊的布局的时候，只能本身继承自 UICollectionViewLayout 来自定义 Layout。动画
自定义 Layout
class CustomCollectionViewLayout: UICollectionViewLayout {
private var itemWidth: CGFloat = 0 // cell 宽度
private var itemHeight: CGFloat = 0 // cell 高度
private var currentX: CGFloat = 0 // 当前 x 坐标
private var currentY: CGFloat = 0 // 当前 y 坐标
// 存储每一个 cell 的布局信息
private var attrubutesArray = [UICollectionViewLayoutAttributes]()
}
复制代码
布局相关准备工做
// 布局相关准备工做
// 为每一个 invalidateLayout 调用
// 缓存 UICollectionViewLayoutAttributes
// 计算 collectionViewContentSize
override func prepare() {
super.prepare()
guard let count = self.collectionView?.numberOfItems(inSection: 0) else { return }
// 获得每一个 item 的属性并存储
for i in 0..<count {
let indexPath = IndexPath(row: i, section: 0)
guard let attributes = self.layoutAttributesForItem(at: indexPath) else { break }
attrubutesArray.append(attributes)
}
}
复制代码
提供布局属性对象
// 提供布局对象
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
return attrubutesArray
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
// 获取宽度
let contentWidth = self.collectionView!.frame.size.width
// 经过 indexpath 建立一个 item 属性
let temp = UICollectionViewLayoutAttributes(forCellWith: indexPath)
// 计算 item 的宽高
let typeOne: (Int) -> () = { index in
self.itemWidth = contentWidth / 2
self.itemHeight = self.itemWidth
temp.frame = CGRect(x: self.currentX, y: self.currentY, width: self.itemWidth, height: self.itemHeight)
if index == 0 {
self.currentX += self.itemWidth
} else {
self.currentX += self.itemWidth
self.currentY += self.itemHeight
}
}
let typeTwo: (Int) -> () = { index in
if index == 2 {
self.itemWidth = (contentWidth * 2) / 3.0
self.itemHeight = (self.itemWidth * 2) / 3.0
temp.frame = CGRect(x: self.currentX, y: self.currentY, width: self.itemWidth, height: self.itemHeight)
self.currentX += self.itemWidth
} else {
self.itemWidth = contentWidth / 3.0
self.itemHeight = (self.itemWidth * 2) / 3.0
temp.frame = CGRect(x: self.currentX, y: self.currentY, width: self.itemWidth, height: self.itemHeight)
self.currentY += self.itemHeight
if index == 4 {
self.currentX = 0
}
}
}
let typeThree: (Int) -> () = { index in
if index == 7 {
self.itemWidth = (contentWidth * 2) / 3.0
self.itemHeight = (self.itemWidth * 2) / 3.0
temp.frame = CGRect(x: self.currentX, y: self.currentY, width: self.itemWidth, height: self.itemHeight)
self.currentX += self.itemWidth
self.currentY += self.itemHeight
} else {
self.itemWidth = contentWidth / 3.0
self.itemHeight = (self.itemWidth * 2) / 3.0
temp.frame = CGRect(x: self.currentX, y: self.currentY, width: self.itemWidth, height: self.itemHeight)
if index == 5 {
self.currentY += self.itemHeight
} else {
self.currentX += self.itemWidth
self.currentY -= self.itemHeight
}
}
}
// 这下面是我模拟的根据不一样的 indexPath 的信息来提供不一样的 cell 的显示类型。
// 实际项目中，一把根据利用 Block 或者 Delegate，在 controller 中根据 indexPath 的值进行计算
// 并根据计算结果肯定其具体的显示类型。
// Custom Layout 再根据显示类型进行计算显示位置。
let judgeNum = indexPath.row % 8
switch judgeNum {
case 0, 1:
typeOne(judgeNum)
case 2, 3, 4:
typeTwo(judgeNum)
case 5, 6, 7:
typeThree(judgeNum)
default:
break
}
// 当 currentX 到屏幕最右边时，换行到下一行显示。
if currentX >= contentWidth {
currentX = 0
}
return temp
}
复制代码
滚动范围
// 提供滚动范围
override var collectionViewContentSize: CGSize {
return CGSize(width: UIScreen.main.bounds.size.width, height: currentY + 20)
}
复制代码
边界更改
// 处理自定义布局中的边界修改
// 返回 true 使集合视图从新查询布局
override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
return true
}
复制代码
使用
let layout = CustomCollectionViewLayout()
self.collectionView.collectionViewLayout = layout
复制代码
Drag And Drop
以前为了在 UICollectionView 中拖动 cell 须要本身定义手势处理拖动，在 iOS11 增长了 UICollectionViewDragDelegate 及 UICollectionViewDropDelegate 两个协议方便咱们进行这个操做。
开启拖放手势，设置代理
// 开启拖放手势，设置代理。
self.collectionView.dragInteractionEnabled = true
self.collectionView.dragDelegate = self
self.collectionView.dropDelegate = self
复制代码
实现代理
UICollectionViewDragDelegate
UICollectionViewDragDelegate 只有一个必须实现的方法。
- 建立一个或多个 NSItemProvider ，使用 NSItemProvider 传递集合视图item内容。
- 将每一个 NSItemProvider 封装在对应 UIDragItem 对象中。
- 返回 dragItem。
extension LayoutViewController: UICollectionViewDragDelegate {
func collectionView(_ collectionView: UICollectionView, itemsForBeginning session: UIDragSession, at indexPath: IndexPath) -> [UIDragItem] {
let imageName = self.dataSource[indexPath.row]
let image = UIImage(named: imageName)!
let provider = NSItemProvider(object: image)
let dragItem = UIDragItem(itemProvider: provider)
return [dragItem]
}
}
复制代码
若是须要支持一次拖动多个，还须要实现下面这个方法，其实现步骤与上方大体相同。
func collectionView(_ collectionView: UICollectionView, itemsForAddingTo session: UIDragSession, at indexPath: IndexPath, point: CGPoint) -> [UIDragItem]
复制代码
若是拖动以后，想自定义拖动视图的样式，能够实现：
/*
自定义拖动过程当中 cell 外观。返回 nil 则以 cell 原样式呈现。
*/
func collectionView(_ collectionView: UICollectionView, dragPreviewParametersForItemAt indexPath: IndexPath) -> UIDragPreviewParameters? {
return nil
}
复制代码
UICollectionViewDropDelegate
实现上方的协议以后，我们在程序中已经能够实现拖动了，可是如今当放开时，cell 并不会按照咱们预想的到达对应的位置，此时，须要实现 UICollectionViewDropDelegate 协议，来处理拖动内容的接收。
extension LayoutViewController: UICollectionViewDropDelegate {
// 返回一个 UICollectionViewDropProposal 对象，告知 cell 该怎么送入新的位置。
func collectionView(_ collectionView: UICollectionView, dropSessionDidUpdate session: UIDropSession, withDestinationIndexPath destinationIndexPath: IndexPath?) -> UICollectionViewDropProposal {
if session.localDragSession != nil {
// 拖动手势源自同一app。
return UICollectionViewDropProposal(operation: .move, intent: .insertAtDestinationIndexPath)
} else {
// 拖动手势源自其它app。
return UICollectionViewDropProposal(operation: .copy, intent: .insertAtDestinationIndexPath)
}
}
/*
当手指离开屏幕时，UICollectionView 会调用。必须实现该方法以接收拖动的数据。
*/
func collectionView(_ collectionView: UICollectionView, performDropWith coordinator: UICollectionViewDropCoordinator) {
let destinationIndexPath = coordinator.destinationIndexPath ?? IndexPath(item: 0, section: 0)
switch coordinator.proposal.operation {
case .move:
let items = coordinator.items
if items.contains(where: { $0.sourceIndexPath != nil }) {
if items.count == 1, let item = items.first {
// 找到操做的数据
let temp = dataSource[item.sourceIndexPath!.row]
// 数据源将操做的数据在原位置删除，以及插入到新的位置。
dataSource.remove(at: item.sourceIndexPath!.row)
dataSource.insert(temp, at: destinationIndexPath.row)
// 将 collectionView 的多个操做合并为一个动画。
collectionView.performBatchUpdates({
collectionView.deleteItems(at: [item.sourceIndexPath!])
collectionView.insertItems(at: [destinationIndexPath])
})
coordinator.drop(item.dragItem, toItemAt: destinationIndexPath)
}
}
default:
return
}
}
}
复制代码
关于 Drag 和 Drap 还能够不少使用的协议咱们没有使用，这里只是实现了一个基本的效果，更多的实现方式仍是须要多研读研读官方的文档。