Swift开发——简单App设计
App的界面设计需要具有大量的图像并花费大量的时间，这样的应用不方便学习和交流，这里重点介绍SwiftUI界面元素的用法，通过简单App设计过程的讲解，展示图形用户界面应用程序的设计方法。
01、简单App设计
按照9.1节工程MyCh0901的创建方法，创建一个新的工程MyCh0902，此时工程管理器如图9-11所示。
■ 图9-11工程MyCh0902结构
在图9-11中，MyCh0902Tests和MyCh0902UITests下的文件是测试文件，PreviewContent下的文件为界面预览文件，这些文件不需要管理。Assets.xcassets为工程的资源管理文件，工程的图标、启动界面图像和各个界面元素的背景图像等均保存在其中。MyCh0902App.swift是程序启动入口文件；ContentView.swift文件是界面视图设计文件。
工程MyCh0902实现的界面功能如图9-12所示。
■ 图9-12工程MyCh0902实现的界面功能
在图9-12中，在Number One处输入一个数，在Number Two处输入另一个数，然后单击Compute按钮，将输入的两个数的和显示在Result处。
为了实现图9-12的功能，需要图9-11中的ContentView.swift文件，如程序段9-4所示。
程序段9-4文件ContentView.swift
在程序段9-4中，第3~10行为结构体ContentView，服从协议View，实现了View协议的计算属性body，body的类型为服从View协议的模糊类型。在body中有一个按列摆放界面元素的视图VStack，其中，第6行“MyView()”创建了一个MyView结构体实例。MyView结构体如第12~64行所示。
MyView结构体是自定义的结构体，其中完成了界面的设计和数据处理。
在MyView结构体内部，第14行“@State private var textOne:String=" "”定义私有属性textOne，“@State”表示该属性不需要使用mutating方法就可以读写。第15行“@State private var textTwo:String=" "”定义私有属性textTwo。第16行“@State private var textRes:String=" "”定义私有属性textRes。上述三个属性均为字符串类型，用作TextField和Text控件的显示文本。
第17~51行为计算属性body，其中放置了一个VStack视图(第19~50行)，VStack视图是一个容器，将其中的控件按列排放，其摆放了三个HStack视图，HStack视图将其中的控件摆放在一行：①第一个HStack视图中放置了一个Text控件和一个TextField控件，如第22~26行所示。其中，Text控件显示蓝色的文本“Number One:”(第22~23行)，TextField控件是文本编辑框，标签为Number One，显示的文本为textOne，文本颜色为绿色，控件带有边框(第24~25行)。②第二个HStack视图中放置了一个Text控件和一个TextField控件，如第27~32行所示。其中，Text控件显示蓝色的文本“Number Two:”(第28~29行)，TextField控件是文本编辑框，标签为Number Two，显示的文本为textTwo，文本颜色为绿色，控件带有边框(第30~31行)。③第三个HStack视图中放置了两个Text控件、一个Spacer控件(用于分隔两个控件的空格控件)和一个命令按钮Button控件(第34~48行)。其中，第一个Text控件显示橙色的“Result:”文本，宽度为60，左对齐，如第34~36所示；第二个Text控件显示紫色的文本txtRes，宽度为140，高度为30，右对齐，边框为蓝色，如第37~40行所示；Button按钮显示红色的字号为20的文本Compute，带边框，背景色是透明度为0.1的橙色，宽度为150，控件右对齐，单击Button控件将调用calc方法，如第42~47行所示。
第50行“.frame(minWidth:0, maxWidth:.infinity, minHeight:0, maxHeight:.infinity, alignment:.topLeading)”设置VStack视图占据它所在的主视图(即第5行的VStack视图)，且其中的控件摆放顺序为从顶至底。
第52~63行为calc方法，当单击Button控件时将调用该方法。第54行“let one=String(textOne.filter {!［" ", "＼t", "＼n"］.contains($0)})”去掉textOne字符串中的空格、Tab键和回车符，赋给one；第55行“let two=String(textTwo.filter {!［" ", "＼t", "＼n"］.contains($0)})”去除textTwo字符串中的空格、Tab键和回车符，赋给two。第56~62行为两层嵌套的if结构，使用了可选绑定技术，将one转换为Double型，赋给a(第56行)；将two转换为Double型，赋给b(第58行)；第60行“textRes=String(format:"%.2f", a+b)”将a与b的和转换为字符串赋给textRes，显示在第37行所示的Text控件中。
在进行SwiftUI程序设计时，有以下几点注意事项。
(1) 每个控件都有一些属性，设置这些属性使用类似于“.foregroundColor(Color.blue)”的方法，但在实际编程时，可以直接借助Inspector窗口可视化地设置，Inspector窗口位于Xcode开发界面的最右侧。例如，当单击程序段9-4的第22行时，Inspector窗口的显示内容如图9-13所示。当单击不同的界面元素时，Inspector窗口将显示该界面元素对应的属性(称为Modifiers)，Inspector称为属性设置器。
■ 图9-13Text控件的Inspector窗口
由图9-13可知，Text控件相关的显示属性均列在Inspector窗口中了。例如，在图9-13中，在Font一栏中的Weight项(旁的下拉列表框)中选择Bold(图9-13中为Inherited，表示使用其父类的字体样式)，则在第22行和第23行之间，自动添加“.fontWeight(.bold)”。每个控件的属性显示和代码中输入的属性有对应关系。在实际程序设计时，一般会先在程序代码中列出界面元素的名称和属性，然后再借助界面元素的Inspector窗口进行可视化配置。
(2) 通过工程MyCh0901和MyCh0902可知，工程中“工程名App.swift”样式的程序文件的内容不需要改动，但是文件名可以重新命名。例如，在工程MyCh0902中，MyCh0902App.swift文件的内容不需要改动，但是文件名可以重新命名为MyApp.swift。
(3) 通过工程MyCh0901和MyCh0902可知，工程中ContentView.swift文件是界面设计文件，一种更通用的做法是在工程中新建一个文件，命名为MyView.swift(文件名随意选取，与其中的结构体名没有关系)。针对工程MyCh0902，添加的MyView.swift工程管理器如图9-14所示。
■ 图9-14新工程MyCh0902的工程管理器
在图9-14中，添加了新的程序文件MyView.swift，将程序文件ContentView.swift中的结构体MyView移动到文件MyView.swift中，并在MyView.swift头部添加import SwiftUI。这样界面设计的全部工作都由MyView.swift完成。如果把ContentView.swift文件中的ContentView_Previews结构体也移动到文件MyView.swift中，则编辑MyView.swift程序时可以看到预览界面。这样处理后的ContentView.swift的代码如程序段9-4的第1~10行所示，后续工作无须改动这些代码； 或者，将这些代码修改为如下形式：
这样，在ContentView结构体的计算属性body中可以直接创建结构体MyView的实例，实现界面的显示。
(4) Swift语言是Apple推出的替换Object-C的程序设计语言，SwiftUI也是Apple主推的界面设计方法，它与经典的StoryBoard方法各有特色，Apple建议使用SwiftUI，SwiftUI的界面元素属性和方法处理更具人性化。但是，优秀的用户界面需要使用大量美观的图像，SwiftUI的大部分界面元素可以指定背景图像，有些甚至可以指定动画图像。
- 点赞
- 收藏
- 关注作者
评论（0）