实战编程-程序图标
点击视图工具栏的Assets.xcassets
文件,我们发现有一个空的应用程序图标组选择AppIcon
,选中时将会出现多个不同尺寸的导入图标界面,如下页面所示:
我们将设计好的图标图片拖入到AppIcon对应尺寸的空白框
中,如图所示:
完成后点击“运行”,我们就可以在模拟器中看到带有设计图标的应用程序了,如下图所示:
实战编程-启动页
接下来,我们正式搭建启动页。Xcode开发工具制作启动页动画的方式有2种,一种是通过故事板和约束布局技术来创建启动动画,另一种是直接指定图片作为启动页。这里,我们为了更好地扩展性和编程灵活性,采用第一种方式构建启动页。
在Assets.xcassets
文件拖入3种尺寸的程序图标,并把最终的应用图标命名为logo,如下弹窗所示:
选择File > New > File
,选择LaunchScreen
,点击Next,如下弹窗所示:
Xcode开发工具将自动创建好一个故事板页面
,开发者可以直接在故事板中使用拖动的方式构建页面,这也是我在SwiftUI之前最喜欢的开发方式,使用故事板和极少的代码即可完成一个简单的静态页面。
点击顶部工具栏右上角的“+”按钮,选择之前导入到素材库的图片,将组件拖到视图中。再选择一个Label组件,双击修改文字为“连接你和世界”,将组件拖到底部,如下图所示:
元件放置在视图之后,还需要建立约束布局关系,才能保证在不同机型下组件的位置和大小不会发生偏移和形变。
建立约束的方式为选中单个组件,然后点击右下角的“添加布局约束”按钮,设置好组件相对距离,示例:Label文字,我们设置它距离底部60,距离左右间距20,文字排布为居中。同理,我们设置logo图片为固定展示尺寸,并且距离顶部距离为200,与视图垂直居中。
故事板和约束布局在这里就不展开讲了,后续也基本用不上这种开发方式。
创建好LaunchScreen内容后,我们在PageSettings应用主要设置页面
中设置启动画面为LaunchScreen
文件,如下图所示:
完成后,当我们每次打开App时,应用启动过程中都会加载启动页画面。
启用页是用户第一眼看到的视图页面,但仅限于应用程序被启用时展示。由于Apple独有的虚拟后台技术,及时应用程序挂至后台也是处于虚拟启用状态,因此不是每一次都能看到启动页。
接下来,我们在完成启用页,结合前两章的引导页、登录页的基础上完成应用程序页面之间的交互逻辑。
实战编程-页面准备
我们创建2个SwiftUI文件,右键,选择New File,选择SwiftUI文件,登录页命名为LoginView
,引导页命名为GuidePageView
。
并将前两章的代码复制到新创建的SwiftUI文件里,别忘了导入的本地图片也需要再导入到这个SwiftUI项目中。完成后如下图所示:
这时,我们就有了默认的启动页LaunchScreen
、引导页GuidePageView
,登录页LoginView
,首页ContentView
。