2.2 创建支持浅色和深色模式的启动画面

在2019年之前，我们通常会使用故事板（Storyboard）搭建用户界面，再利用约束和自适应布局技术以可视化的方式设计用户界面。它的好处在于可以帮助我们设计出既适用于不同屏幕尺寸的iPhone设备，又适用于不同屏幕尺寸的iPad设备的用户界面。在当时看来，这种用户界面设计方式还是很先进的，但是某复杂的约束往往会让界面设计者抓狂，因为在一般情况下，确定一个视图的大小与位置，需要对它建立4种约束关系，按一个场景有10个视图计算，我们需要建立大约40种约束关系，所以一旦某个约束出现问题，就会因为连锁反应导致整个场景的布局错位。

当苹果公司在2019年的WWDC上推出SwiftUI的时候，读者都认为这是以代码开发用户界面来代替故事板的重要里程碑。事实也确实如此，通过对第1章的学习，我们会发现利用SwiftUI技术进行界面设计，可以完全不用纠结视图与视图之间具体的约束关系，从而提高了界面布局的开发效率，可以让我们将重心放在功能的代码实现上。

但不幸的是，在某些时候我们仍然需要一个启动画面的故事板，以便在应用程序启动时有定制化的内容呈现给用户。虽然在第1章，我们通过项目的Info.plist文件来设置启动画面，但它还是有一些局限性。比如我们虽然可以为启动画面设置背景颜色，却无法为启动画面设置背景图片。虽然可以通过Image Name设置应用程序的Logo，却无法再单独设置一个文本说明，除非将文字说明也写到Image里。

2.2.1 创建Launch Screen故事板

接下来，我们会用故事板来创建这里是北京App的启动画面，并且让它自动适配浅色和深色模式。需要注意的是，如果你没有使用故事板开发用户界面的经验，那么请一定注意每一步的操作细节，否则会导致界面布局的失败。

首先，在项目导航中新建一个文件，在文件模板选择面板中搜索launch，然后选中iOS/Launch Screen类型，单击Next按钮，如图2-8所示。

确认文件名称为Launch Screen后，单击Create按钮。此时项目中会出现一个Launch Screen.storyboard文件，选中它以后，你会发现在Xcode的编辑区域中出现了一个iPhone模样的故事板，如图2-9所示，我们之后设计启动画面的操作都会在这里进行。

2.2.2 设计Launch Screen用户界面

在编辑区域的列表框中，可以找到“View Controller Scene/View Controller/View”中有2个Label，它们的名字分别是Label和ThisIsBeijing。在列表框中选中并删除这两个Label，然后在Xcode菜单中选择“View/Show Library”调出Library面板，找到Image控件并将其拖曳到故事板中。

选中Image控件，然后在Xcode右侧属性检视窗中将Image View中的Image设置为之前在Assets.xcassets中添加好的Background，如图2-10所示。

继续在属性检视窗中将Content Mode设置为Aspect Fill，因为之后我们要将图片放大并填充到整个屏幕，所以需要为该Image添加4个约束，让其四边与屏幕的上、下、左、右边缘重合。

单击Xcode编辑区域底部的Add New Constraints按钮，此时会弹出约束设置面板，先去掉Constrain to margins前面的勾选，然后单击Image上边缘数值右侧的下三角按钮，确认一定要勾选View（current distance=xxx）而不是Safe Area（current distance=xxx），再将数值修改为0。用同样的方法修改左、右和下边缘的参数及数值。最后单击Add 4 Constraints按钮即可，如图2-11所示。

当我们为背景图片添加好4个约束以后，就可以看到整个故事板屏幕呈现出图2-12所示的效果。这里特别说明一下，如果你是第一次使用故事板为视图创建约束，那么可能失败，不要着急，删除掉这个Image以后重新再来一次，直到成功就好。

继续在故事板中添加另一个Image，把它放到中央偏上的位置，在属性检视窗中将Image设置为Beijing-Logo，并确认Content Mode选项为Aspect Fit。打开Add New Constraints面板，将width和height均设置为240点后，同时勾选这两个选项，然后单击Add 2 Constraints按钮。这意味着该Image的宽度和高度会被固定在240点。

除了为当前的Image设置高度和宽度约束，我们还需要为其设置对齐方式。打开Align面板，勾选Horizontally in Container和Vertically in Container两个选项，并分别将数值设置为0和-150，如图2-13所示。这意味着Beijing图片会处于屏幕水平居中，垂直居中但向上150点的位置。最后单击Add 2 Constraints按钮，就完成了在大小和位置方面的4个约束。

最后，我们还需要为启动画面添加一个文本，在Library面板中搜索Label并将其拖曳到Beijing-Logo图片的下方，修改文本内容为这里是北京。在属性检视窗中将Font的Size设置为36，效果如图2-14所示。

继续在Label的属性检视窗中打开Color设置选项，从下拉列表中找到LaunchScreen-Color，它是我们之前从项目资源中导入的颜色集。如果你在Assets.xcassets中点开该颜色集，那么会发现它包含Any和Dark两种模式，在浅色模式下面会使用深棕色，而在深色模式下会使用浅棕色。

最后，我们还要为这个Label设置约束，再次打开Add New Constraints面板，将上边缘数值设置为25，这意味着Label的上边缘与Beijing-Logo图片的下边缘有25点的间隔距离，单击面板底部的Add 1 Constraint。再打开Align面板，勾选Horizontally in Container选项，同样单击面板底部的Add 1 Constraint。

至此，Label在启动画面中的约束就创建好了。可能你会有些疑惑，为什么对于Label我们只设置2个约束，而对于Image要设置4个约束才行呢？简单来说，就是因为系统对于Label这样的控件，会自动计算它实际呈现内容的宽度和高度，并作为两个约束条件。因此我们只需要再确定它的位置在纵向上与Beijing-Logo有25点的间隔距离，水平方向居中即可。

2.2.3 在项目中设置启动画面

在启动画面故事板制作好以后，我们还要回到项目导航并单击顶端的ThisIsBeijing条目，在编辑区域中将App Icons and Launch Images中的Launch Screen File设置为Launch Screen，如图2-15所示。

所有这些都做好以后，就可以在模拟器中查看启动画面的运行效果了。模拟器在默认情况下进入的是浅色模式，你可以在模拟器的设置应用中找到“开发者”，进入以后打开“Dark Appearance”开关，这会让系统进入深色模式，再次运行应用程序，则会看到自动适应深色模式的启动画面，效果如图2-16所示。通过两张图的对比可以发现，不同模式下的背景图和文字颜色有所不同，唯一相同的就是Beijing-Logo图片，因为在Assets.xcassets中，我们并没有单独创建Dark模式下的图片。