面向所有人的 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 像滾雪球一樣越包越大的過程,你把一個個基礎的視圖和修改器用一個更大的視圖包在一起,用修改器修改更大的視圖,就能實現復雜的功能?,F在我們來觀察上述代碼的結構,你會發現整段代碼由一個名叫 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 美術我自己就能寫。


丰禾棋牌官网1369 pk10软件计划手机免费软件 600641股票行 甘肃11选五玩法图 青海快3规律破解 吉林省快三基本走势图 股票主要看什么 上海快3在线计划 山东体彩扑克三 福利彩票排列7结果 内蒙古十一选五任三遗漏