はじめに
UIKitだとプログラムで書いたやつはシミュレータを起動しないとどう表示されるかが分からず、いちいちシミュレーターを起動して確認していましたよね？
SwiftUIはプログラムで書くタイプなんですがプレビューという機能がありまして、シミュレータを起動せずにどういった見た目になるかがわかるような神機能があります。というかこれないとSwiftUIは使う価値ないと思うけどｗ。
今回はそのプレビュー機能についての記事になります。
プレビューを表示するには
Xcodeを立ち上げた時はプレビューが表示されていません。(なんでや)
なのでプレビューを表示する作業が必要なります。
プレビューするデバイスを変更
・画面上部にあるシミュレーターアイコンをクリック(下図黄色枠参考)
・好きなデバイスを選ぶ
プレビュー起動
・右側にあるResumeボタンをクリック
・ショートカットキーもあった
Command + Option + P
これでプレビューが表示されたと思います。
画面の向きを変えるには
↑をクリックすると画面の向きを変えられます。
どの向きに対応するかはアプリによってまちまちだと思いますが、全向きに対応するのであれば、この機能でレイアウト崩れがでないかを確認するのがいいと思います。
プレビューサイズを変えるには
プレビューの画面の右下の方にある＋やーボタンを押すとサイズ変えられます。
デフォルトがかなりでかいので、５０％ぐらいでいいのかなと思います。
複数の画面を同時に表示するには
↑をクリックするとプレビューを複製することができます。
プレビューは複数の画面を表示することもできるってことですね。
やっぱ消したい時は？
プレビューもコードで定義されてものです。なのでコードを削除するとプレビューも消えます。
はじめに用意されているContentViewだとMainContentView_Previewsに注目です。
画面が２つある場合だと↓のところがMainContentViewが２つになってると思います。
片方のコードを削除してしまえば、１画面になります。
struct MainContentView_Previews : PreviewProvider { static var previews: some View { Group { MainContentView() .previewInterfaceOrientation(.portraitUpsideDown) MainContentView() .previewInterfaceOrientation(.landscapeRight) }; } }
セルを表示するには
デフォルトだとデバイスサイズのプレビュー表示になります。
リストビューのセルなどをプレビュー表示する際は↓のようにその部分だけを表示して欲しいですよね？
これをするには .previewLayout(.sizeThatFits) をつけます。
struct TodoRowView_Previews: PreviewProvider { static var previews: some View { TodoRowView()) .previewLayout(.sizeThatFits) // ここが重要 } }
注意点
不安定になりがち
プレビューを１度表示したら基本的には自動で更新されるのですが、別画面に行ったり、新規ファイルを作ったときはよく止まります。
Resumeという表示が出てたら Command + Option + P で更新してあげましょう。
全く反映されなくなったら？
たまーにプレビューが赤くなって言うこと聞かなくなることあります。
そうしたときはXcodeを閉じて再度プロジェクトを開くと治ることがあります。
少なくとも自分はそれで治ってます。
参考にしたサイト
おわりに
まだまだやれそうなことはありますが、少しつづ更新していきます！
最後まで見ていただきヘペトナス！
読者登録・Twitterのフォローもお願いします。