[Android開發學iOS系列] 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:

override func viewDidLoad() {
      super.viewDidLoad()
      
      view = UIView()
      view.backgroundColor = .white
}

然後不斷地addSubview()進去.

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

var myLabel: UILabel!

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

之後再新增Constraints.

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

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

SwiftUI

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

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

App:

import SwiftUI

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

ContentView:

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庫這麼簡單.
• 如何說服團隊使用.