AlignedCollectionViewFlowLayout

一个可以控制单元格水平垂直排列方式的 collection view 布局。您可以将其配置为像文本中的左对齐或右对齐文本一样对齐单元格，并且可以指定单元格在它们所在的行内的垂直排列方式。

除此之外，该布局的行为与前苹果的 UICollectionViewFlowLayout 完全相同。（它是一个子类。）

ℹ️重要

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

可用的对齐选项

您可以使用 任意 组合的水平或垂直对齐方式来实现所需的布局。

水平对齐

• horizontalAlignment = .left

• horizontalAlignment = .right

• horizontalAlignment = .justified

垂直对齐

• verticalAlignment = .top

• verticalAlignment = .center

• verticalAlignment = .bottom

安装

手动安装

只需将文件 AlignedCollectionViewFlowLayout.swift 添加到您的 Xcode 项目中即可。

示例

要运行示例项目，请克隆仓库，并首先从 Example 目录中运行 pod install。

使用

在 Interface Builder 中设置

1. 您在 Interface Builder 中有一个 collection view，并且已正确设置其数据源。运行应用程序并确保一切如预期工作（除了单元格对齐之外）。

2. 在文档轮廓中，选择 collection view 布局对象。

   

3. 在身份检查器中，将布局对象的自定义类设置为 AlignedCollectionViewFlowLayout。

   

4. 在视图控制器的 viewDidLoad() 方法中添加并自定义以下代码

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

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

   💡 专业提示：与上面的示例不同，您也可以从 collection view 布局对象中拖动一个输出口到您的视图控制器。

在代码中设置

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

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

2. 或者创建一个新的集合视图对象，并使用alignedFlowLayout进行初始化。

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

   或者将alignedFlowLayout赋值给现有集合视图的collectionViewLayout属性。

    yourExistingCollectionView.collectionViewLayout = alignedFlowLayout
   

3. 实现您的集合视图数据源。

4. 运行应用。

其他配置

对于左对齐和右对齐，AlignedCollectionViewFlowLayout将单元格水平分布，具有相等间隔的常数间隔，该间隔适用于所有行。您可以使用minimumInteritemSpacing属性来控制间隔。

alignedFlowLayout.minimumInteritemSpacing = 10

尽管其名称（源于其超类UICollectionViewFlowLayout），但此属性并不描述最小间隔，而是描述单元格之间的精确间隔。

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

alignedFlowLayout.minimumLineSpacing = 10

享受吧！😎

作者

Mischa Hildebrand，[email protected]

许可证

的MIT许可。详见LICENSE文件获取更多信息。