像乐高一样构建应用程序 - 教程9

像Lego一样构建应用程序---教程9

Tom Brodhurst-Hill 封锁UnblockFollow继1月29日

故事板中的Xib布局

1.简介

在本教程9中，我们将在故事板中使用自定义 NewsTableViewCell xib布局（我们在 教程7 中创建）。这是一个简单的过程，使用BFWControls.framework（我们在 教程8中 添加）。在此过程中，我们还将学习类和子类，如何更改超类和连接插座。

2.克隆项目

如果您继续学习上一个 教程8 ，那么您拥有所需的一切。 跳到第3步。

如果您想从本教程开始，可以按照以下步骤下载项目：

:point_right:启动终端应用程序（从"应用程序"文件夹）。

:point_right:在终端中，键入： cd ~/Documents ，然后单击 Return 。

:point_right:将以下内容粘贴到终端并点击 Return ：

git clone --recurse-submodules --branch Start-Tutorial-9 https://bitbucket.org/barefeetware/lego-tutorial-social.git`

:point_right:观察终端中的下载进度并等待它完成。

:point_right:在Documents文件夹中，打开 lego-tutorial-social 文件夹。

:point_right:打开 Social.xcode.proj 文件。

本教程假定您知道如何执行本系列中已涵盖的任务。如果您不确定，请回顾 前面教程中 更详细的步骤。

3.类和子类

:point_right:在Xcode中，选择 Main.storyboard 并滚动以显示包含新闻项列表的新闻场景。通过单击一次选择第一个单元格。在右侧的"检查器"面板中，单击第三个图标（看起来像ID卡）。它显示了 Identity Inspector 。

的 Identity Inspector 表明， Class 所选择的单元的是 UITableViewCell 。

到目前为止，我们添加到应用程序中的每个视觉对象都是某种类型的"视图"。图像视图持有图像。标签包含文本。堆栈视图包含其他视图。这些都有特别的名字。因为它们是由内置的"UIKit"框架提供的，所以它们被称为 UIView ， UIImageView ， UILabel ， UIStackView ， UITableView ， UITableViewCell 等。还有更多类型的视图，例如 UISwitch ， UISlider ， UISegmentedControl 和 UIActivityIndicatorView ，我们还没有使用它们。

我们可以将 UIView 视为所有更具体视图的分类或"类"。在编程术语中， UIView 是"超类"。所有其他的（ UILabel ， UIImageView 等）都是 UIView "子类"。

在Swift（我们用于iOS开发的编程语言）中命名子类时，我们通常会复制超类的后缀。这就是为什么 UIImageView 和 UIStackView 有来自 UIView 的后缀 View 的原因。有一些例外，例如 UILabel （即使它也是 UIView 的子类，也未命名为 UILabelView ）。

在 Tutorial 7中， 我们构建了自己的 UITableViewCell 子类，我们称之为 NewsTableViewCell 。

:point_right:在 Class 字段的 Identity Inspector ，开始键入 News （包括大写 N ）。 Xcode应该以 UITableViewCell 的唯一子类自动完成，该子类以 News 开头，即 NewsTableViewCell 。

:point_right:命中 Return （在键盘上）。

我们刚刚将通用 UITableViewCell 的单元类更改为我们自己的自定义子类。

4.使用其Xib的类

这一切都很好，但似乎没有任何改变。在 教程7中 ，当我们创建 NewsTableViewCell 类时，我们还创建了一个包含我们想要的布局的xib文件。在我们将其类更改为 NewsTableViewCell 之后，我们可能期望布局现在出现在新闻场景中的此单元格中。但是，这没有发生。为什么不？

事实证明，尽管Xcode还提供了 Also create XIB file （当我们在 教程7中 创建了 NewsTableViewCell 子类时），它实际上并没有使用该xib文件的布局。我们需要一些代码才能做到这一点。幸运的是，这是BFWControls.framework（我们在 教程8中 添加的）之一，对我们有用。

BFWControls包含一个名为 NibTableViewCell 的 UITableViewCell 子类，它负责使用xib布局。要使我们的自定义单元类使用也具有该功能，我们只需要将其更改为 NibTableViewCell 的子类。我们在该类的代码中执行此操作。别担心 - 这很简单。

5.编辑代码

:point_right:在Project Navigator中，选择 NewsTableViewCell.swift 。正如您可能猜到的，这是包含此类的"Swift"代码的文件。

首先，我们将摆脱我们不需要的占位符代码，目前实际上并没有做任何事情。

:point_right:选择开头 { 和结束 } 之间的所有文本行（即"代码"）。

:point_right:点击 Delete （在键盘上）。

6.导入框架

我们需要告诉这个代码文件使用BFWControls框架中的代码，告诉它"导入"它。

:point_right:在现有的 import UIKit ，添加一行 import BFWControls 。

7.改变超类

正如你所看到的， class NewsTableViewCell 后跟一个冒号（ : ）和超类 UITableViewCell 。我们需要 NibTableViewCell 类更改为 NibTableViewCell ，因此我们获得了它的功能。

:point_right:将超类更改为 NibTableViewCell 。您只需将 UI 更改为 Nib 。

如果我们还没有添加 import BFWControls ，那么Xcode会抱怨 Use of undeclared type 'NibTableViewCell' ，这意味着它不知道 NibTableViewCell 是什么。

8. IBDesignable

最后，我们需要告诉Xcode我们希望 NewsTableViewCell 不仅可以在运行时（即我们运行应用程序时）绘制，还可以在"设计时"绘制，当我们在Interface Builder中查看自定义单元格时，例如故事板。

:point_right:在 class 前添加 @IBDesignable 。

全部完成。我们已经修改了 NewsTableViewCell 是BFWControls'的一个子类 NibTableViewCell ，问的Xcode在设计时表现出来，在Interface Builder。

9.显示自定义单元实例

by通过在Project Navigator中选择 Main.storyboard 文件切换回 Main.storyboard 文件。选择"属性"检查器。

属性检查器现在有一个额外的 Nib Table View Cell 部分，其中包含 Tertiary Text 和其他属性。

:beetle:如果属性检查器显示空白内容，请单击画布的空白部分（例如场景之间），然后再次单击顶部的新闻项目单元格以选择它。

Xcode将花费几秒钟来构建项目的部分，以便使用自定义布局更新单元格。

现在选定的单元格确实看起来不同，但它被压扁了。

:point_right:向下拖动所选单元格的选择手柄，使高度约为180磅。

将单元格拖动得更大时，可以看到自定义布局。

:tada:就是这样！故事板现在在新闻单元格中使用我们的自定义xib布局。

10. Connections Inspector

现在我们有了我们想要的单元格布局，但它只是显示占位符图像和 Label 文本。我们希望它使用xib中的布局，但使用此实例中的图像和文本填充它。我们需要返回到xib并将标签和图像视图连接到正确的插座，因此代码知道放置文本，详细文本，图像等的位置。

:point_right:在Project Navigator中选择 NewsTableViewCell.xib 文件。在"文档大纲"中，单击" News Table View Cell 上的一次。 （或者，您可以单击画布中的空白区域，然后在单元格的边缘单击一次。）

:point_right:在右侧的"检查器"面板中，单击最右侧的图标（圆圈中的箭头）以显示" Connections Inspector 。

标题为 Outlets 的第一部分显示了可在 NewsTableViewCell 类中连接的所有插座。由于我们尚未向 NewsTableViewCell 代码文件添加任何插座，因此这些插座列表都是从其 NibTableViewCell 超类继承的。

11.连接插座

为了让我们的 NewsTableViewCell 知道在每个实例中放置文本，详细文本和图像的位置，我们需要将每个插座连接到所需的图像视图或布局中的标签。

:point_right:在 textLabel ，在最右边，从空白圆圈向左拖动到顶部 Label 。

:point_right:同样，将 detailTextLabel 连接到底部 Label 。

:point_right:的连接 imageView 出口顶端小图像视图。

12.刷新视图

:point_right:切换回 Main.storyboard 文件。如果未更新，请从" Editor 菜单中选择" Refresh All Views "。

Xcode在我们为 NewsTableViewCell 设计的布局中显示此顶部单元格的文本和图像。

:point_right:试试第二个细胞。单击一次选择它。向下拖动其选择手柄，使其高度也约为180磅。

第二个单元格仍然是默认的 UITableViewCell 类。请注意，当它具有更高的高度时，允许图像视图增长以适合图像。

:point_right:如果第一个单元格的布局有点混淆，如上所示，请再次从" Editor 菜单中选择" Refresh All Views "。在Interface Builder中"在设计时"预览时，这种错位只是暂时的。它不会影响运行时。

:point_right:仍然选择第二个单元格，在 Identity Inspector ，将其类更改为 NewsTableViewCell ，就像之前一样。

两个单元格现在都是 NewsTableViewCell ，并使用 NewsTableViewCell.xib 的布局。每个单元格显示自己的文本和图像。

13.文本占位符

我们的定制电池运行良好。每一个实例展示在我们的自定义布局和个别内容 textLabel ， detailTextLabel 和 imageView 网点。但是，正如您所看到的，我们有第二个图像视图和第三个文本标签，它们当前只显示占位符图像和 Label 文本。我们需要为那些连接插座，以便我们可以为它们分配内容。

NibTableViewCell 超类已经包含一个名为 tertiaryTextLabel 的第三个文本标签出口。我们所要做的就是将它连接到我们的xib中，就像之前为 textLabel 和 detailTextLabel 。

:point_right:在Project Navigator中选择 NewsTableViewCell.xib 文件。

这三个标签都有 Label 占位符文本，这使得一目了然地识别它们有点混乱。首先，让我们更改每个文本的占位符文本。

:point_right:依次双击三个标签中的每一个，选择其内容。将顶部的一个更改为 [Text] ，将底部的一个更改为 [Detail Text] ，将中间的一个更改为 [Tertiary Text] 。务必在每个中包含开口 [ 和关闭 ] 。

:point_right:在画布中，选择外部单元格容器。在右侧Inspector面板中选择 Connections Inspector 。使用占位符 [Tertiary Text] 将 tertiaryTextLabel 插座连接到中间文本标签。

Main.storyboard 再次选择 Main.storyboard 。

请注意，第三个标签的 Label 占位符已在 [Tertiary Text] 替换为每个单元格实例。

:point_right:运行应用程序。

请注意，占位符文本在运行时被删除。 NibTableViewCell 超类自动删除占位符文本，如果它以方括号（即 [ 和 ] ）开头和结尾。

14.第三文本

UITableViewCell 类包括 textLabel 和 detailTextLabel ， NibTableViewCell "覆盖"。这就是我们的 NewsTableViewCell 自动使用故事板中原始单元格的标题文本和字幕细节文本的原因。但是，在 UITableViewCell 超类中不存在名为 tertiaryTextLabel 第三个文本标签。我们需要一些其他方式来为它提供文本。 NibTableViewCell 通过提供 Tertiary Text 属性来实现此目的。

:point_right:切换回Xcode。选择新闻中的第一个单元格。选择"属性"检查器。

:point_right:在"属性"检查器的" Tertiary Text 字段中，键入采样日期： October 9, 12:32pm

点击 Return ，您可以看到日期文本出现在三级文本标签中。

:point_right:同样，选择第二个单元格并输入 Tertiary Text ： October 10, 2:13pm

15.提交变更

正如你之前所做的那样：

1. :point_right:从" Source Control 菜单中选择" Commit Changes "。
2. :point_right:输入如下描述： NewsTableViewCell: changed to a subclass of NibTableViewCell. Added placeholder text. Connected outlets.
3. :point_right:单击" Commit 按钮。

16.回顾

我们的 NewsTableViewCell 将xib文件的布局与故事板中每个实例的文本和图像相结合。

:interrobang:如果您有任何问题或意见，请在下面添加回复。

第二个图像仍显示占位符图像。接下来，在 教程10中 ，我们将创建自己的插座和属性，以便我们可以自定义此详细图像。

查看英文原文

查看更多文章

公众号：银河系1号

联系邮箱：[email protected]

（未经同意，请勿转载）