2.1 使用Xcode创建项目

在启动Xcode后，选择Create a new Xcode project选项创建一个项目，在弹出的项目模板选项卡中选择iOS/App，单击Next按钮。

在随后出现的项目选项卡中，做如下设置。

○ 在Product Name处填写ThisIsBeijing。

○ 如果没有苹果公司的开发者账号，那么请将Team设置为None；如果有，则可以设置为你的开发者账号。

○ Organization Identifier项可以随意输入，但最好是你拥有的域名的反向，例如：cn.liuming。如果你目前还没有拥有任何域名的话，使用cn.swiftui是一个不错的选择。

○ Interface选为SwiftUI。

○ Lift Cycle选为SwiftUI App。

○ Language选为Swift。

在该选项卡中，确认Use Core Data和Include Tests选项处于未勾选状态，然后单击Next按钮。

在确定好项目的保存位置后，单击Create按钮完成项目的创建。

因为本章的程序界面设计只适合iPhone纵向显示，所以当项目创建好后，需要先在项目导航中进行如图2-1所示的设置。在Device Orientation中去掉Landscape Left/Right的勾选。

另外，我们可以在这里修改Display Name选项，将其设置为这里是北京，这样在模拟器中我们就会看到中文的应用程序名称了。

2.1.1 为项目添加程序图标和相关图片素材

在Xcode项目导航面板中选择资源分类（Assets.xcassets）。鼠标右击应用程序图标组（AppIcon），并在弹出的快捷菜单中选择Show in Finder。在弹出的Finder程序中进入AppIcon.appiconset文件夹，将本章“项目资源/AppIcon”中的所有文件复制到里面，根据提示覆盖原有的Contents.json文件，这样就可以将所有尺寸的图标全部添加到AppIcon中，如图2-2所示。

接下来，我们需要在“项目资源”文件夹中找到FoodIcons、Foods、Hutongs、Logo和SnackBar 5个文件夹，将它们直接拖曳到Assets.xcassets中。接着，在Xcode中打开FoodIcons文件夹并选中其中的8个图标，因为它们都是矢量图，所以需要在属性检视窗中勾选Preserve Vector Data，确保程序会以矢量图格式呈现图标，如图2-3所示。

2.1.2 为项目添加适配颜色集和图像集

接下来，我们需要为项目添加一些颜色集和图像集，因为它们都是用来适配iOS系统的浅色和深色两种不同显示模式的，所以需要逐个手动添加。

选中Assets.xcassets，在右侧编辑区域的底部单击加号（+）按钮，然后在弹出的快捷菜单中选择Color Set选项，一个全新的白色颜色集就会出现在项目中，将该颜色集的名称修改为ColorBlackTransparentLight。选中当前的颜色块，然后打开Xcode最右侧的属性检视窗。在Color部分将Content设置为sRGB，将Input Method设置为Floating point（0.0-1.0），将红色、绿色、蓝色的颜色滑块均设置为0，最后将颜色透明度（Opacity）设置为25%。如法炮制，再创建一个ColorBlackTransparentDark颜色集，颜色同样为黑色，只不过将透明度设置为80%，如图2-4所示。从字面我们可以看出，这两个颜色集一个用于浅色模式，一个用于深色模式。

继续创建一个新的颜色集并将其命名为ColorAppearanceAdaptive，这次我们会为这个颜色集同时添加浅色和深色两种模式。选中默认的白色，在属性检视窗中将Appearances设置为Any，Light，Dark。这样，程序在使用该颜色集的时候，就会根据不同的模式，选用不同颜色了。设置Any Appearance和Light Appearance均为白色，Dark Appearance为黑色。

接下来，我们需要设置ColorBrown、ColorBrownAdaptive、ColorBrownDark、ColorBrownMedium和ColorBrownLight5种颜色集，直接将它们从“项目资源/Colors”文件夹中拖曳到Assets.xcassets即可。

最后，在Assets.xcassets中新建一个Colors文件夹，并将刚才创建的8个颜色集拖曳到里面，如图2-5所示。

创建好颜色集以后，还需要添加可以适配浅色和深色的图像集。在Assets.xcassets中添加一个新的文件夹，将其命名为LaunchScreen。在里面添加一个Image Set，并将其命名为Background。

在“项目资源/LaunchScreen”中将Background、Background＠2x和Background＠3x这3个文件拖曳到Background图像集中。然后在属性检视窗中将Appearance设置为Any，Light，Dark，此时Background图像集会出现两行空白图片框分别对应Light和Dark模式，直接将Any一行的图片复制到Light一行。最后将项目资源中有关Background-dark的3张图片拖曳到相应图片框即可，如图2-6所示。这样，当我们在程序中调用Background图像集时，系统就会根据当前模式呈现相应的图片了。

除了Image Set，我们还需要将“项目资源/LaunchScreen”中的LaunchScreen-Color.colorset文件夹拖曳到Assets.xcassets的Launch Screen中。

继续在Assets.xcassets中添加一个文件夹，将其命名为FoodHeaders。然后将“项目资源/FoodHeaders”中所有不带Dark后缀的图片文件拖曳到FoodHeaders中，跟Background图像集的操作方法一样，这次需要选中FoodHeaders中所有的图像集，在属性检视窗中将Appearance设置为Any，Light，Dark，让Any和Light的图片保持一致，再将带Dark后缀的图片放入相应的图片框中，效果如图2-7所示。

最后在Assets.xcassets中添加一个TabIcons文件夹，我们需要添加4个用在TabView上面的图像集。将“项目资源/TabIcons”中4个不带Dark后缀的矢量图片拖曳到TabIcons中，然后仿照之前的操作，完成Any、Light和Dark三行图片的添加。

现在，我们终于完成了所有颜色集和图像集的添加与组织，虽然你可能会觉得比第1章的项目开始阶段复杂了一些，但是当应用程序运行以后，你会发现程序会根据不同的环境使用不同的素材，这是一个非常酷的体验。