1.1 使用Xcode快速创建项目
在开始学习程序开发之前,我们先要确认自己的苹果电脑中是否安装了Xcode软件,如果没有,那么请在App Store中下载,因为它是我们开发iOS程序的前提。
在启动Xcode以后,选择Create a new Xcode project选项创建一个项目,在弹出的项目模板选项卡中,你会发现有各种不同类型的项目预设模板,其中包括手机(iOS)、手表(watchOS)、电视(tvOS)、电脑(macOS)和多平台(Multiplatform),这里我们选择iOS/App,代表我们所创建的项目是基于iOS平台的应用程序,如图1-1所示。选择好预设模板以后,单击Next按钮。
图1-1 通过项目预设模板创建第一个iOS项目
在随后出现的项目选项卡中,做如图1-2所示的设置。
图1-2 设置项目选项
○ 在Product Name对话框中填写FirstApp。
○ 如果没有苹果的开发者账号,那么请将Team设置为None;如果有,则可以设置为你的开发者账号。
○ Organization Identifier项可以随意输入,但最好是你拥有的域名的反向,例如:cn.liuming。如果你目前还没有拥有任何域名,那么使用cn.swiftui是一个不错的选择。
○ Interface选为SwiftUI。
○ Lift Cycle选为SwiftUI App。
○ Language选为Swift。
对于Team选项的设置,如果你现在还没有加入苹果开发者计划,那么可以暂时忽略它。因为绝大部分项目都可以在预览窗口中查看或者在iOS模拟器中运行。另外,Xcode允许接入一台iOS设备进行真机测试。如果你真的想加入该计划,则需要每年支付苹果公司688元人民币的年费。
生存期(Life Cycle)选项必须为SwiftUI App,这是Swift一个全新的特性,它意味着我们可以创建百分之百的SwiftUI程序。该特性相比之前的UIKit的视图生存期管理方式,性能有了很大提升。
请在该选项卡中,确认Use Core Data和Include Tests选项处于未勾选状态。然后单击Next按钮。
在确定好项目的保存位置以后,单击Create按钮完成项目的创建。
1.1.1 为项目添加程序图标和相关图片素材
在Xcode左侧的项目导航面板中选择Assets.xcassets,它属于资源分类,其中有一个空的应用程序图标组(AppIcon)。如果你选中它,则会发现需要为该项目提供许多不同尺寸的图标。
以iPhone App iOS 7-14 60pt为例,我们需要为其提供一个2倍和一个3倍的程序图标,两个图标的像素分别为120×120和180×180。
在本章的项目资源包中找到“项目资源/AppIcon”文件夹,将Icon-60@2x和Icon-60@3x两个图标拖曳到AppIcon相应的空白框中,如图1-3所示。
图1-3 为项目添加两个应用程序图标
其余的图标我们也可以通过该方式依次添加。但是,现在我们使用另一种更快捷的方式:右击AppIcon图标,选择Show in Finder。此时可以看到AppIcon.appiconset文件夹,将本书提供的“项目资源/AppIcon”里面的所有文件全部复制到AppIcon.appiconset文件夹中,并覆盖原有的Contents.json和两个60pt的图标文件,这样就可以将所有尺寸的图标全部添加到AppIcon中了,如图1-4所示。
图1-4 为项目添加所有应用程序图标
1.1.2 为项目添加预定义颜色
在Assets.xcassets中,我们不仅可以为应用程序添加图片素材,还可以为其定义一些常用的颜色。在本项目中,我们会频繁使用阴影效果,所以接下来让我们为项目设置一些颜色。
在Xcode左侧的项目导航面板中确认当前选中的是Assets.xcassets,在右侧编辑区域的底部找到加号(+)按钮,然后在弹出的快捷菜单中单击Color Set选项,一个全新的白色颜色集就会出现在项目之中,如图1-5所示,修改该颜色集的名称为ColorShadow。
图1-5 为项目添加预定义颜色
在ColorShadow中一共有两个颜色块,一个用于任意模式(Any Appearance),一个用于深色模式(Dark Appearance),它们现在都是白色,让我们将两个颜色块的颜色修改为黑色,透明度为60%。
选中Any Appearance颜色块,然后单击Xcode右上角的显示/隐藏检视窗(Hide or Show the Inspectors)按钮,通过它打开Xcode最右侧的属性检视窗。在Color部分将Content设置为sRGB,将Input Method设置为Floating point(0.0-1.0),将红色、绿色、蓝色的颜色滑块均设置为0,最后将颜色透明度(Opacity)设置为60%,如图1-6所示。
图1-6 设置预定义颜色和透明度
设置好Any Appearance模式下的颜色后,我们还可以通过复制/粘贴的方式,将该颜色效果直接复制到Dark Appearance颜色块上。
接下来,我们还需要添加另外14种预定义的颜色。打开“项目资源/Colors”文件夹,将其中的所有配色文件夹都拖曳到Assets.xcassets中。选中包括ColorShadow在内的15种颜色集,右击鼠标,在弹出的快捷菜单中单击Folder from Selection选项,并将文件夹名称修改为Colors,如图1-7所示。
图1-7 导入其他的预定义颜色并将所有颜色组织到Colors文件夹中
1.1.3 为项目添加图片素材
除了必要的颜色,我们还要将“项目资源/人物”里面的图片拖曳到Assets.xcassets中,形成7组独立的图片集(Image Set)。
接着,把所有的人物图片组织起来,选中所有的图片,右击Folder from Selection选项,将文件夹命名为Developer,如图1-8所示。
图1-8 导入图片素材
最后,将“项目资源/启动画面”里面的launch-screen-image.svg矢量图和launch-screen-color.colorset颜色集拖曳到Assets.xcassets中,为这两个素材创建一个新的文件夹,将其命名为LaunchScreen。我们将利用这两个素材制作应用程序的启动画面。
因为导入的launch-screen-image是矢量图片,所以我们还需要在Xcode中多做一项工作。在LaunchScreen文件夹中选中该图片,在右侧的属性检视窗中的Image Set部分勾选保护矢量数据(Preserve Vector Data)选项,如图1-9所示。
之所以这样做,是因为从iOS 8开始,我们可以在Xcode中使用矢量图,但是Xcode会将矢量图编译为固定大小的静态图像使用。这相当于矢量图在程序运行时不管是放大还是缩小都会发生图像失真的情况。
图1-9 设置矢量图的缩放保护特性
因此,我们需要在Assets.xcassets属性检视窗中勾选“保护矢量数据”选项。选中该选项后可以确保Xcode在编译的二进制文件中保存矢量数据的副本。这样,在运行的时候无论是在代码中还是在Storyboard场景中,都可以自动对矢量数据进行缩放,在应用中输出矢量图像,不会发生图像放大或缩小时失真的情况。
至此,我们已经完成了素材资源的添加工作。如果你愿意,那么可以通过<command+R>组合键在iOS模拟器中编译并运行项目,效果如图1-10所示。现在,FirstApp运行以后只会显示一个白底外加一行“Hello,world!”文本的视图界面,但是在主屏幕上可以看到我们设置好的应用程序图标。
图1-10 在模拟器中运行后的效果