[Xcode] Xcode のプレビューの複数デバイスを表示する方法

Xcode の Preview で複数デバイスをまとめて表示する方法を説明します。

複数機種のプレビュー表示

少し前まで、プレビューはあくまでプレビューであり、デバイスごとの表示は、シミュレータを立ち上げる必要があると思ってました。

実は、Xcode 内のプレビューに対して、デバイスを指定する方法があります。さらに、複数のプレビューを表示することで、複数デバイス上でのプレビューを表示できます。

プレビューの仕組み

Xcode 上でプレビューが行われるのは以下の時です。

  • アクティブなファイル内に、PreviewProvider に準拠した struct が存在する

PreviewProvider は以下の2つの情報をプレビュー向けに保持しています。

  1. static var previews: Self.Previews
  2. static var platform: PreviewPlatform?

1つめの previews は、実装必須のプロパティです。このプロパティは、View に準拠していて、このビューがプレビューとして表示されます。

プレビュー向けの modifier

View protocol には、「Configuring Previews in Xcode」として、以下のような modifier が用意されています。

  • previewDevice
  • previewDisplayName
  • previewLayout
  • previewContext

.previewDevice

プレビュー時に使用されるスクリーンサイズを、デバイスを指定することで、指定できます。

使用できるデバイス名は、ターミナルで以下のコマンドを実行することで取得できます。

コード

上記は、2020.12 時点での macOS Catalina 10.15.7 + Xcode12.2 で取得できたリストです。

上記を参照して「iPhone 11」や「Apple Watch Series 5 – 44mm」 のように指定できることになります。

# 具体的には、(com.apple…. の手前までの文字列が使用できるようです。

previewDisplayName

プレビュー表示されるときのタイトルを指定することができます。

previewLayout

previewDevice から指定されるレイアウト(サイズ)を上書きすることができます。
デバイスで指定することもできますし、サイズ(縦横)を直接指定することもできます。

そのほかに、プレビューで必要となるサイズに合わせることもできるようです(未確認)

previewContext

キー・バリューを設定することができるようです。

現時点で何に使うか想像できていませんが、なにか有用な使い道があるのでしょう。

複数のプレビューを同時に表示する

ここまでで、特定のデバイスでのプレビューを表示することはできるようになりました。

次に、複数のプレビューを同時に表示させる方法を説明します。

複数の方法があります。

static var previews から複数ビューを返す

Static var previews から複数のビューを返すと、それぞれをプレビューに表示することができます。

previews から複数ビューを返す

previewsが複数View返す

「複数View を返す previews を使った複数プレビュー」

複数の PreviewProvider を用意する

Xcode は、1ファイル内からでも複数の PreviewProvider を検知します。

複数の PreviewProvider に準拠した struct を定義すると複数のプレビューが表示されるようになります。

複数の PreviewProvider を定義

複数のPreviewProvider を使った複数プレビュー

「複数のPreviewProvider を使った複数プレビュー」

まとめ:デバイスプレビューの複数表示

デバイスプレビューの複数表示の方法
  • デバイス指定方法:previewDevice modifier を使って指定する
  • 複数表示方法1:static var prviews が複数 View を返すようにする
  • 複数表示方法2:PreviewProvider protocol に沿った struct を複数定義する

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です