专栏首页逆锋起笔面向所有人的 UI 编程 :透过点按弹窗初尝 SwiftUI

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

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

本文是 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 中直接拖出来用,你要做的只是玩拼图把它们拼在一起拼出你想要的功能。关注公众号 逆锋起笔,回复 pdf,下载你需要的各种学习资料。其中 View 表示一个视图,比如我们在手机上看到的一个滑条,一张图片,一个列表等种种,都叫做视图;而 Modifier 则是修饰器,它的作用是为视图增加功能,比如圆角,动画,阴影,边际,背景等等。下图就是它们在 Xcode 中的预设。

写 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 的解释若你不熟悉编程可能会有点晕,没关系,我会在其它文章详细讲解。

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

写在文后

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

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

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

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

本文分享自微信公众号 - 逆锋起笔(readdot),作者:干货分享☞

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 几大 Git 平台仓库被劫,黑客欲勒索比特币

    攻击于5月3日开始,包括 GitHub、Bitbucket 和 GitLab 在内的代码托管平台都受到了影响。

    逆锋起笔
  • 一些恶心的代码片段

    逆锋起笔
  • 作为一个程序员,你了解 win 上有哪些必装的软件吗

    关于 win 的一些基础必知内容之前已经分享过,没有看过的可以戳此处→Windows 使用之那些你还不知道操作

    逆锋起笔
  • 基础篇章:React Native 之 View 和 Text 的讲解

    (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 从今天开始我们进入基础组件也就是一些简单控件...

    非著名程序员
  • 动手学深度学习(一)——逻辑回归(从零开始)

    版权声明:博客文章都是作者辛苦整理的,转载请注明出处,谢谢! https://blog.csdn....

    Tyan
  • CEO 实话实说:我需要这样的 CTO

    文章原创首发于微信公众号「 TGO 鲲鹏会」,原文地址:CEO 实话实说:我需要这样的 CTO

    TGO鲲鹏会
  • NetBIOS 计算机名称命名限制 长度限制可以使用的字符不可以使用的字符保留字符

    最小长度是 1 最长长度是 15 因为默认是 16 字符,但是微软使用最后一个字符作为后缀

    林德熙
  • JVM笔记-后端编译与优化

    前面分析了 JVM 的前端编译器 Javac,本文分析后端编译器:即时编译器(JIT 编译器)和提前编译器(AOT 编译器)。

    WriteOnRead
  • WOW小地图生成

    逍遥剑客
  • 唯品会特卖秒杀系统的架构设计和实战全集(艾编程Java架构师视频教程)

    【学完本节课你将掌握哪些点】 1. 电商平台秒杀系统的由来; 2. 单机十万级别qps的秒杀系统的架构和设计; 3. 如何使用docker快速搭建中间件服...

    艾编程

扫码关注云+社区

领取腾讯云代金券