创建集合视图（Swift 3）

在此博客中，我将讨论如何实现简单的集合视图。 这简单！

集合视图是有序的布局显示，与表格视图相比，可以进行更多的自定义。 如果要以类似网格的方式显示多个图像，我希望在表视图上使用集合视图。 如果我只想显示一个简单的列表，则可以使用表格视图。

对于此博客，我将从iTunes RSS feed生成器中检索数据。 该应用程序将在iTunes中显示美国排名前10的有声读物。

步骤1：添加收藏夹视图

在Main.storyboard中 ，将集合视图拖到视图控制器上。 添加约束以使其与父视图的边缘对齐。

添加约束以使其与父视图的边缘对齐。

步骤2：将View Controller分配为Collection View的数据源。 请注意，我没有将View Controller分配为Collection View的委托，因为我只是在显示Collection View单元，并且不希望用户具有可突出显示与所显示的单元进行交互的任何功能。

步骤3：在ViewController.swift中 ，遵循UICollectionViewDataSource协议。

步骤4：在我们的ViewController.swift文件中创建一个集合视图的实例。

步骤5：创建一个CollectionViewCell.swift文件。

此CollectionViewCell.swift文件将具有用于UIImageView（用于书本图像）和UILabel（用于我们的书本标签）的出口。 在此类中，我们还将具有处理显示单元格内容的功能。

步骤6：在Main.storyboard中 ，选择集合视图单元，并将其类设置为“ CollectionViewCell”，然后将其设置为redirectIdentifier。

选中集合视图单元格后，在“ 属性”检查器中 ，将重用标识符标记为“ collectionViewCell”。

步骤7：将UIImageView和UILabel拖到集合视图单元格上。 根据需要约束它们。

步骤8：将UIImageView和UILabel连接到CollectionViewCell.swift文件中的相应属性。

步骤9：为有声读物创建数据模型。

创建一个名为Audiobook.swift的新文件，并标识此数据模型的属性。 请注意，我在“ coverImage”属性中将图像URL作为字符串输入。 Audiobook初始化程序将为每个Audiobook对象解析一个字典 。

步骤10：编写APIClient实现。

步骤11 ：（可选）创建DataStore管理器类（单例）以处理根据返回的API JSON数据创建Audiobook对象的过程。

如下所述，我导入UIKit（因为我将书图像作为UIImages存储在此文件中）。

您可以看到我有一个有声读物数组和一个UIImage数组来存储这些要在集合视图中显示的对象。 这不是我最喜欢的组织对象的方式，但现在可以了。

您还将注意到，我有两个功能： getBooks（completion 🙂和getBookImages（completion 🙂 。 我在getBookImages（completion :)中调用getBooks （completion :)。 请注意，在ViewController.swift的 viewDidLoad（）方法中调用了getBookImages（completion 🙂函数。

步骤12：在ViewController.swift中 ，调用DataStore的getBookImage（completion :)函数。

我在viewDidLoad（）中调用此函数来触发对API端点的调用，并检索书籍信息和图像。 请注意，我也在这里重新加载了集合视图，因此它将可以显示数据。

步骤13：最后，我们实现集合视图数据源方法。

两个必需的UICollectionViewDataSource方法是collectionView（_numberOfItemsInSection 🙂

和collectionView（_cellForItemAt 🙂 。

请注意，在第31行上，我引用了我们在集合视图单元格Attributes Inspector中键入的相同的redirectIdentifier 。

另外，请注意在第34行上，我在CollectionViewCell.swift中的displayContent（image：title 🙂方法上调用，该方法将显示内容。

步骤14：确定您的集合视图单元格大小和视图间距。

部分插图是每个部分中内容的边距（内容与屏幕边缘的距离）。 最小间距是集合视图中线之间的间距量。

您可以在这里看到成品：

这个项目的仓库可以在这里找到。

资源：

集合视图-Apple文档