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

2019-09-03

JiangRen Mr

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

什么是点按弹窗?

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

 

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

你会怎样描述一个程序?

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

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

也许你会这样和他说:

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

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

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

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

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

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

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

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

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

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

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

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

扩展阅读

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

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

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

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

写在文后

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

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

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

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

 

本文章转载自奇点日报。

近期开课hot
logo

Follow Us

linkedinfacebooktwitterinstagramweiboyoutubebilibilitiktokxigua

We Accept

/image/layout/pay-paypal.png/image/layout/pay-visa.png/image/layout/pay-master-card.png/image/layout/pay-stripe.png/image/layout/pay-alipay.png

地址

Level 10b, 144 Edward Street, Brisbane CBD(Headquarter)
Level 8, 11 York st, Wynyard, Sydney CBD
Business Hub, 155 Waymouth St, Adelaide SA 5000

Disclaimer

footer-disclaimerfooter-disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。 JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议

© 2017-2024 JR Academy Pty Ltd. All rights reserved.

ABN 26621887572