SwiftUIのプレビュー画面でiPadやiPhoneシリーズの画面の違いを同時に確認する方法を自分のメモ代わりに残しておこうと思います。
複数画面をプレビューにて表示する
複数の画面をプレビューで表示するにはGroupを使用する
複数のプレビューを表示
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView()
ContentView()
}
}
}
これで二つのプレビュー画面が出てきます。
私は、引数ごとに違う画面を確認する時によく使用します。
例えば、タイトル表示が違うものを確認したかったら、以下のようにします、
複数のプレビューを表示（タイトル違い）
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView(title:"サンプル１")
ContentView(title:"サンプル２")
}
}
}
プレビュー画面の対象iOS Simulatorをコード上で変更する。
プレビュー画面の対象iOSはXcodeにて設定できますが、コード上でも指定できます。
対象iOSを指定する
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView().previewDevice(PreviewDevice(rawValue: "iPhone SE (3rd generation)"))
}
}
}
上記ではiPhoneSEの画面でプレビューすることを指定してます。
Xcodeで指定しているものよりもコード上で指定したものが優先されます。名前の指定では半角スペースの場所に注意してください。
名前がおかしくても、特に怒られたりはしないです。ただプレビュー画面がXcodeで指定しているものになります。
複数のiOSの対象をプレビューで確認する
プレビューを複数用意し、それぞれの対象iOSを指定する
複数の対象iOSを表示（iPadとiPhoneSEの画面を表示）
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView().previewDevice(PreviewDevice(rawValue: "iPad Air (5th generation))"))
ContentView().previewDevice(PreviewDevice(rawValue: "iPhone SE (3rd generation)"))
}
}
}
上記で、iPadの画面の時と、iPhoneSEの時の画面の違いを確認できます。
まとめ
iPhoneでも、ホームボタンの有無で画面の表示が少し違うので、同時に確認できると開発しやすかったです。