理解 UICollection Flow Layout 流式布局

2017-03-10 本文已影响577人张嘉夫

UICollectionView 因为流式布局（flow layout）而成了为一个非常强大的 UI 组件，流式布局是一种动态网格，提供了 table view 所不具备的功能。

flow layout 实际上是 layout 的子类。（普通的）layout 要更强大一点，因为你可以任意布局单元格！环形布局？没问题！

但在本文中，我们只讨论垂直的流式布局。

有两种实现方式：

自定义 flow layout 对象（简单方法）
实现 delegate（高级方法）

单元格是如何被布局的

在讨论如何实现上面的方法之前，先搞懂单元格是如何被布局的。

用垂直的流式布局作为例子（水平的很相似）。

一行中最高的单元格决定了行高
一行中所有单元格都是垂直居中对齐的
Minimum spacing 是单元格之间的最小距离，但实际上的间距由 collection view 的宽度决定
流式布局对象会用最小间距添加单元格，直到加不下了为止，然后增加实际间距，以使它们间隔均匀
每个 section 都有自己的行/单元格间距
在一个 section 中，行/单元格间距是固定的；同一个 section 中不能有两种行/单元格间距
每个 section 有自己的 inset

1. 简单方法

如果单元格具有固定的大小，只要使用 layout 对象即可——[UICollectionViewFlowLayout](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionViewFlowLayout_class/index.html#//apple_ref/occ/instp/UICollectionViewFlowLayout/)

这是单元格为 100x100 的例子，相隔至少 8pt，section inset 也为 8pt。

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    let layout = UICollectionViewFlowLayout()
    layout.itemSize = CGSize(width: 100, height: 100)
    layout.minimumInteritemSpacing = 8
    layout.minimumLineSpacing = 8
    layout.headerReferenceSize = CGSize(width: 0, height: 40)
    layout.sectionInset = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
    collectionView.collectionViewLayout = layout
}

如果单元格很简单，布局就这么简单。

2. 高级方法

如果单元格有不同的尺寸，就需要用高级方法了，要实现 [UICollectionViewDelegateFlowLayout](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UICollectionViewDelegateFlowLayout_protocol/#//apple_ref/occ/intfm/UICollectionViewDelegateFlowLayout/)。

使用了相同的 UICollectionViewFlowLayout 对象，但会实现它的代理方法以定制更高级的功能。

举个例子，如果每个单元格尺寸不同，会实现如下方法：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
      // 返回单元格尺寸
  }

对于最小行间距、单元格间距等等都有对应的代理方法。

这些都是可选的，如果不实现它们，就会直接使用流式布局对象的属性。

附加：如何让单元格有固定的间距？

一个常见问题是要让单元格有固定的间距。

然而，只能设置 minimumInteritemSpacing，实际单元格间距由 collection view 的宽度决定。

UICollectionViewFlowLayout 会在应用 section inset 后排列中间的单元格，每个单元格之间的间距都相同。

如果想要固定的间距，这么做可以实现，通过修改 section 的左右 inset：

private let minItemSpacing: CGFloat = 8
private let itemWidth: CGFloat      = 100
private let headerHeight: CGFloat   = 32

override func viewDidLayoutSubviews() {
      super.viewDidLayoutSubviews()

      // 创建自定义流式布局，将单元格均匀分布，并将它们放在中间
      let layout = UICollectionViewFlowLayout()
    layout.itemSize = CGSize(width: itemWidth, height: itemWidth)
    layout.minimumInteritemSpacing = minItemSpacing
    layout.minimumLineSpacing = minItemSpacing
    layout.headerReferenceSize = CGSize(width: 0, height: headerHeight)

      // 求 n，n 是 collection view 可以容纳的单元格数量
      var n: CGFloat = 1
    let containerWidth = collectionView.bounds.width
    while true {
        let nextN = n + 1
        let totalWidth = (nextN*itemWidth) + (nextN-1)*minItemSpacing
        if totalWidth > containerWidth {
            break
        } else {
            n = nextN
        }
    }

      // 计算 section 的左右 inset
      // 设置 section 的 inset 会影响单元格，以将它们水平居中对齐
      let inset = max(minItemSpacing, floor( (containerWidth - (n*itemWidth) - (n-1)*minItemSpacing) / 2 ) )
    layout.sectionInset = UIEdgeInsets(top: minItemSpacing, left: inset, bottom: minItemSpacing, right: inset)

    collectionView.collectionViewLayout = layout
}

附加：自定义布局

流式布局是开箱即用的。易于使用，对于大多数 UI 都足够了。

但也可以创建自己的自定义布局。

布局类的核心方法是 layoutAttributesForElementsInRect:。可以读一下来自 objc.io 的教程，写的很好。这是更高级别的主题。

注意：通常我们会使用 autolayout 约束，但对于单元格（cell），需要用传统的方式设置 frame。只有 cell 要这么做。单元格里面的视图仍然可以使用自动布局。