2.2 使用故事板创建用户界面

此时，左侧的导航面板会默认打开项目导航。里面出现的就是目前构成该项目的所有文件。其中一些文件前面是一个雨燕样子的图标，代表是代码文件，里面包含了应用程序的逻辑代码。有些文件前面是一个黄色的图标，代表是界面设计文件，Main.storyboard就是这种类型的文件，我们主要通过它来设计应用程序的用户界面。另外，还有一个LaunchScreen.storyboard界面设计文件，当应用程序启动时，会在屏幕上显示该文件提供的信息，比如公司或你个人的Logo。最后一种类型是Assets.cxassets文件夹，我们可以在该文件夹中放置应用程序会用到的图像、照片或图标资源素材，如图2-2所示。

让我们选中Main.storyboard文件，开始设计I Am Rich项目的用户界面。

实战：设计I Am Rich项目的用户界面。

步骤1：在项目导航选中Main.storyboard文件。此时编辑区域会打开Interface Builder，并显示一个单独的屏幕视图。这是因为我们使用了Single View App模板创建的项目。在这个单独的视图左侧还有一个箭头，它代表的是应用程序启动后在屏幕中所显示的首个视图。如果此时的Interface Builder中有两个视图控制器，我们可以利用这个箭头指定其中一个视图控制器为应用程序启动后首个显示在屏幕上的控制器。

在Interface Builder底部有一个View as: iPhone 8的按钮，如图2-3所示。单击后会打开设备选择面板，可以看到不同屏幕尺寸的iOS设备，分辨率从低到高分别是：iPhone 4s（3.5英寸）、iPhone SE（4英寸）、iPhone 8（4.7英寸）、iPhone X（5.8英寸）、iPhone 8 Plus（5.5英寸）以及iPad 9.7/10.5/12.9英寸三个不同的屏幕尺寸。我们可以随意选择不同屏幕尺寸的设备以及它的方向（横向/纵向）进行设计。

步骤2：在设备选择面板中选择iPhone X，如果视图较大，可以在触控板上通过缩放操作将其调整到合适的大小。

步骤3：打开Xcode右侧的实用工具面板。在对象库中搜索标签（Label）控件，或者使用Command + Option +L快捷键在对象库的搜索栏中输入Label。

实用工具分为上下两个部分，上半部分有6个标签，下半部分有4个标签。这里重点看下半部分的第3个标签——对象库（Object Library），它的图标是圆圈中包含一个正方形，在设计用户界面的时候我们会经常用到它，如图2-4所示。

步骤4：拖曳Label到视图之中，将其放在视图顶部的任意位置即可。在Attributes Inspector中将Label的内容修改为I Am Rich；单击Font右侧的T字标记，将Font设置为Custom, Family设置为Helvetica Neue, Style设置为Thin, Size设置为40，如图2-5所示。

因为修改了字号，所以当前标签中的文本内容根本无法全部呈现在视图中，这时我们需要调整Label的八个控制点，使其全部呈现在视图上。另外，因为Label是iOS开发中最常用的UI控件，所以也可以通过Command + = 快捷键让Interface Builder自动调整Label控件到合适的大小。

步骤5：确保选中Label，在Attributes Inspector中将Color设置为White Color。

此时Label中文本的颜色会与设计视图的背景色都为白色。为了能够在视图中快速找到所需要的UI控件，可以通过Document outline快速定位。

在Document Outline中单击View Controller Scene/View Controller/View，如图2-6所示。接着，在Attributes Inspector中将Background设置为RGB 34495E。

此时的Label是被我们随意放置的，下面，我们需要精准定位UI控件的位置，也就是一切从客户的角度出发，为客户的需求考虑。不管是标签（Label）还是按钮（Button），不管是位置还是大小，都需要有精确的设定。

步骤6：再次选中Label，在Size Inspector的View部分中，设置x为108, y为100, width为160, height为50。

此时Label在视图中的大小与位置看着就比较自然、舒服了，如图2-8所示。但是这种方法是最初级、最原始的，在之后的学习中，将会通过自动布局和Sized Classes等特性进行UI控件的完美布局。