Xcode 12 的 SwiftUI preview

Xcode 12 的 SwiftUI preview 變得更方便了，多了以下幾個新功能:

接下來讓我們以邱振哲溫暖的太陽歌詞為例，瞧瞧它令人愛不釋手的新功能吧。

struct ContentView: View {
    var body: some View {
        
        VStack {
            Image(systemName: "sun.max.fill")
                .font(.largeTitle)
            Text("""
                我只想做你的太陽 你的太陽
                在你的心裡呀 在你的心底呀
                不管是多遠的遠方 不要害怕我在身旁
            """)
        }
        
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

複製畫面的 Duplicate preview

點選 preview 畫面右上方的 +，複製 preview 畫面。

複製後 preview 的畫布順利出現兩個預覽畫面。

previews 裡有兩個 ContentView，被包在 Group 裡。

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

調整 preview 畫面的 Inspect Preview

點選下圖紅色圈圈標示的按鈕調整 preview 畫面。

• 設定 dark mode

將 Color Scheme 下的 Scheme 設為 Dark。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
            ContentView()
                .preferredColorScheme(.dark)
        }
    }
}

• 設定裝置機型

從 Preview 下的 Device 選擇機型，比方選擇 iPhone SE。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
            ContentView()
                .previewDevice("iPhone SE (2nd generation)")
                .preferredColorScheme(.dark)
        }
    }
}

• 設定名字

在 Name 欄位輸入名字。

• 設定尺寸

從 Preview 下的 Layout 設定。

• 選擇 Fixed

設定固定尺寸，比方橫向的 iPhone 11 Pro (landscape)，輸入寬 812，高 375。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
            ContentView()
                .previewLayout(.fixed(width: 812, height: 375))
        }
    }
}

• 選擇 Size That Fits

剛好顯示內容的大小。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
            ContentView()
                .previewLayout(.sizeThatFits)
        }
    }
}

• 調整文字大小的 Dynamic Type。

從 Dynamic Type 下的 Size 設定。

比方選擇 extraExtraExtraLarge。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
            ContentView()
                .environment(\.sizeCategory, .extraExtraExtraLarge)
                               
        }
    }
}

• 其它 modifier

我們可以在 preview 畫面加入各種 modifier，比方下圖的 Padding & Frame。

或是直接在 Add Modifier 裡輸入想加入的 modifier。

比方加入 Background。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
            ContentView()
                .background(Color.yellow)
        }
    }
}

Preview on Device & Xcode Previews

點選下圖紅色圈圈標示的按鈕將 preview 裝到 iPhone。

將裝置前的框框打勾，安裝 preview。

ps: 記得先在 App 的 Team 欄位設定 Apple ID，才能將 preview 裝到 iPhone。

將 preview 安裝到 iPhone 後，iPhone 的桌面將出現 App Xcode Previews，我們之後隨時可從手機測試之前安裝的 preview。