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协议


参考资料:苹果开发者文档 – SwiftUI Tutorials

文档协议:CC BY 4.0(共享 – 演绎 – 署名 – 不得附加限制)