构建像Lego这样的应用程序—教程11

动态尺寸

1.简介

在教程10中，我们完成了“新闻”单元格中的属性。 当我们在运行时查看单元格时，详细信息文本和图像都被截断并且没有显示其全部内容。

在本教程11中，我们将采用一些机制来允许内容增长，并使单元自动设置其大小。

2.默认像元高度

创建NewsTableViewCell布局时，我们在顶部和底部边距处都包含了约束。 这使单元可以确定显示所有内容所需的高度（即“内部内容大小”）。 如果文本或图像变大，则单元格知道它需要更高的高度。

默认情况下，表格视图将自动确定其单元格的高度以适合其内容。

👉选择“新闻”场景中的两个单元格。 一种方法是单击一个单元格，然后在单击另一个单元格的同时按住shift键。 选择大小检查器（标尺图标）。

Size在“大小”检查器中的“ Row Height标签旁边，关闭“ Custom复选框。

Row Height字段将更改为Default 。 画布中的单元格缩小到44点高。 您将不再看到内容。

👉运行应用程序。

在运行时，表格视图动态设置单元格的高度以匹配内容。 但是，在设计时，仅看到单元格高44点并不能为我们提供有用的预览。

这是一个难题。 如果我们使用自定义高度，则设计时间单元格是有用的高度，但是它们不会在运行时进行调整。 如果使用默认高度，则在设计时压缩单元格内容，但在运行时动态调整。 幸运的是，我们可以选择将单元格的高度设置为Interface Builder中看起来不错的值（即在设计时），并修改视图控制器以动态设置每个单元格的高度以适合其运行时的内容。

3.查看控制器单元的高度

如前所述，每个场景都有一个“视图控制器”，其中包含运行它的代码。 顾名思义，视图控制器在运行时控制场景内的所有视图（包括单元格的高度）。 我们需要视图控制器中的代码来动态调整像元高度。 幸运的是，这些代码已经在BFWControl框架中为我们编写了。

首先，让我们将Interface Builder中的单元格恢复为有用的预览高度。

👉切换回Xcode。 在仍选中两个单元格的情况下，在“大小”检查器中，将“ Row Height输入为220 。

我们可以输入我们喜欢的任何行高，以便合理地预览情节提要中的单元格。 我们也可以像以前一样通过拖动单元格的底部手柄来调整它们的高度。

其次，我们将告诉视图控制器在运行时设置每个单元格的高度，以匹配其内容的固有高度。 我们只需要将News视图控制器更改为AdjustingTableViewController并打开其intrinsicHeightCells属性即可。

clicking通过单击标题栏中的黄色图标来选择表视图控制器。 在右侧面板中选择“身份检查器”。

👉在Identity Inspector中的“ Class字段中，键入Adj然后从弹出菜单中选择AdjustingTableViewController 。 点击Return或Tab （在键盘上）。 Xcode应该以BFWControls自动输入Module ，因为它BFWControls该类所在的位置。

👉切换到“属性”检查器。 您会注意到标题为Adjusting Table View Controller的新部分。 单击“ Intrinsic Height Cells旁边的弹出菜单，然后将其从“ Default更改为“ On 。

👉运行应用程序。

you如您所见，视图控制器已动态调整每个单元格的高度以适合其内容。 这与我们将每个单元格的Row Height为Default时的结果相同。 但是，现在我们将“ Row Height设置为220并在运行时将其覆盖以调整为每个单元格的固有高度。

4.标签中的行数

each当前每个单元格中的文本仅占用一行。 如省略号（ … ）所示，每个单元格中的明细文本显然需要更多空间来适合其所有文本。 让我们更改文本标签以占据多行。

如您所知，“新闻”场景中的每个单元格都是NewsTableViewCell类的一个实例。 文本标签在该类的内部，布局由NewsTableViewCell.xib 。 每个标签都有一个numberOfLines属性，该属性在Lines仅显示在Attributes Inspector中。 默认值为1 。 我们可以将其更改为2或该标签所需的最大行数。 为了使它的行数不受限制，我们输入0 （零）。

👉在项目浏览器中选择NewsTableViewCell.xib文件。 在[Detail Text]标签（底部标签）上单击一次，然后选择Attributes Inspector。 在“ Lines字段中，将1更改为0 （零），然后单击Return 。

👉切换回Main.storyboard 。 您应该看到标签现在显示更多的文本行。 如果不是，请在“ Editor菜单中选择“ Refresh All Views 。

👁由于Interface Builder中的单元格（即在设计时）具有固定的高度，因此Xcode降低了图像视图的可见高度，从而为更多文本腾出了空间。

👉如果愿意，您可以在Interface Builder中调整单元格的高度，因为运行时高度现在由视图控制器独立控制。

👉运行应用程序。

👁请注意，在iPhone XR模拟器上，每个详细文本标签所需的行数不同，并且视图控制器会自动独立地调整单元格的大小。

5.文字样式

到目前为止，我们的文本标签都使用了默认字体样式。 让我们在标签之间添加一些区别。

👉切换回Xcode。 选择NewsTableViewCell.xib文件。 选择[Text]标签。 选择属性检查器。

👉在“属性”检查器中，单击“ Font字段中的T图标。 在弹出框的“ Font字段中，从“ Text Styles部分中选择“ Headline Text Styles 。

👉将行数设置为2 。 根据需要，这将使标题占据一两行。

👉选择[Tertiary Text]标签，然后选择Caption 1文字样式。

👉仍然选择[Tertiary Text]标签，在Attributes Inspector中将Color弹出菜单更改为Light Gray Color 。

👉运行应用程序。

you如您所见， NewsTableViewCell每个实例都采用了新的文本样式。 标签，堆栈视图和单元格的高度已进行调整，以适应每个略有不同的大小内容。

6.提交更改

如您之前所做的：

1. from从“ Source Control菜单中选择“ Commit Changes ”。
2. 👉输入描述，例如： News: auto adjusting cell heights; text styles News: auto adjusting cell heights; text styles
3. 👉单击Commit按钮。

7.回顾

现在，我们的“新闻”单元格具有文本样式，各种字体大小以及自动调整单元格高度的功能。

⁉️如果您有任何疑问或意见，请在下面添加回复。

在教程12中，我们将重用您到目前为止所学的知识，为Products场景创建自定义自动调整单元。