UICollectionView具有在iOS 9和10中使用自动布局自动调整单元格大小的功能

警告!!! :使用基本SDK> = iOS 12进行构建时不起作用

在开发iOS应用时。 您通常会遇到一个使用垂直卡片设计的应用程序,如下面的屏幕截图所示。

如果您熟悉iOS Apps开发。 您将知道有2种选择。 使用UITableView或UICollectionView。 在本教程中,我将使用UICollectionView,因为它比UITableView具有更高的可伸缩性,并且您可以在iPad中采用多列。

在WWDC 2016视频会议219:iOS 10中UICollectionView的新增功能。苹果表示,从下面的屏幕快照中收集视图单元格大小有3种方法

在本教程中,我们将使用方法1 自动布局 。 开始吧

首先设置您的视图控制器和UICollectionView。 将您的UICollectionView出口命名为viewController的4面的“ collectionView”引脚约束

由于我们将不会在情节提要中使用集合视图单元格(我们将使用nib代替),因此我们将集合视图中的项目数设置为0,并确保“布局”为“流”,因为我们将使用集合视图流布局来制作单元格自动调整大小。

接下来,创建一个用于收集视图单元格的类及其xib。 在本教程中,我们将其命名为Cell.swift和Cell.xib

别忘了将nib注册为viewDidLoad中的单元。 我们还将UICollectionViewFlowLayout的EstimateItemSize设置为(1,1),因为当设置了估算项的大小时,flowLayout将通过自动布局使用自动调整大小(这是常见的陷阱)。

现在是时候在Cell.xib中设计单元格了,如果您将单元格大小设置为想要的最大宽度(对于5.5英寸的屏幕,> 414则是安全的),如果将宽度设置得太小,应用程序将在运行时崩溃(例如。您将宽度设置为350,它将在5.5英寸的屏幕上崩溃),并为其增加一些高度(请注意,此尺寸仅用于设计时)

将UIView用作容器,以便所有视图将单元格的第4针固定到单元格。

接下来,我们如下设计单元。 确保最底部的视图和最右侧的销钉固定到容器视图。 这是单元自动调整大小所必需的。

然后我们制作单元类的出口

容器视图宽度创建约束,并为单元格类创建出口

然后设置内容视图宽度约束,以使其与您在情节提要中设置的从笔尖减去集合视图插图中唤醒时的屏幕尺寸匹配。 我们还设置了self.contentView.translatesAutoresizingMaskIntoConstraints = false,以防止Xcode为不需要的单元格的宽度和高度生成自动布局约束。

现在,我们应该像往常一样通过将数据源添加到集合视图中进行测试并运行

示例项目在这里:https://github.com/tttsunny/CollectionViewAutoSizingTest