SwiftUI 教學:如何建立星際大戰透視文字(Perspective Text)


如果你之前有使用過 UIKit,SwiftUI 的 Text 控制與 UIKit 中的 UILabel 非常相似。這是一個能夠顯示一 行或多行文字的視圖。這個  Text 控制無法編輯,不過對於在螢幕上呈現唯讀的資訊非常好用。舉例來說,你想要在畫面上呈現一個訊息,你可以使用 Text 來實作。

SwiftUI 框架已正式推出了大約五個月。 如果您仍未試用這個新框架,跟著本文一步一步做就可以創建你第一個 SwiftUI 程式。本教學將告訴你如何以 Text 來呈現資訊。你將會學到如何運用不同顏色、字體、背景與旋轉效果來自訂文字。

編者按:本文摘自《精通 SwiftUI》一書。如果你想更深入學習SwiftUI程式設計和下載完整程式碼,你可以從AppCoda網站購買完整電子版。

建立新專案來體驗 SwiftUI

首先,開啟 Xcode 並使用 Single View App 模板來建立一個新專案,輸入專案名稱,我設定為 SwiftUIText ,不過你可以使用任何的名稱。在組織名稱( organization name),你可以設定為你的公司或組織的名字。組織識別碼(organization identifier)是 App 的唯一識別碼,這裡我使用 com.appcoda,不過這裡需要填入你自己的內容,如果你有一個網站,則可以將網域名稱以倒過來寫的方式作為設定。要使用 SwiftUI 的話,則需要在User Interface選項勾選 SwiftUI ,點選 Next 並選取一個資料夾來建立專案。

swiftui-text-project

儲存完專案之後,Xcode 即會載入 ContentView.swift 檔,並顯示一個設計畫布( design canvas )與預覽畫布(preview canvas)。如果你沒有見到這個畫布,你可以至 Xcode 選單,並選取 Editor > Canvas 來啟用它。

Xcode 預設會在 ContentView.swift 上建立一些 SwiftUI 程式碼。不過,這個預覽畫布不會渲染(render)App 預覽畫面。你必須點選 Resume 按鈕才能看到這個預覽畫面。按下按鈕之後,Xcode 會依照你在模擬器選項(例如 iPhone 11 Pro)中的選擇來將預覽畫面渲染在模擬器中。為了讓程式編輯器與畫布能顯示,你可以隱藏專案導覽器(project navigator )與工具面板來釋放更多空間。

swiftui-xcode-preview

簡單文字的呈現

ContentView 所產生的簡單程式已經告訴你如何顯示一行文字。程式初始化一個 Text 並將要放的文字(例如 Hello World )作為參數來傳傳遞,顯示如下:

如此,預覽畫布即會在螢幕上顯示 Hello World 。這是建立一個文字視圖的基本語法。你可以任意變更文字內容,畫布會即時顯示變更的結果。

swiftui-coding-canvas

變更字體與顏色

在 SwiftUI,你可以呼叫一些方法,也就是所謂的修飾器(Modifiers )來變更屬性(例如顏色)。譬如說,你想要粗體字。你可以使用名為 fontWeight 的修飾器,並指定你想要的字體粗細(例如 .bold ):

你可以使用點語法(dot syntax)來存取修飾器。當你輸入一個點符號時,Xcode 則出現你可能會用到的修飾器或值。舉例來說,當你在 fontWeight 修飾器,輸入一個點符號時,你會見到不同的字體粗細選項,你可以選取 bold 來使用粗體字。如果你想要更粗一點,則可以選取 heavyblack

swiftui-change-text-style

透過 fontWeight 修飾器的呼叫,並選取 .bold 的值,它會回傳一個加上粗體字的視圖。 SwiftUI 有趣的是,你可以進一步串連其他修飾器。譬如說,你想要大一點的粗體字,程式可以修改如下:

因為可能會串連多個修飾器,我們通常會將以上的程式寫成如下的格式:

這個功能是一樣的,不過我相信你會發現到以上的程式更容易閱讀。我們將繼續在本書中使用這樣的程式寫法。

font 修飾器可以讓你變更字體屬性。在上面的程式中,我們指定使用 title 字體以放大文字。SwiftUI 內有幾個內建的字體樣式,包括 titlelargeTitlebody 等等。如果你想要加大字體大小,則可以將 .title 改成 .largeTitle

提示:你可以參考這份文件來找出所有 font 修飾器所支援的值。

你也可以使用 font 修飾器來指定字體設計,譬如說,你想要字體圓潤。你可以將修飾器撰寫如下:

這裏你指定使用系統字體,文字樣式為 largeTitle ,以及 rounded 設計。預覽畫布應該會立即對變更做出反應,並顯示圓潤的文字。

動態型態( Dynamic Type )是 iOS 依照使用者設定(設定 > 螢幕顯示與亮度 > 文字大小)而自動調整字體大小的功能。換句話說,當你使用文字樣式(例如 .title ),這個字體大小將會改變,你的 App 會依照使用者的偏好來自動縮放文字。

如果你想要使用一個固定大小的字體,你可以將程式修改如下:

這是告訴系統使用一個 20 點大小的固定字體。

如所述,你可以繼續串連其他修飾器來客製化文字。現在我們來變更字體顏色。你可以使用 foregroundColor 修飾器來完成,如下所示:

foregroundColor 修飾器接收 顏色 的值。這裡我們指定使用 .green,這個值是內建顏色,你也可以使用其他像是 .red.purple 等內建顏色值。

雖然我們比較喜歡使用程式碼自訂一個控制元件的屬性,你也可以使用設計畫布來編輯。按住 command 鍵不放,並點選文字來帶出彈出選單,選取 Inspect… ,然後你可以編輯 text/font 屬性。

使用自訂字體

預設所有顯示字體都是使用系統字體。如果你想要使用其他字體,你可以將以下這行程式:

以這行取代:

除了使用 .system ,以上的程式使用 .custom 並指定偏好的字體名稱。字體名稱可以在字體簿( Font Book)找到,你可以打開 Finder > 應用程式,並點選 字體簿 來開啟 App。

多行文字的處理

Text 預設支援多行文字,所以它可以顯示一段文字,而不需要使用任何其他修飾器,將程式以下面這段替換:

你可以將這段文字換成你自己的內容。只要確認內容長度夠長即可。做完變更後,設計畫布應該會渲染一個多行文字標籤。

要將文字置中對齊,插入 multilineTextAlignment 修飾器,並設定值為 .center 如下:

在某些情況下,想要限制固定的行數的話,你可以使用 lineLimit 修飾器。以下為例:

系統預設設定是截斷字尾。要修改文字的截斷模式,你可以使用truncationMode 修飾器,並設定它的值為 .head.middle ,如下所示:

變更完成之後,你的文字會如下圖所示。

先前我提到 Text 控制預設是顯示多行文字。理由是 SwiftUI 框架預設 lineLimit 修飾器 為 nil 的值,你可以將 .lineLimit 設定為 nil 來看一下結果:

設定間距與行距

一般預設的行距對大部分的情況而言已經夠用。如果你想要改預設的設定,你可以使用 lineSpacing 修飾器來調整間距。

如你所見,文字太靠近邊緣的左側與右側。要賦予更多間距,你可以使用 padding 修飾器,為文字的每一邊增加一些間距。在 lineSpacing 修飾器後面插入以下這行程式:

設計畫布現在的結果如下:

文字的旋轉

SwiftUI 框架提供了可以輕易旋轉文字的 API,你可以像這樣使用 rotateEffect 修飾器,並傳入旋轉角度:

如果你在 padding() 後面插入以上這行程式,你將會見到文字旋轉 45 度。

預設,旋轉動作會以文字視圖為中心來旋轉,如果你想要將文字以特定點來旋轉(譬如左上角),程式的寫法如下:

我們另外傳入 anchor 參數來指定旋轉點。

你不止可以進行 2D 旋轉, SwiftUI 提供一個稱作 rotation3DEffect 修飾器,可以讓你建立 3D 效果。這個修飾器有兩個參數:「旋轉角度」與「旋轉軸」,譬如你要建立透視文字特效,程式可以這樣寫:

只要一行程式,你就可以建立星際大戰透視( Star Wars perspective )文字:

你還可以插入以下這行程式來對透視文字建立陰影效果:

這個 shadow 修飾器將會對文字應用陰影效果,你只需要指定顏色與陰影半徑。另外,你也可以告訴系統 xy 值來指定陰影位置:

swiftui-star-war-perspective-text

本文小結

你喜歡以 SwiftUI 來建立使用者介面嗎?我希望你會喜歡,SwiftUI 的宣告式語法讓程式可讀性更高,且更容易理解。當你經驗更多之後,你只要在 SwiftUI 寫幾行程式碼就可以建立酷炫的 3D 樣式。

編者按:本文摘自《精通 SwiftUI》一書。如果你想更深入學習SwiftUI程式設計和下載完整程式碼,你可以從AppCoda網站購買完整電子版。此文由王豪勳翻譯,原文在 appcoda.com 刋登。


軟件工程師,AppCoda 創辦人。著有《iOS 13 App 程式設計實力超進化實戰攻略》、《iOS 13 App 程式設計實力超進化實戰攻略》以及《精通 SwiftUI》。曾任職於HSBC, FedEx等公司,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda,致力於iOS程式教學,產品設計及開發。

blog comments powered by Disqus
Shares
Share This