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