使用UICollectionView构建自适应的自适应iOS应用

UICollectionView是一个UIKit视图,用于管理已订购商品的集合,并使用可自定义的布局显示商品。 它是由Apple在WWDC 2012中随iOS 6 SDK发行而引入的。 UICollectionView接口与旧的UITableView非常相似,因为它提供DataSource作为显示数据的源,并提供Delegate处理每个项目的交互。

UITableViewUITableViewCell内部使用固定列表布局显示每一行不同, UICollectionView通过子类化UICollectionViewLayout为开发人员提供了灵活性和可自定义性以提供自己的布局,它还支持自定义装饰视图,每个单独的横断面图和单元格的可自定义大小。 Apple本身提供了一种UICollectionViewFlowLayout布局,称为UICollectionViewFlowLayout

UICollectionViewFlowLayout是使用网格系统显示项目的布局,并支持页眉和页脚。 它还提供了2个垂直和水平滚动方向。

在垂直方向上,项目的宽度受集合视图的宽度限制,因此在每一行中,它会尝试在下降到下一行之前在集合视图宽度的范围内填充尽可能多的项目,因此用户可以垂直滚动内容。

在水平方向上,内容的高度受集合视图的高度限制,因此在每一列中,在向右移动到下一列之前,将尽可能多地添加项目,以便用户可以水平滚动。 如果要使用集合视图构建圆盘传送带,则水平滚动方向非常适合。

我们将建立什么

在本文中,我们将使用UICollectionViewFlowLayout构建一个自适应的电影列表应用程序,以适应从小型iPhone 5到最大iPad Pro的各种UICollectionViewFlowLayout 。 用户将具有使用列表,小网格和大网格布局显示电影的选项。 以下是我们将要执行的任务:

  1. 启动项目。
  2. 建立模型。
  3. 构建MainListViewController
  4. 构建列表布局。
  5. 构建网格布局。

开始项目

要开始项目,您可以在下面的GitHub存储库中下载入门项目。

alfianlosari /响应式iOS收集视图启动器
带有Collection View的自适应和自适应iOS App的入门项目… github.com

入门项目包含多个资产,用于列表的集合视图单元格以及我们将用于集合视图的网格项目布局。

建立模型

让我们创建代表电影的模型。 创建一个新文件,并将其命名为Movie.swift 。 复制下面的声明以创建具有所有属性的Movie结构。

我们还需要确保更新MovieLayoutListCollectionViewCell ,在这里我们创建一个方法setup(movie:)以便在通过电影时可以设置标签和图像视图。

建立网格布局

让我们构建网格布局,在此布局中,每个单元格将仅在每个单元格内显示电影的海报图像。 窥视入门项目提供的MovieLayoutGridCollectionViewCell ,以查看布局。

确保更新MovieLayoutGridCollectionViewCell ,在这里我们创建一个方法setup(movie:)以便在通过电影时可以设置图像视图。

结论

最后,恭喜!我们已经成功使用Collection View构建了自适应的自适应iOS应用程序! 借助Cocoa Touch Trait类以及UIKIt类(如UICollectionViewUIStackView构建自适应和响应式iOS应用并不难。 它还为我们提供了优势,因此我们可以仅将一个代码库用于iPhone和iPad,以实现更好的可维护性。 继续进行终身学习和“快乐跳跃”😋。

您可以在下面克隆完整的项目源代码GitHub Repository:

alfianlosari / ReponsiveCollectionView
具有动态列表和网格支持的响应式和自适应集合视图– alfianlosari / ReponsiveCollectionView github.com