面向所有人的 UI 编程 :透过点按弹窗初尝 SwiftUI

王禹效· 2020-09-11
本文来自 少数派 ,作者 王禹效

试想你是一名美术,完全不了解程序。而你眼前只有一位盲人程序员,你想让他帮你实现这个程序,你会怎样告诉你的程序员你想要的效果?

本文!

本文是 SwiftUI 开发教程中的一篇,我们将一起探究上述问题的答案。若你有兴趣学习 iOS 应用程序开发,又或者是想了解 iOS 程序是如何运行的,欢迎关注这一系列文章。我会频繁更新关于 iOS 程序开发的各种知识点和技巧。本系列全部文章少数派免费分享,源码购买见评论。

什么是点按弹窗?

在更新 iOS 13 或者 iPadOS 13 后,你会发现长按许多软件图标都会出现如下弹窗,比如设置内的快捷选项允许你快速更改电池设置等等。点按弹窗的体验并没有止步于此,使用过新系统一段时间后,你会发现这个点按弹窗渗透到了系统应用的方方面面。事实上,苹果在今年 WWDC 19 开发者大会中,推荐开发者将应用内弹窗安置在应用程序的方方面面,以保证 iOS 用户体验的一致性。

iOScontext
iOS 13 中的点按弹窗

在开始写点按弹窗之前,我们需要简单了解什么是 SwiftUI。简单来说,任何你在手机上看到的程序界面都叫 UI,也就是交互界面。在手机应用中,软件开发者会使用不同的技术来实现界面的显示,流行的界面语言比如 Flutter,就是闲鱼应用的交互界面语言。而对于苹果的设备,比如 Apple Watch,Mac,iPhone 或是 iPad,苹果在 2019 年推出的官方 UI 编程语言则是 SwiftUI。SwiftUI 集众家之长,具有诸多优秀特性,可以预见它将会出现在诸多应用程序中。若你有兴趣,我会在其它文章中详解 SwiftUI,本文只着重讲其中弹窗的写法与逻辑。

你会怎样描述一个程序?

本文我将用如下图中的一个例子来展示如何设置点按弹窗。下图中程序的功能很简单:长按这句名言后,会出现点按弹窗,你可以点击复制按钮将这句话复制到系统剪贴板中。

Screen Shot 2019-07-30 at 12.52.52 A

试想你是一名美术,完全不了解程序。而你眼前只有一位盲人程序员,你想让他帮你实现这个程序,你会怎样告诉你的程序员你想要的效果?

也许你会这样和他说:

我这个程序上有一段名人名言,中英文版,上面一行是「天助自助者」,下面是「God helps those who help themselves」我希望它能被点按选中,选中的时候一定注意中英文两句话要一起被选中,而且上下左右请留出边距;对了,选中后要弹出一个选项,左边是复制,右边是一个复制的图标;啊,对了对了,英语字体最好是圆体字,而且两段文字都要加粗,就是小标题加粗的那种感觉。

那么为什么我要说这些呢?因为 SwiftUI 的设计思路正是描述性编程语言,你将上面这段话稍微整理一下,就是 SiwftUI 的写法。比如下面这段文字就是我整理好的 SwiftUI 代码:

ArtboardSwiftUI 的实现方法

开个玩笑,我们还缺一步,把这段文字翻译成 SwiftUI 的写法就行了。

透过 SwiftUI 语法了解如何设置点按弹窗

这个功能的全部实现代码如下,我会在下文中逐步讲解每一段代码的用途。

Screen Shot 2019-07-30 at 1.05.01 ASwiftUI

SwiftUI 由两类代码组成,分别是 View 和 Modifier。如下图所示,这两类代码都可以在 Xcode 中直接拖出来用,你要做的只是玩拼图把它们拼在一起拼出你想要的功能。其中 View 表示一个视图,比如我们在手机上看到的一个滑条,一张图片,一个列表等种种,都叫做视图;而 Modifier 则是修饰器,它的作用是为视图增加功能,比如圆角,动画,阴影,边际,背景等等。下图就是它们在 Xcode 中的预设。

7.9” iPad mini
Xcode Library

写 SwiftUI 得过程,实际上就是将一个个最基本的 View 像滚雪球一样越包越大的过程,你把一个个基础的视图和修改器用一个更大的视图包在一起,用修改器修改更大的视图,就能实现复杂的功能。现在我们来观察上述代码的结构,你会发现整段代码由一个名叫 VStack 的视图和众多 Modifier 组成。

Screen Shot 2019-07-30 at 1.21.46 Athe Big Picture

那么 VStack 是什么呢?它的里面为什么会包着两个 Text 呢?其实 VStack 和 Text 本质上都被归为 View 这一类,VStack 的作用是将两段文字包在一起以便于被整体选中。而后面的全部代码都是这个 VStack 视图的修饰器,为其添加颜色,边距,以及点按弹窗功能。其中,上图的例子里的 View 又包含了两个更小的 Text View,每个 Text View 又被 .font 的字体修改器修改。

说了那么多你可能已经晕了,那么我们来对比看看第一段,仔细观察下面这张图。发现了吗?纵向排列的 View 在 SwiftUI 里叫做 VStack,它用一个花括号 {包住里面的内容};而文字的 View 在 SwiftUI 里叫做 Text。中文里圆括号中的各种要求,正是 SwiftUI 里的各种修改器,语法结构是 「.修改器的名字」。比如下图中我们想修改为小标题的字体,就写 .font(.headline)。

Screen Shot 2019-07-30 at 1.54.41 A
comparison

是时候攻克更多的内容了,我们来看看下面这段代码,我先不说你看看。对了,正是这样,这段代码中包含三个针对 VStack 的修改器,分别是正文设置为白色 .foregroundColor(Color.white),四周加边距 .padding(),和显示点按菜单.contextMenu()。

Screen Shot 2019-07-30 at 2.03.33 A3 modifiers

终于聊到了点按菜单的实现方式了,点按菜单是什么呢?它的实质就是一个 View,和其它任何 View 并无二致,因此我们需要在 contextMenu 里放一个 View 即可。而点按菜单,顾名思义,就是一个按钮,那么我们设置一个 Button View。在按钮中,我们需要设置两个点:按钮的动作,也就是 action,里面的两行代码会将名言文字复制到剪贴板;另一个点是下面的 HStack ,表示一个水平排列的 View。其左边是一个文字,右边是一个图标。这里关于 Button 的解释若你不熟悉编程可能会有点晕,没关系,我会在其它文章详细讲解。

Screen Shot 2019-07-30 at 2.11.33 A
dark view ? yes 

在上图中,你会发现背景变成蓝色的了,为什么?因为我写文章的时候已经是晚上了,手机自动切换到了夜间模式,我们的应用程序也完成了自动切换。这是如何做到的呢?我会在其它文章中详细讲解。

扩展阅读

我之前写过部分关于程序开发的文章,若你有兴趣可以去看看,它们的内容依旧很新值得参考。

难度-低:应用程序开发:使用苹果官方模版制作应用图标 - Sketch + Xcode

难度-低:善用学习资源,你也可以成为 iOS 独立开发者

难度-中:Swift: 巧用开源,查看原始代码

写在文后

若你耐着性子读完本文,你可能会发现我用来展示的代码多了个完全没用的 HStack,你可能会发现我没讲那个复制图标是哪来的,你可能会好奇这么多代码如何整理成更易读的小块。如果你是老手,你可能会好奇 contextMenu 如何用在 UIKit 上;如果你对编程零基础,你可能会发现用 SwiftUI 写程序界面和简单功能其实没那么难,无非就是对大白话的翻译。

若你想仔细的学习 SwiftUI 和苹果或安卓应用程序开发,欢迎在文末写下你想学习的内容,我会参考写文。若你因为文中的长代码而感到害怕,觉得程序员都是天才,脑子超好用能将这些代码一次性全写出来,不是这样的。比如上面代码中的例子,一开始你只有一个简单的思路,我要一句名言,能点按复制就行。于是乎你放下了一个文字的 View,写出来了觉得不好看,扔各种修饰器上去加颜色改字体加图标种种,雪球越滚越大你的程序也越加好看和拥有越多功能。SwiftUI 是一个全新的 UI 语言,别怕,在这里我们都是新手。

试想你是一名美术,完全不了解程序。而你眼前只有一位盲人程序员,你想让他帮你实现这个程序,你会怎样告诉你的程序员你想要的效果?

你会说,嗨,这么简单的事,用 SwiftUI 美术我自己就能写。