SwiftUI 沒有 Xib & Storyboard

此文章的圖片畫面以Xcode 13為主

過去非常喜歡用Xib 與 Storyboard ，它們有著視覺化這項好處，不過SwiftUI 就完全沒有這樣的東西

本次「沒有系列第二篇」說談 SwiftUI 沒有 Xib & Storyboard

取而代之的是稱做Preview 的東西，對Xcode 來說它也是一種Struct 叫 PreviewProvider，在你建立新的SwiftUI file 的時候就會自動產生以下程式

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

這段程式可以將畫面產生出現，如果Xcode 沒有出現畫面的話，可以按下右上角的選單，按下Canvas

再按下Resume

就可以看到 Preview 的畫面了，一開始使用Preview 的時候其實很不習慣的，首先是這個 Preview 畫面是很吃資源的，電腦三不五十就會快飛起來，後來才知道原來 Preview 其實就是在跑 Simulator 所以資源才會吃這麼多。

過去很習慣在 Xib or Storyboard 的時候拉元件進到畫面上，Preview 只有顯示和運行的功能，初期用的時候都會很想拉元件到畫面上( ´•௰•`)

接下來說幾個常用的操作技巧

選機型

iPhone 的尺寸雖然還沒Andorid 多，但是還有幾種比較重要尺寸，過去都是用Size class 去看Layout ，不過在Preview 上就可以直接看到真實的手機尺寸

有二種方式可以做到

• 按下畫面上的功能鈕，再點 Preview 中的 Device

展開就可以找到想要的機型了~

• 也可寫 .previewDevice(“iPhone 12 mini”) 中間填入機型名字，其實使用上面的方式選擇，Xcode 就會自動加上 .previewDevice()

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("iPhone 12 mini")
    }
}

另外如果要轉向的話，一樣按下功能鈕，再點 Preview 中的 Orientation 這個功能只有 Xcode 13 且僅支援 iOS 15，在Xcode12 或 iOS14以下就沒有支援有Apple Develop forums裡有大家討論的 Workround 的方式

rotate swiftui preview

修正顯示尺寸

使用 .previewLayout() 就可以改變顯示的尺寸，一共有三種模式可以選

.device 就如英文所寫，整個機型都會看到

.fixed(width: , height: ) 指定大小

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

.sizeThatFits 符合元件大小，這個會自動依照你目前畫面的元件，顯示出最適合的大小

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

執行看效果

若想要模擬執行起來的效果，可以按上最上面的▶️ 按鈕，就會執行起來

但就僅是這個頁面被執行起來，我個人是用來試一些Alert View 、Button 、 Animation 效果之類的，想看又不想把Simulator跑起來的話，這個真的很不錯用

多語系

Preview 的預設語系是英文，那如果想要用看別的語系又不想把Simulator跑起來的話，有沒有什麼方便的語法?

當然有

只要加上 .environment(\.locale, .init(identifier: “zh-Hant”))，在 identifier 填入語系代碼就行了，像zh-Hant 就是繁體中文

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewLayout(.sizeThatFits)
            .environment(\.locale, .init(identifier: “zh-Hant”))
    }
}

Preview 這個功能雖然資源吃很多，太差的Mac 還跑不起來，就算是跑得起來的Mac 也常常會飛起來，但是就如同APPLE 產品的吸引力，當你一直不斷地使用它之後，就會發現它真的非常好用，即使有很多小缺點但那並不會讓你想再回去用 UIKit ，而且還會忘記在有Preview功能之前自己到底是怎麼去看排版的，怎麼去規劃UI 的