构建像Lego这样的应用程序-教程2

风景和场景

1.简介

导航移动应用程序与使用Web浏览器根本不同。 客户喜欢移动UI（用户界面）的简单性和可预测性。 他们可以使用相同的导航操作从一个应用程序切换到另一个应用程序，以在功能之间切换，滚动列表，向下钻取更具体的内容等等。

在本系列的教程2中，我们将讨论如何在其他内容中管理视觉内容，包括超级视图中的子视图以及父场景中的子场景。 我们将介绍标签栏控制器和标签栏。

确保您已完成本系列的教程1。 我们将从教程1停止的地方开始。

回想一下，我们的目标是构建一个看起来像这样的应用程序：

在教程1中，我们创建了一个模板选项卡式应用程序。 它只有两个标签栏项目（底部的“新闻/第一和第二”图标），但是我们需要三个标签栏项目。 我们还需要每个导航栏。 每个场景（新闻，产品和聊天）都需要一个滚动列表。

2.场景，视图控制器和视图

为了组装我们的应用程序，我们需要知道用于描述基本构建块的三个术语：“场景”，“视图控制器”和“视图”。

1. 场景提供了要显示在iPhone屏幕上的内容。 它包含一个视图和一个视图控制器。
2. 场景的视图包含要显示的视觉元素。
3. 场景的视图控制器是告诉场景的代码。

术语“场景”和“视图控制器”通常可互换使用，表示同一事物。 非正式地，您可能还会听到人们将其称为“页面”，“窗口”或“屏幕”。 从技术上讲，iPhone仅具有一个物理“屏幕”，每个应用程序都仅存在于一个“窗口”中。

👉在项目浏览器中，单击Main.storyboard将其选中。

you如您所见，在Xcode的Interface Builder中，情节提要包含我们在教程1中创建的三个关联场景，标题分别为： Tab Bar Controller ， News和Second 。

👁在文档大纲中查找。 您可以在大纲视图中看到相同的三个场景，每个Scene都以后缀Scene命名。

在应用程序中导航时，它会呈现不同的场景。 到目前为止，当我们运行应用程序时，我们可以在新闻场景和第二场景之间切换。

场景的视觉内容称为其“视图”。

👉在“文档大纲”中，展开“ News Scene和位于其下方的“ News视图控制器（通过单击每个视图左侧的三角形）。

👁您可以看到它包含“ News视图控制器和场景的“ View 。

3.超级视图和子视图

视图始终具有矩形形状。 一个视图可能包含其他视图。 包含的视图称为“超级视图”，其中的视图称为“子视图”。

例如，我们的News场景的视图当前包含两个子视图： News标签和Loaded by FirstViewController标签。

👉在文档大纲中展开“ News Scene ”的View ，以查看其中的这些子视图。

您现在可以忽略“ Safe Area和“ Constraints项，因为它们不是视图。

您可以将超级视图视为包含较小的Lego块作为子视图的大型矩形Lego块。 子视图块只能放置在超级视图的矩形范围内。

在新闻场景中，这两个标签就像是在大矩形场景视图顶部放置的乐高积木一样。

有些视图通常没有子视图。 例如，通常不会将子视图添加到标签。 在乐高类比中，如上图所示，标签顶部没有连接螺柱，因为它们不接受子视图。

4.标签栏控制器

Main在Main.storyboard布局中，您可以看到一个Tab Bar Controller场景，该场景链接到News场景和Second场景。 Tab Bar Controller场景一次显示一个News Scene和Second Scene 。

我们将标签栏控制器称为“父”场景（或父视图控制器），并将其显示为“子”场景（在这种情况下为“新闻”和“第二”场景）。 父场景的视图包含其子场景的视图。 因此，“新闻”和“第二”场景将轮流将其视图放置在选项卡栏控制器的视图内。

我们可以将标签栏控制器视为Lego底板，该底板为每个子场景提供一个空间，并在底部提供标签栏。

👉展开文档大纲中的Tab Bar Controller 。

👁您会注意到View未显示在其中（就像News和Second场景一样）。 您在文档大纲中看到的就是Tab Bar 。

它确实具有视图，但是对Interface Builder而言是隐藏的，因此我们无法直接访问它。 标签栏控制器负责在其视图中显示其自己的子级。

每个子视图控制器在顶部空间中显示其视图。 每个子场景还应该提供自己的标签栏项，以显示在标签栏控制器的标签栏中。 我们可以将“新闻”场景和“第二”场景想象成这些乐高构造，每个都有一个视图和一个标签栏项：

标签栏控制器在需要时加载每个子场景，但同时显示所有场景的标签栏项目。 例如，当“新闻”场景处于活动状态时，我们可以如下图所示：

请注意，“ Second选项卡栏项也位于选项卡栏中，但是具有无效的颜色。

总结，标签栏控制器结构包括三个部分：

1. 标签栏控制器 。 它负责显示选项卡栏（在底部）和其中的当前场景视图。
2. 标签栏位于屏幕底部。 它包含所有选项卡栏项，通常会更改当前所选项的颜色。
3. 每个场景的标签栏项 （图标和标题）。

您可以看到“新闻”场景包含一个名为“ News的选项卡栏项目，带有一个圆圈图标。 第二个场景包含一个标签栏项目，标题为“ Second带有一个方形图标。 标签栏控制器显示其包含所有标签栏项目的标签栏。

5.添加一个新场景

让我们为“聊天”添加一个新场景。 这将提供第三个子场景和选项卡栏项。

👉首先，在画布上留出足够的空间以添加新场景。 回想一下教程1中的内容，您可以缩小并隐藏Navigator和Inspector面板（使用Xcode窗口右上方的按钮）。 这可以帮助在小屏幕上提供足够的空间，以便您正确放置场景。

X在Xcode中，画布区域右上角附近，单击“ Library按钮。

👁它显示了可以添加到情节提要画布中的所有对象的列表。 这是一长串。 前几项是不同种类的视图控制器。 最基本的就是所谓的View Controller 。 现有的News / First和Second场景是此基本视图控制器的实例。 您还可以在列表中看到“ Tab Bar Controller ，该Tab Bar Controller当前被用作我们的应用程序流程层次结构的根。 在本教程中，我们将添加两种新的视图控制器类型： Navigation Controller和Table View Controller 。

👉将Navigation Controller从对象库拖动到情节提要中，将其放置在Second场景的正下方。 当您在导航控制器中拖动时，默认情况下Xcode包括一个表格视图控制器，因此实际上您将同时拖动两者。

👉如果输入有误，可以从“ Edit菜单中选择“ Undo ”。

6.在场景之间创建顺序

👉运行应用程序（ Build and Run教程1一样，通过单击Xco​​de中的“ Build and Run按钮）。

👁您会注意到该应用程序的外观与以前一样，在标签栏控制器中仅显示了News场景和Second场景。 我们添加的新场景没有出现。

👉切换回Xcode。

👁请注意，在左窗格（在“问题导航器”中），Xcode列出了一些警告：

您可能还会看到有关没有“开发团队”的警告。 现在还好。

👁这些警告出现在左侧Navigator面板的Issue Navigator中。 请注意，当前在左面板顶部选择了三角形警告图标。 通过单击顶部的第一个图标（文件夹图标），可以更改回Project Navigator以查看Main.storyboard以及其他文件和文件夹。 您可以随时在这些导航器之间切换。

👁一个警告说“Navigation Controller” is unreachable because it has no entry points…触及， “Navigation Controller” is unreachable because it has no entry points… ”。

正如您可能通过查看情节提要来推断的那样，我们尚未在现有流程中链接新的导航控制器场景，因此无法导航到该场景。 让我们修复它。

要连接场景，我们只需控制它们之间的拖动即可。 该连接称为“ segue”。 （它的发音为“ seg-way”，英文单词的意思是“过渡”或移至下一项。它的意大利语原意是“跟随”。）

👉按住键盘上的Control键（ 而不是 Command键），然后将其从Tab Bar Controller拖到新的Navigation Controller 。

release释放鼠标或触控板按钮时，Xcode会显示可能的序列类型的列表：

Relationship在Relationship Segue标题下选择view controllers 。

Xcode将其添加为选项卡栏控制器的子视图控制器（或子场景）。 每当我们将场景添加到标签栏控制器时，这都是正确的选择。 Xcode可能应该默认为我们选择那种类型，但实际上，我们必须选择它。

now现在，您应该看到将标签栏控制器链接到其中的第三个场景的segue箭头。 Xcode还向我们的新场景添加了一个标签栏项，当前标题为Item 。

7.在画布中移动场景

segue箭头部分隐藏在Second场景后面。 我们无法画出segue箭头的路径。 Xcode自动执行此操作。 但是，我们可以移动场景的位置，以帮助segue箭头遵循一条在视觉上更有用的路径。

Note️注意：在画布上移动场景的位置在运行时（即应用程序运行时）没有区别。

要在画布中移动场景，请拖动场景的标题栏。

down向下拖动选项卡栏控制器的标题栏，使其与Second场景对齐，并稍微向左对齐。

also您也可以将两个新的底部场景向下移动一点。 出现蓝色对齐线可帮助您彼此相对放置场景。 现在，segue箭头应显得局促一些。

8.更改选项卡栏项目标题

与教程1中的操作类似，让我们将新选项卡栏项目的标题从Item更改为Chat 。 请记住，如果需要，您可以放大。

👉双击Item以选择该文本：

👉并将其替换为Chat ：

9.提交更改

切换回Xcode。

正如我们在教程1中所做的：

1. from从“ Source Control菜单中选择“ Commit Changes ”。
2. 👉输入描述，例如：将Added third child scene to the tab bar controller for Chat.
3. 👉单击Commit按钮。

10.回顾

在本教程2中，我们有：

1. 在超级视图中讨论的子视图。
2. 在父级场景中讨论了子级场景。
3. 向标签栏控制器添加了一个新的“聊天”子场景，并通过segue连接。

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

在教程3中，我们将继续使用导航控制器修改流程。