iOS 开发 | SwiftUI 基础:Text + Stacks + Image + MapKit
作者:Aaron Dean,日期:2020 – 04 – 17
1. SwiftUI简介
SwiftUI:使用更少的代码,写出更好的应用。
SwiftUI 框架采用声明式 Swift 语法, 提供了用于声明APP用户界面(UI)的视图(views)、控制(controls)和布局结构(layout structures)。SwiftUI 提供诸如事件处理(event handler)程序,来处理用户点击、手势和其他类型的输入,也提供了相应的工具来管理数据流(Data Flow)。我们知道,APP模型和用户界面的视图和控件之间存在数据流。
你可以创建遵循 View 协议的自定义视图,并将它们与 SwiftUI 视图组合在一起,用来展示文本、图像、使用堆栈的自定义图像、列表(list)等。另外,你可以使用修饰符(modifiers)来渲染内置视图(built-in views)和自定义视图或增强交互性。并且,这些用于上下文( context )和展示(presentation)的视图和控件可以在多个平台共享,如 Mac、iPhone 和Apple watch等。
目前,SwiftUI 还需要与其他框架一起使用。你可以将 SwiftUI 视图来自与 UIKit、AppKit 和 WatchKit 等框架中的对象集成,以实现特定平台上所需的功能。你也可以在 SwiftUI 中自定义辅助功能支持,并针对不同的语言、国家或地区实现APP界面的本地化。
Swift 提供了实时预览模式,也就是说,当你修改设计时,Xcode 能够实时反馈修改之后的效果。这样,开发效率是不是就提高了许多?
2. 新建项目
新建项目的三种方式:
- 打开 Xcode,点击“Create a new Xcode project”
- 打开 Xcode,选择“File > New > Project”
- 如果你的 Xcode 已经打开,同时按下“ ⇧ + ⌘ + N ”
选择 iOS系统下的单视图应用(Single View App)模板,点击“Next”。
填写应用名称(Product Name)、开发者信息,并选择 SwiftUI 构建UI,点击“Next”。
选择项目文件存放的位置。
项目创建完成。
在项目导航区,选择 ContentView.swift 文件,新建项目后出现的就是下面的样子,import 关键词用于引入框架。点击画布的“Resume”或同时按下快捷键“⌥ + ⌘ + P”显示(刷新)预览,画布上会打印出“Hello, World!”文本。点击画布上视图旁边的“Live Preview”可实时预览视图的改变,你可以尝试修改 Text 修饰符里的文本,看看实时预览的效果。比如,你删除“Hello,”,画布里会立即刷新,只显示“World!”。如果画布没显示,选择“Editor > Canvas”或使用快捷键“⌥ + ⌘ + Enter”打开,或者你想隐藏画布,也可以使用这一快捷键。
3. Text View
在SwiftUI 中通过调用被称为修饰符(modifiers) 的方法自定义视图,修饰符包装视图以更改其显示或其他属性,每个修饰符都会返回一个新视图,因此通常将多个修饰符垂直堆叠在一起使用。
具体来说,你可以通过在代码编辑区修改代码、使用 inspector 或直接从库 (Library )将视图控件和修饰符拖到画布上来添加修饰符。无论哪种方式,代码都会更新。你可以点击 Xcode 右上方的“+” 或使用快捷键“⇧ + ⌘ + L”调出库(Library)。
比如,我可以在文本 Text( ) 后通过点语法(.语法)修改文本的字体、文本颜色、背景颜色、边框大小和间隙。
效果:
4. 使用 Stacks 组合视图
创建 SwiftUI 视图时,你可以在视图的 body 属性中描述视图的内容、布局和行为。但是body 属性遵循“some VIew”,body 属性仅会返回某个单一视图。所以为了使多个视图能够显示,你可以在SwiftUI中 使用 HStack、VStack、ZStack 来组合多个视图。“H”代表水平,“V”代表垂直,“Z”代表在垂直于屏幕的方向上(从后向前)对视图进行堆叠,某视图对应的代码越往后,该视图越往前显示。比如,在下面的示例代码中,用一个 HStack 将你好”和“世界”两个文本“在水平方向组合,它们之间的 “spacing”(间隔)为 20;然后,再将 HStack 和“通过 Stacks 组合视图”文本视图嵌入一个VStack,完成两者的垂直布局。在最外层,是一个 ZStack,使用 ZStack 能使视图在Z(即垂直于屏幕) 方向进行堆叠。可以看到,ZStack年能够是试图从后往前堆叠,即代码越往后的部分越往前显示。这样,我就给整个 VStack加了一个水印:SwiftUI。
效果:
5. Image View
准备好图片并将其拖入项目的“Assets.xcassets”文件中,接下来看一下如何自定义一个 Image View。新建一个叫“CircleImageView”的 SwiftUI View:⌘ + N,选择“SwiftUI View”,点击“Next”后填写文件名称,然后将 Text( )换成 Image( )。
使用以下修饰符来渲染和布局图片:
- 使用修饰符 resizable( )让图片完整的出现在屏幕中。
- 显示尺寸:使用修饰符 frame( )为图片定义显示的尺寸,frame 是一个容器。
- 裁剪图片:使用修饰符 clipShape(Circle( ))(裁减成圆形)
- 添加阴影和描边:使用修饰符 overlay( ) 和 shadow( )
- 调整位置和边距:使用修饰符 offset( ) 和 padding( )
效果:
6. 引入MapKit
使用快捷键“⌘ + N”新建一个 SwiftUI 视图:MapView。使用 import 语句引入 MapKit 后,你就可以开始创建视图了,然后通过使用 MapKit的MKMapView 类来渲染地图。为了能够在 SwiftUI 中使用 UIVIew 子类,MapView需要遵循 UIViewRepresentable协议。UIViewRepresentable协议要求添加两个方法:makeUIVIew (context: )用于创建 MKMapView,updateUIView(_: context : )。本例使用广州塔的坐标(纬度:23.1092,经度:113.319147)。示例代码和效果如下:
7. 使用 VSTack 和 HStack 组合 Text / Image / Map View
本文在简书、鱼乐自学(网站)、微信公众号(扫描二维码)同步更新,欢迎访问。如果本文对你有用,欢迎收藏、赞赏或转发分享,转载或其他用途等请遵循CC BY 4.0协议。