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

用图像，标签和按钮插座构建自定义的“产品”单元。

1.简介

在本教程12中，我们将使用“自动布局”，堆栈视图，图像视图，标签和按钮为“产品”场景构建自定义单元格布局。 表格视图将动态调整单元格的大小以适合内容。

2.从这里开始

在教程11中，我们通过自动调整单元格高度来结束“新闻”场景。 如果您从那里继续，那么您将拥有所需的一切。 跳至步骤3。

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

👉启动终端应用程序（从“应用程序”文件夹中）。

Terminal在终端中，输入：cd〜 cd ~/Documents ，然后按Return 。

👉将以下内容粘贴到Terminal中，然后按Return ：

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

Terminal在终端中查看下载进度，然后等待下载完成。

👉在您的Documents文件夹中，打开lego-tutorial-social文件夹。

👉打开Social.xcode.proj文件。

本教程假定您知道如何完成本系列中已经介绍的任务。 如果不确定，请回顾以前的教程中更详细的步骤。

3.删除文件

在将更多文件添加到项目之前，让我们删除一些不再需要的文件。 当我们第一次创建项目时， FirstViewController.swift和SecondViewController.swift文件是作为Tabbed App模板的一部分创建的。 我们已经从使用这些文件的情节提要中删除了场景（并用“新闻和产品”场景替换了它们），因此我们也可以删除这些Swift文件。

👉在项目浏览器中单击FirstViewController.swift文件一次。 按键盘上的delete键。 Xcode提示您进行确认。 单击Move to Trash按钮。

👉同样，单击SecondViewController.swift文件并将其删除（即， Move to Trash ）。 Project Navigator显示这些文件已消失。

或者，我们可以单击第一个文件，按住Shift键单击第二个文件，以选择两个文件，然后按Delete键立即将两个文件删除。

4.产品单元

让我们使用在教程7中创建“新闻”单元时所学的知识，快速创建“产品”单元。

我们的目标是像在Lego中一样将子视图组装成堆栈视图。

👉控制单击或右键单击“ Social组”文件夹。 在出现的弹出菜单中，选择“ New File 。

iOS选择iOS和Cocoa Touch Class 。 单击Next 。

👉在弹出菜单的Subclass of ，选择UITableViewCell （完全匹配大小写）。 对于Class输入ProductTableViewCell （注意： Product而不是Products ）。 启用Also create XIB file 。 Language应该是Swift 。

correctly正确填写表格后，单击“ Next按钮。

Save“保存”对话框应默认与其他项目文件位于同一位置。

👉单击Create按钮。

should您应该看到两个新文件添加到您的项目中。

👉单击ProductTableViewCell.xib文件一次。 您应该会看到一个空的表格视图单元格，全部都是它自己。

5.添加图像视图

👉将单元格的底部边缘向下拖动到大约170点高。

👉单击工具栏中的“ Library按钮。 在搜索字段中输入图片。

now现在将“ Image View从列表拖到空白单元格中，大约在中间。

👉在仍然选择图像视图的情况下，在“属性”检查器中，将“ Image设置为placeholder 。 我们希望图像保持宽高比并适合图像视图，因此，将其Content Mode设置为Aspect Fit 。

👉单击画布底部的“ Add Constraints按钮。 输入80的Height和Width ，然后单击Add 2 Constraints 。

since约束将显示为红色，因为我们尚未完成约束。 没关系。

👉抓住图像视图的右手柄之一，然后向左拖动，使其占用不到单元格宽度的一半。 我们只需要粗略地定位，因为完成后约束将使所有内容对我们而言都是准确的。

6.添加标签

👉单击Library按钮。 在搜索字段中输入label 。

👉将“ Label从“对象库”列表拖动到图像视图右侧的单元格。

👉重复此过程，将第二个标签添加到单元格中，紧靠第一个标签。 再次重复以添加第三个标签。

👉将相应标签的文本更改为[Text] ， [Detail Text]和[Tertiary Text] 。

👉选择Text标签。

👉在“属性”检查器中，设置：

1. Headline的Text Style 。
2. Lines数为2 。

👉选择Detail Text标签。

👉设置：

1. Caption 1的Text Style Caption 1 。
2. Color为Dark Gray Color 。
3. Lines数为5 。

👉选择Tertiary Text标签。

👉设置：

1. Body的Text Style 。
2. Color为Dark Gray Color 。

7.添加一个按钮

这将是我们的产品单元，我们希望在其中向用户提供购买产品的能力。 为此，我们将添加一个“购买”按钮。

👉单击Library按钮。 在搜索字段中输入bu 。

👉将Button对象从“库”中拖动到“ Tertiary Text标签右侧的单元格中。

👉仍然选择按钮，然后在“属性”检查器中，将标题从“ Button更改为“ Buy然后单击“ Return （在键盘上）。

8.堆栈视图

👉在仍然选择Buy按钮的情况下，按住Shift键单击“ Tertiary Text标签，因此两者都被选中。 单击画布底部的“ Embed In按钮，然后从弹出菜单中选择“ Stack View ”。

👉在刚刚创建的堆栈视图中，仍处于选中状态，请检查属性是否与下面的属性匹配，并进行必要的更改以使其匹配。

👉按住Shift键单击其他两个标签，以便与水平堆栈视图一起选择它们。

👉单击画布底部的“ Embed In按钮，然后从弹出菜单中选择“ Stack View ”。

👉在刚刚创建的堆栈视图中，仍处于选中状态，请检查属性是否与下面的属性匹配，并进行必要的更改以使其匹配。

👉仍然选择标签的垂直堆叠视图，在图像视图上按住Shift键并单击。 单击“ Embed In按钮，然后再次选择“ Stack View 。

👉修改任何需要的属性以匹配这些设置。

9.限制利润

👉在仍然选择外部堆栈视图的情况下，单击画布下方的“ Add New Constraints按钮。 在弹出窗口中，打开“ Constrain to margins并为顶部的四个边约束中的每个Constrain to margins输入0 。

👉单击Add 4 Constraints按钮。

10. NibTableViewCell的子类

👉在项目导航器中选择ProductTableViewCell.swift文件。

👉将ProductTableViewCell.swift文件编辑为：

1. 删除占位符func代码。
2. 添加import BFWControls 。
3. NibTableViewCell类更改为NibTableViewCell 。
4. 在class之前添加@IBDesignable 。

12.更新情节提要中的单元格

👉在项目浏览器中选择Main.storyboard 。 滚动到“产品”场景。 选择两个单元格。 选择身份检查器。

Class单击“ Class弹出菜单，然后选择“ ProductTableViewCell 。

👉选择尺寸检查器。 将所选单元格的“ Row Height ”从“ Default更改为190 ，或将其看起来像预览一样好。

您还可以单独调整单元格的高度，因为它只是一个预览，我们将在视图控制器中覆盖运行时单元格的高度。

👉在第一个单元格上单击一次。 在“属性”检查器中，输入“ Tertiary Text为$98 。

👉同样，对于第二个单元格，将“ Tertiary Text输入为$75 。

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

clicking通过单击标题栏中的黄色图标来选择表视图控制器。

👉在Identity Inspector中的“ Class字段中，键入Adj然后从弹出菜单中选择AdjustingTableViewController 。 点击Return或Tab （在键盘上）。

👁Xcode应该自动以BFWControls输入Module ，因为它BFWControls该类所在的位置。

👉切换到“属性”检查器。 在“ Adjusting Table View Controller部分中，将“ Intrinsic Height Cells从“ Default更改为“ On 。

👉运行应用程序。 切换到Products选项卡。 确认单元格的高度调整为适合标题的两行和细节的五行。

14.提交更改

如您之前所做的：

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

15.回顾

现在，我们的产品单元格具有文本样式，各种字体大小，“购买”按钮和自动调整单元格高度的功能。

16.接下来呢？

👏如果您喜欢这篇文章，请用“拍手”按钮鼓掌。

🚦遵循“构建像Lego这样的应用程序”出版物。

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

Tu在教程13中，我们将为聊天场景创建自定义单元。

through浏览“教程索引”以查看本系列中的其余教程（如果尚未完成）。