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 設定できる端末例

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について）