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

创建插座和属性

1.简介

在教程9中，我们连接了NewsTableViewCell现有出口，并输入了所需的属性。

在本教程10中，我们将为第二个图像视图创建一个自己的插座，并在其中设置图像的属性。

这与我们进行真实编码所需的时间差不多。 大多数编码工作已经为我们完成。 我们在本教程中编写的模板代码对于我们以后创建的任何其他插座和属性将基本相同。 这是很难的，而且还不那么难。

2.显示Xib和代码

X在Xcode中，在项目浏览器中选择NewsTableViewCell.xib 。

我们需要同时查看该xib文件和相应的代码文件。

👉在工具栏中，单击Assistant Editor 。

👉您应该在右侧看到NewsTableViewCell.swift代码。 如果没有，请通过单击弹出菜单来检查右侧文件是否设置为Automatic ，如图所示。

👉如果您在屏幕上需要更多空间，请使用工具栏右上角的按钮或单击“ View菜单，然后单击“ Inspectors > Hide Inspectors器”来隐藏“检查器面板”。

3.创建一个插座

👉按住Control键（在键盘上），然后从xib的第二个图像视图拖动到代码文件中的class行下方。

code Xcode为新插座显示一个弹出框。 输入插座Name作为detailImageView 。

👉单击Connect按钮。

code Xcode为我们编写连接代码，并将其连接到xib中的图像视图。

👁您不需要了解它，但是如果您感到好奇，那么创建的代码行包括：

1. 边距中的实心圆圈表示此插座已连接至xib中的某物。
2. @IBOutlet在边距中创建圆，并让Xcode知道它可以连接到xib中的视图。
3. weak意味着该应用程序可以在不使用任何连接时释放（忘记）此连接。
4. var表示这是一个“变量”，可以通过代码或连接进行更改。 变量是可以更改（即更改）的属性（也称为“属性”）。
5. detailImageView是我们之前键入的名称，它是此变量的名称。
6. : UIImageView将此变量的类声明为UIImageView 。 因此，此插座只能连接到UIImageView 。
7. 感叹号（ ! ）表示必须先连接此变量，然后才能使用它。 也就是说，它必须具有一个值并且不能为零。

现在，我们已经完成了助理编辑器。 我们只需要使用Assistant Editor即可同时看到xib和Swift文件，以便我们可以控制它们之间的拖动连接。

can您可以使用工具栏中的三种编辑器模式的左侧切换回Standard Editor 。

4.从代码访问插座

in在项目浏览器中选择NewsTableViewCell.swift文件，以便我们仔细查看代码。

该detailImageView出口是开发人员访问该单元格中较大的第二张图像所需的全部。 他们将使用如下代码编写获取当前图像的代码：

 返回detailImageView.image 

这使用“点表示法”，其中detailImageView.image表示“ detailImageView的image 。 我们将image称为detailImageView的“属性”或“属性”或“变量”。

开发人员可能会编写代码以从服务器获取新的图像值，然后使用代码将detailImageView的图像设置为该新值，如下所示：

  detailImageView.image = newValue 

5.创建一个属性

在我们的情况下，我们还没有服务器或代码来填充单元格中的细节图像。 在设置原型时，可以方便地使用Attributes Inspector逐个单元地设置图像。 我们可以通过创建一个便利变量来实现此目的，该便利变量在Attributes Inspector中提供了detailImage属性，但在幕后（即在代码中）获取并设置了detailImageView.image 。

👉在NewsTableViewCell.swift文件中添加代码，以匹配以下内容：

code Xcode将NewsTableViewCell “大驼峰案例”类名转换为News Table View Cell的更易读的标题大小写。 同样，它将detailImage的变量名称显示为标题Detail Image 。

由于我们将此变量声明为UIImage ，因此Xcode知道在应用中显示图像列表的可能值。

Detail在“ Detail Image标签旁边，单击弹出菜单，然后选择“ chain 。 同样，选择第二个单元格并将“ Detail Image设置为houseInterior 。

should您应该在每个单元格中看到详细图像。

👉运行应用程序。

7.提交更改

如您之前所做的：

1. from从“ Source Control菜单中选择“ Commit Changes ”。
2. 👉输入描述，例如： NewsTableViewCell: created outlet and attribute for detail image
3. 👉单击Commit按钮。

8.回顾

现在，“新闻”场景中的单元格显示了我们定义和输入的所有属性。 我们已经为细节图像创建了出口和属性，这是该单元格特别需要的。

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

与我们所需的布局相比，我们仍然需要使用重量，大小和颜色来格式化不同的文本标签。 我们还需要做一些事情，以允许细节文本包裹在多行上，并使细节图像增长以适合内容。 细胞本身将需要能够增长以适应不断增长的内容。 接下来，我们将在教程11中解决这些问题。