When a user starts an app for the first time, a section of the app function description page will often appear in the client app to 过渡help users quickly understand and familiarize themselves with the app's basic functions and highlights.
The introductory page is the first window for users to understand the product and can give users the first impression.
A good guide page can well convey product design concepts and product design tonality, and it is also a good window for companies to convey corporate culture. Of course, it is also an essential training project for developers.
Next, we will also use 10 minutes to build a bootstrap interface layout.
Page Analysis - Element Composition
The guide page is often composed of 3 to 5 sliding pages. The design content of the guide page is relatively standardized and unified, and it usually consists of pictures, description text, and guide buttons. When the guide page slides to the last page, the user can click the guide button to enter the landing page or the home page.
- Bootstrap image: use the Image component, keeping its fixed aspect ratio;
- Guide text: use the Text component, set the font color, etc.;
- Guide button: use the Image component, refer to Apple's official SF Symbols icon library icon;
After considering the overall structure, the vertical layout can be used for a single page layout, and this is the way to go 图片>文字>引导按钮.
Practical Programming - Creating Projects
Open the Xcode development tools, click Create a new Xcode project, and name the new project GuidePage, as shown in the following pop-up window:
After naming the project, specifying the save path, a SwiftUI project is created.
Practical programming - guide picture
Consistent with the previous chapter for importing the background image of the login page, click the file in the view toolbar Assets.xcassets, click the "+" icon at the bottom, and select Import, as shown in the following pop-up window:
This guide page needs to build 4 pages, so 4 guide page pictures are required. In addition to clicking the "+" icon and selecting Import to import local images, you can also select multiple images in the local folder and drag them into the intermediate resource file for import. Both methods can be used in actual development.
After importing the file, the following pop-up window will appear:
当然别忘了给导入的图片重命名，方便更好地找到图片。图片资源导入成功后，回到ContentView文件，多张图片下，可以使用图片数组的方式将导入的图片创建在一个图片数组中，代码如下：
let imageModels = ["image001", "image002", "image003", "image004"]
复制代码let为声明常量的方法，imageModels为声明的对象，使用赋值运算符“=”给声明的对象赋值。数组的符号为“[]”，由于图片在SwiftUI引用的方式为字符串类型，因此数组内的元素为多个字符串元素，使用“,”隔开。
SwiftUI声明式语法的魅力之处在于，我们声明的对象imageModels可以自动根据赋值的内容确定其类型，省略了每次都需要指定类型的编程步骤。
我们使用Image组件展示imageModels图片数组中的图片看看效果，代码如下：
struct ContentView: View {
let imageModels = ["image001", "image002", "image003", "image004"]
var body: some View {
Image(imageModels[0])
.padding()
}
}
复制代码Image组件引导imageModels图片数组的内容，使用[]进行索引，而计算机的索引是由0开始，因此0代表imageModels图片数组第一个元素，也就展示了第一张图片。
可以看到图片尺寸已经超出了屏幕可见范围，结合上一章内容所需，需要设置图片修饰符让Image内容展示在屏幕范围内，如下代码所示：
Image(imageModels[0])
.resizable()
.scaledToFit()
复制代码resizable修饰符可对Image图片对象进行缩放，scaledToFit修饰符在缩放的基础上对Image图片对象设置保持其宽高比，避免图片拉升变形。
实战编程-引导文字
引导文字和引导图片具有一一对应关系，每一张引导图片对应一段引导文字，因此也可以使用数组的方式创建文字数字再引用，如下代码所示：
let textModels = ["勤测体温","勤加消毒","勤洗双手","出门戴口罩"]
复制代码引导文字和引导图片的布局方式为垂直布局，这里可以使用到VStack布局容器，并可使用文字修饰符对文字进行美化，如下代码所示：
VStack(spacing: 20) {
Image(imageModels[0])
.resizable()
.scaledToFit()
Text(textModels[0])
.font(.title)
.bold()
}
复制代码实战编程-引导按钮
引导按钮本质上也是一张图片，与常规图片类型不同，它是一种图片图片。我们可以直接导入引导按钮的图片，当然为了保持图标的统一性，Apple官方提供了官方图标库供开发者使用，无需导入图片，即可直接使用引用Apple官方的SF Symbols图标库图标。
SF Symbols图标库图标可以直接使用Image组件调用，与常规图片对象引用不同，需要使用systemName指定为系统图标类型，如下代码所示：
Image(systemName: "arrow.forward.circle")
.font(.largeTitle)
复制代码实战编程-轮博滚动
单张引导页的样式我们基本完成了，要使得引导页可以滑动切换，这里需要使用到一个新的组件TabView，TabView组件是SwiftUI提供的切换视图组件，使用方式如下：
TabView {
//代码块
}
.tabViewStyle(PageTabViewStyle())
.edgesIgnoringSafeArea(.all)
复制代码由于要实现滚动，那么在TabView视图的基础上，还需要使用tabViewStyle修饰符进行修饰，需要使用PageTabViewStyle样式。并且视图需要铺满全屏，使用edgesIgnoringSafeArea修饰符去掉所有安全区域。
视图内容部分，之前都是使用数组的索引方式，这只能使用到1个数据，要想引用所有数据，需要使用到ForEach循环函数，代码如下：
TabView {
ForEach(imageModels.indices, id: \.self) { index in
VStack(spacing: 80) {
Image(imageModels[index])
.resizable()
.scaledToFit()
Text(textModels[index])
.font(.title)
.bold()
Image(systemName: "arrow.forward.circle")
.font(.largeTitle)
}
}
}
.tabViewStyle(PageTabViewStyle())
.edgesIgnoringSafeArea(.all)
复制代码ForEach循环的方法遍历imageModels数组中的数据，在ForEach循环方法中，indices获得数据的范围，imageModels.indices等同于0..imageModels.count。结合TabView组件，如此，便实现了引导页的遍历和滚动效果。
最后，当引导页滚动到最后一个页面时，引导按钮需要切换变成引导点击进入首页/登陆页的按钮，我们可以使用if判断语句，若当前引导页为最后一张，则修改引导按钮为指定的按钮，可以使用last获得数组中最后一个元素，代码如下：
if imageModels[index] == imageModels.last {
Button(action: {}) {
Text("立即体验")
.font(.system(size: 17))
.bold()
.frame(minWidth: 0, maxWidth: 120)
.padding()
.foregroundColor(.white)
.background(.green)
.cornerRadius(8)
}
} else {
Image(systemName: "arrow.forward.circle")
.font(.largeTitle)
}
复制代码整体效果-预览
点击模拟器顶部的“运行”图标，尝试拖动页面，效果如下：
本章小结
In this chapter, we have intensively learned the use of Image components and Text components, and learned to use systemName to refer to Apple's official icon library icons. In addition, we also learn two new components, TabView, switch view containers and ForEach loop function. The ForEach loop function also involves how to use the index and get the last element.
In general, there are many new knowledge points. I hope you will digest it well and learn better.
Saying it a thousand times is not as good as knocking it once with your hands. Once your brain understands, you have to learn it with your hands. Come and try it~
In the next chapter, we will learn more about SwiftUI projects and build one project after another. Please keep looking forward to it~
Copyright Notice
This article is the first signed article of the rare earth nuggets technology community. Reprinting is prohibited within 14 days, and reprinting is prohibited without authorization after 14 days. Infringement must be investigated!