AlignedCollectionViewFlowLayout

一个可以让你控制单元格水平和垂直对齐方式的 collection view 布局。你可以使用它像左对齐或右对齐文本一样对齐单元格，并且可以指定单元格在其行内的垂直对齐方式。

除此之外，此布局的行为与 Apple 的 UICollectionViewFlowLayout 完全一样。(它是一个子类。)

AlignedCollectionViewFlowLayout 的开发初衷是用于“标签视图”，即显示有限数量的项目且布局相对简单的 collection view。它在这种使用场景下表现完美。 虽然它也能处理大量的项目和更复杂的单元格布局，但这种情况下滚动可能会变得卡顿。 这是由于布局需要递归地从其父类获取布局属性，这是无法避免的。 如果你遇到无法接受的卡顿，请考虑其他替代方案。

你可以使用水平和垂直对齐的任何组合来实现你想要的布局。

• horizontalAlignment = .left

• horizontalAlignment = .right

• horizontalAlignment = .justified

• horizontalAlignment = .leading

  根据用户的布局方向 (UIApplication.shared.userInterfaceLayoutDirection)，渲染为 .left 或 .right。

  • .leftToRight → .left
  • .rightToLeft → .right

• horizontalAlignment = .trailing

  根据用户的布局方向 (UIApplication.shared.userInterfaceLayoutDirection)，渲染为 .left 或 .right。

  • .leftToRight → .right
  • .rightToLeft → .left

• verticalAlignment = .top

• verticalAlignment = .center

• verticalAlignment = .bottom

AlignedCollectionViewFlowLayout 可以通过 CocoaPods 获取。 要安装它，只需将以下行添加到你的 Podfile 中

pod "AlignedCollectionViewFlowLayout"

只需将文件 AlignedCollectionViewFlowLayout.swift 添加到你的 Xcode 项目，你就可以开始了。

要运行示例项目，克隆 repo，然后首先从 Example 目录运行 pod install。

1. 你在 Interface Builder 中有一个 collection view 并且正确设置了它的数据源。 运行该应用程序并确保一切按预期工作（除了单元格对齐）。

2. 在 Document Outline 中，选择 collection view 布局对象。

   

3. 在 Identity Inspector 中，将布局对象的自定义类设置为 AlignedCollectionViewFlowLayout。

   

4. 将以下代码添加到你的视图控制器的 viewDidLoad() 方法并进行自定义

   let alignedFlowLayout = collectionView?.collectionViewLayout as? AlignedCollectionViewFlowLayout
   alignedFlowLayout?.horizontalAlignment = .left
   alignedFlowLayout?.verticalAlignment = .top

   如果你省略了最后两行中的任何一行，则将使用默认对齐方式（水平对齐，垂直居中）。

   💡 提示： 除了如上所示类型转换布局之外，你还可以将从 collection view 布局对象拖动一个 outlet 到你的视图控制器。

1. 创建一个新的 AlignedCollectionViewFlowLayout 对象并指定你想要的对齐方式

   let alignedFlowLayout = AlignedCollectionViewFlowLayout(horizontalAlignment: .left, verticalAlignment: .top)

2. 创建一个新的 collection view 对象并使用 alignedFlowLayout 初始化它

   let collectionView = UICollectionView(frame: bounds, collectionViewLayout: alignedFlowLayout)

   或者 将 alignedFlowLayout 分配给现有 collection view 的 collectionViewLayout 属性

   yourExistingCollectionView.collectionViewLayout = alignedFlowLayout

3. 实现你的 collection view 的数据源。

4. 运行该应用程序。

对于 left 和 right 对齐，AlignedCollectionViewFlowLayout 使用恒定间距水平分布单元格，该间距对于所有行都是相同的。 你可以使用 minimumInteritemSpacing 属性控制间距。

alignedFlowLayout.minimumInteritemSpacing = 10

尽管它的名称（源自其父类 UICollectionViewFlowLayout），但此属性不是描述最小间距，而是描述单元格之间的确切间距。

行之间的垂直间距与 UICollectionViewFlowLayout 中的工作方式完全相同

alignedFlowLayout.minimumLineSpacing = 10

Mischa Hildebrand, web@mischa-hildebrand.de

AlignedCollectionViewFlowLayout 在 MIT 许可证下可用。 有关更多信息，请参见 LICENSE 文件。