[Android開發學iOS系列] iOS寫UI的幾種方式

語言: CN / TW / HK

iOS寫UI的幾種方式

作為一個現代化的平臺, iOS的發展也經歷了好幾個時代.

本文講講iOS寫UI的幾種主要方式和各自的特點.

iOS寫UI的方式

在iOS中寫UI有多種選擇, 大的分類: 使用UIKit還是SwiftUI.

在使用UIKit的情形下, 還根據是否使用storyboard來區分.

  • UIKit:
    • 用storyboard.也叫Interface Builder.
    • 採用程式碼來寫UI, 手寫約束.
  • SwiftUI.

注意: 以上的幾種方式在專案裡可能是混合使用的, 所以建議都瞭解.

UIKit

UIKit是蘋果官方的framework, 其中包含了UI元件和各種基礎設施支援, 是傳統的iOS開發離不開的一套類庫. UIViewController就屬於UIKit.

用Storyboard

我們新建的專案, 如果不選SwiftUI, 都會帶一個main storyboard.

用Storyboard寫UI大致分為這幾步:

  • 在Storyboard中新增控制元件. 用Cmd + Shift + L可以撥出選單. 可以新增View或者新的View Controller.
  • 設定屬性, 約束. (側面面板, 右下角約束按鈕, 以及Ctrl+拖拽生成相對約束).
  • 需要有在程式碼中的互動:
    • 顯示Assistant View之後將對應的ViewController類程式碼同時顯示出來.
    • Ctrl + 拖拽 生成outlet(用於控制控制元件本身屬性)或者action(控制元件的點選事件).

(這一步也不是必須這樣做, 也可以先手寫出outlet程式碼, 然後拖拽連起來.)

優點: * 圖形介面編輯. * 可以不用build看到UI預覽效果.

缺點: 因為程式碼是一個xml檔案中track, 在團隊合作容易產生不好解決的衝突.

用程式碼寫View和約束(不用Storyboard)

首先, 在loadView()中設定view:

```swift override func viewDidLoad() { super.viewDidLoad()

  view = UIView()
  view.backgroundColor = .white

} ```

然後不斷地addSubview()進去.

其中子view可以是controller中宣告的欄位:

swift var myLabel: UILabel!

這裡加上感嘆號有kotlin中類似lateinit的作用, 否則會提示controller沒有init方法.

之後再新增Constraints.

優點: 都用程式碼寫, 歷史清晰, 衝突好解決.

缺點: 要用程式碼寫約束; 寫起來比較囉嗦; 執行之後才能看到實際的效果.

SwiftUI

SwiftUI是iOS新推出的宣告式的寫UI的方式, 可以類比Android的Jetpack Compose.

新建專案以後的Hello World大概長這樣:

App:

```swift import SwiftUI

@main struct MyApp: App { var body: some Scene { WindowGroup { ContentView() } } } ```

ContentView:

```swift import SwiftUI

struct ContentView: View { var body: some View { Text("Hello, world!") .padding() } }

struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } ```

優點: - 最新的技術, 符合未來發展的潮流(類比Compose, Flutter, React Native). - 使用方便簡單, 易上手. - Xcode的預覽和編輯功能都支援得不錯, 可以在屬性面板上直接新增或者編輯屬性, 有程式碼自動聯動. - 可以和UIKit的老程式碼互操作, 相容良好.

缺點: - 要求OS版本13及以上. - 因為整體的設計思路變為了functional programming, 所以舊程式碼遷移需要做一些設計方面的思維轉換, 並不是替換了一套UI庫這麼簡單. - 如何說服團隊使用.