10 個 SwiftUI Libraries 為你大大提高開發速度!


本篇原文(標題:10 SwiftUI Libraries To Use In 2021)刊登於作者 Medium,由 Anupam Chugh 所著,並授權翻譯及轉載。

SwiftUI 真的改變了我們設計 iOS App,以及我們對 iOS App 的印象。SwiftUI 在 WWDC 2019 亮相後,Apple 引入大量新視圖、屬性包裝器 (property wrapper) 和客製化型別,進一步完善了其功能。

但是,宣告式 (declarative) 框架仍然處於起步階段。SwiftUI 的 bugs 令我們在開發時難以使用這些框架,而且 iOS App 的 SwiftUI 進階範例仍然很少。

不過,許多開發者還是加入了這個潮流,並構建了很多很酷的 SwiftUI 程式庫 (Library),讓我們可以加入到自己的 iOS App 中使用。

讓我們來看看一些好用的 SwiftUI 程式庫吧!

1. PermissionsSwiftUI

眾所周知,Apple 每年都會提高 App 的權限,像是引入大概位置存取 (approximate location access)、限制相片讀取權限、和 iOS 14 最新的限制廣告追蹤等。

這種有限制的透明度對消費者來說是福音,但對廣告商而言則十分頭痛。

這個程式庫包含了 Apple 預設樣式中全部 12 種 iOS 權限,讓你可以在 bottom sheet 輕鬆地切換選項。

Permissions-SwiftUI

你可以在任何視圖上設置 JMPermission 視圖修飾符 (view modifier),以顯示 Modal Sheet:

.JMPermissions(showModal: $showModal, for: [.photo, .microphone])

此外,我們還可以利用 setPermissionComponent,透過這個程式庫設置客製化權限文本、圖像、和圖標,向使用者提供更好的上下文 (context)。

2. Liquid

任何 App 都需要啟動畫面 (splash screen)。通常,開發團隊都會聘請設計師,來創作引人注目的設計。

幸運的是,我們有一個現成的 Swift Package 可以做到這一點。我們可以利用這個程式庫,簡單使用  Liquid() 客製化視圖,把這個液體流動動畫的視圖整合到 SwiftUI 界面中:

Liquid

3. FontAwesomeSwiftUI

不同的機構在 App 或網站中廣泛使用 FontAwesome 的圖標,其圖標是向量圖形,因此在調整大小時,也不會破壞圖標的畫質。

但是,這個套件只能讓我們從雲端即時更改其 Android、iOS、和 Web App 的圖標。

這個程式庫利用枚舉 (enum),把 FontAwesome 5 的圖標帶到我們的 SwiftUI App 中。以 iOS App 為例,我們只需要這樣做:

FontAwesome.register()

設置完成後,就可以如此在 SwiftUI Text 中設置向量圖形:

Text(AwesomeIcon.btc.rawValue)
    .font(.awesome(style: .brand, size: 20))
    .foregroundColor(.white)
FontAwesome-SwiftUI
圖片來源:Twitter/ Khoa

4. StepperView

Stepper 是 App 一個重要的元件,可以向使用者發送實時進度反饋。遺憾的是,SwiftUI 目前不支援本機 Stepper 視圖。

但是,這個程式庫提供 StepperView 開箱即用的支援,讓我們可以更加輕鬆地進行開發。我們可以使用客製化的指標視圖、型別、線條和對齊方式,快速創建垂直和水平的 Stepper。

StepperView

5. PopupView

與 Android 不同,iOS 早就沒有內置 Toast 了。雖然 iOS 14 中多了 “AirPods Connected” 的通知,但 Apple 生態系統基本上沒有這樣的 UI。

PopupView 這個程式庫就可以解決問題了。顧名思義,這個 Swift Package 可以讓我們在 SwiftUI 界面中顯示 toast 和 popup。

當中有以下的可選參數,讓我們用於客製化視圖:
  • type:toast、float、或 default
  • position:頂部或底部(在 default 情況下,它僅確定動畫的方向)
  • animation:客製化 popup 滑動的動畫
  • autohideIn:popup 消失的時間
PopupView

6. AlertX

Popup 與 Alert 對話框不同,前者不需要有按鈕,而且可以自動關閉。

如果你覺得 iOS 的 Alert 太沉悶,可以試著使用這個程式庫來增添新意。

AlertX 這個程式庫可以讓我們輕鬆在 SwiftUI 設置客製化 Alert,你可以作很多不同的設定,包括更改背景主題、或添加圓角、多個按鈕和動畫等。

只要一行程式碼就可以做到:

AlertX.Theme.wine(withTransparency: false, roundedCorners: true)
AlertX

7. ActivityIndicatorView

iOS 14 為 SwiftUI 帶來了不少改進。但是,它仍然沒有原生的 Activity Indicator。當然,你也可以使用 ProgressView 顯示一個不確定 (indeterminate) 的 loader。但是,它無法做很大程度的客製化。

這個 ActivityIndicatorView 程式庫就提供多種 SwiftUI 的 Loading Indicator。我們可以客製化自己喜歡的 Indicator,像是選擇類型、添加顏色和漸變等。

ActivityIndicatorView

8. MarkdownUI

我們都喜歡使用 Markdown 編輯器,來以標準語法 (syntax) 在網絡上編寫格式化的文本。

SwiftUI 正正缺少這個重要的工具。雖然我們可以透過 UIViewRepresentable 協定來使用 UITextView,但是如果有內置的 Markdown 編輯器就更好了。

這個程式庫就可以讓我們在 SwiftUI 中提供 Markdown。你可以設置粗體、斜體、行內程式碼 (inline code) 等,語法如下:

Markdown(
    #"""
    Make some words **bold** and other words *italic* with Markdown.

    ## Inline code
    Wrap them in backticks: {{EJS0}}.
    """#
)
MarkdownUI

如果客製化字體,我們可以使用 MarkdownStyle 視圖修飾符,來設置字體名稱和大小的標題和程式碼。

9. SlideOverCard

從螢幕底部彈出卡片的這種設計模式,現在越來越多開發者使用。這並不奇怪,畢竟這是 Apple 的 HomeKit 和 Wifi-sharing UI 中的預設模式。

SlideOverCard 這個程式庫可以把卡片設計帶到我們的 SwiftUI 界面。我們可以在輔助視圖 (Accessory View) 上使用 SlideOverCardViewslideOverCard 視圖修飾符,以及 displayExitButtondragEnabled、和 dragToDismiss 這些可選的布林值 (boolean) 參數。

SlideOverCard

10. SwiftUICharts

圖表是大部分 App 的重要元件。圖表不但可以提供賞心悅目的視覺效果,還可以用於顯示不同的數據,像是股票、加密貨幣、或是各種統計工具等。

這個程式庫可以讓我們在 SwiftUI App 中快速整合折線圖、垂直及水平的長條圖。而且,它還支援輔助使用 (Accessibility)。

SwiftUI-Charts

結論

在編程中有一句名言:「如果你不是想深入學習關於車輪的知識,就不要試著重新發明車輪。」這當然適用於程式庫。

當你要在短時間內構建一個複雜的專案時,現成的程式庫無疑可以助你提高開發速度,你也無需在別人解決了的事情上浪費時間。

我希望這些 SwiftUI 程式庫能夠激發你,讓你構建更多出色的 iOS App,甚至貢獻開源專案。

這篇文章到此為止,謝謝你的閱讀。

本篇原文(標題:10 SwiftUI Libraries To Use In 2021)刊登於作者 Medium,由 Anupam Chugh 所著,並授權翻譯及轉載。

作者簡介:Anupam Chugh,深入探索 ML 及 AR 的 iOS Developer。喜愛撰寫關於想法、科技、與程式碼的文章。歡迎到我的 Blog 閱讀更多文章,或在 LinkedIn 上關注我。

譯者簡介:Kelly Chan-AppCoda 編輯小姐。


此文章為客座或轉載文章,由作者授權刊登,AppCoda編輯團隊編輯。有關文章詳情,請參考文首或文末的簡介。

blog comments powered by Disqus
Shares
Share This