SwiftUIのプレビューデバイスを設定する方法

SwiftUIで開発している時、特定の端末または複数の端末でプレビューをみたい時がありますよね。そんな願いを叶える方法です。（SwiftUIチュートリアルをやったことある人は知っているはず）

次のコード内の２つ目のstructのSwiftUIView_Previewsがプレビューに関するコードです。この部分にコードを加えて、プレビューデバイスを設定します。

SwiftUIView.swift

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

/// 以下のコードがプレビューに関するコード
struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }
}

１ 特定の端末のプレビューデバイスを設定する

1-1 実装方法

SwiftUIView.swift

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
            /// 以下の行を追加
            .previewDevice(PreviewDevice(rawValue: "iPhone X"))
    }
}

1-2 実行結果

### 1-3 解説 .previewDeviceのrawValueに端末を指定すれば、プレビューデバイスを設定できます。設定できるデバイス例 → [3 設定できる端末例](#3-設定できる端末例) ## 2 複数の端末のプレビューデバイスを設定する ### 2-1 実装方法 ```SwiftUIView.swift struct SwiftUIView_Previews: PreviewProvider { static var previews: some View { /// 以下の行を追加 ForEach(["iPhone SE", "iPhone XS Max", "iPhone X"], id: \.self) { deviceName in SwiftUIView() /// 以下の2行を追加 .previewDevice(PreviewDevice(rawValue: deviceName)) .previewDisplayName(deviceName) } } } ``` ### 2-2 実行結果 ### 2-3 解説 ForEachに端末の配列を渡して、反復処理の実行ごとに.previewDeviceのrawValueに端末を指定し、プレビューを表示させています。なお、「id: \.self」は配列の要素が一意であることをSwiftUIに知らせるためのもので必須です。 .previewDisplayName(deviceName)では右側のプレビューで表示される端末の下の端末名を指定しています。これを設定しないと、全て「Preview」と表示されます。複数の端末のプレビューデバイスを設定する際は必要だと思います。

3 設定できる端末例

端末一覧（iPhoneのみ）.swift

"iPhone 7"
"iPhone 7 Plus"
"iPhone 8"
"iPhone 8 Plus"
"iPhone SE"
"iPhone X"
"iPhone Xs"
"iPhone Xs Max"
"iPhone Xʀ"

4 プレビューデバイスを設定を設定していない場合は？

TARGETSのDeployment Info内のDeviceからXcodeが自動選択しているようです。

5 参考ページ

AppleDevelopper（.previewDeviceについて）
Hacking with Swift（id: .selfについて）