はじめに
SwiftUIを使うことのメリットとして真っ先に上がるプレビュー機能ですが、実際にプレビュー機能を使いこなしている人は少ないように感じています。(自分含めて)
そこで、WWDC2020のセッションから学んだプレビュー機能をを使いこなせるようにし爆速にアプリの構築ができるようPreviewの基本やショートカットを記事にします。
今回は、Previewの基本的な使い方をご紹介させていただきます。
環境: Xcode12, macOS Catalina ver 10.15.6
⌘：コマンド（Command）キー
⌥：オプション（Option）キー
Ctrl：コントロール（Control）キー
Previewsの基礎
SwiftUIのアプリを起動すると以下のような画面になっています。
プレビューの実行・再実行 ⌘ + ⌥ + P
右上にあるResumeをクリックする、もしくはショートカットキー⌘ + ⌥ + Pでプレビューを実行することができます。
これは頻繁に使い開発効率が上がるので是非覚えておくと良いと思います。
Viewが反映されなくなったらとりあえずエラーが出ていない限り⌘ + ⌥ + Pで再描画されます。
ビルドが走りますので、しばらく待つと以下のようにPreviewが表示されます。
このままでも良いのですが、実際のViewにのみ注目したい場合はpreviewLayout(_:)を使うと良いです。PreviewProviderのContentViewに.previewLayout(.sizeThatFits) としてあげることでViewのみのpreviewにすることができます。
Previewの表示・非表示
Previewは表示・非表示を切り替えることができます。
以下の図の①の箇所をクリックした後、②のCanvasをクリックすることで切り替えることができます。
もしくは⌘ + ⌥ + Enterでも可能です。
Library
ライブラリーにはSwiftUIのViewとModifierがあります。
ライブラリーを起動するにはXcodeの右上にある+ボタンをクリックする。
もしくは⌘ + Shift + Lで表示させることができます。
表示されるLibraryはいくつか種類があり、SwiftUIのViewを使いたいならViewsを選択しましょう。
種類は左から、Views, Modifiers, Snippets,Media, Colorとなっております。
状況に応じて使い分けましょう！
これらのViewをPreviewの挿入したい箇所にドラッグ＆ドロップすることでPreviewを最新の状態に保ちながら修正することができます。
このときドロップする箇所によって、自動的にVStack かHStackにしてくれます。
— ツヅキ (@tsuzuki817) September 21, 2020
Previewをクリック
previewに表示されたTextの文字列をクリックすると、TextのViewを選択することができます。
Previewをダブルクリックするとエディタにフォーカスが移動し、テキストか画像かに関係なくViewの要素を簡単に変更できます。
修正された内容も即時反映されます。
Viewの複製 ⌘ + D
Preview画面でViewをクリックしている状態で⌘ + Dとすると選択したViewを複製することができます。
画像の追加
PreviewとLibraryの機能を使うことで画像の追加がとても簡単に行えるようになります。
Assets.xcassetsファイルにお好きな画像をFinderなどからドラッグ＆ドロップで置いておきます。
⌘ + Shift + Lでライブラリを起動し、右から二番目のMediaをクリックすると、既に追加されている画像(drink_tapioka_tea_man)が表示されています。
この画像をドラッグ＆ドロップでHello World! と LGTMの間におきます。
そうすることで、以下のように表示されます。
SwiftUIでは実際のサイズの画像を表示するので、デカデカと表示されてしまいました。
インスペクタの利用 ⌘ + ⌥ + 0
以下の図の箇所をクリックする、もしくは⌘ + ⌥ + 0でインスペクタを開きます。
Previewの画像をダブルクリックして選択したのち、一番右の Attributes inspectorを選択します。
Add Modifierをクリックすると現在の要素にあった推奨されるModifierが表示されます。
Resizableを選択します。
随分と縦長になってしまったので、asaspectRatiopectを設定しましょう！
contentModeをfitにしておきます。
サイズを調整していきます。すでに見えているFrameのSizeに適当なサイズを入れます。
そろそろLGTMも文字が二つあるのは邪魔なので、Viewを選択した状態で⌘ + Deleteで削除します。
そしてTextの代わりに今までの要領で好きな画像を以下のように表示させてみましょう。
アクション ⌘ + クリック
選択したViewを様々なコンテナ(VStack, HStack, etc )に埋め込むことができるアクションを利用します。
対象のViewを⌘を押したままクリックでアクションを呼び出すことができます。
HStackに格納してみました！
これを繰り返し表示させてみます。再び、⌘を押しながらクリックしてRepeat をクリックします。
コーヒーが5個に増殖させることができました！便利ですね！
テキストを目立たせる
タイトルとしてHello, world!を目立たせていきたいと思います。
インスペクタを表示し、Fontの項目をいじります。
Fontをtitle, Weightをbold, Colorをpurpleにしてみました。
お好きな形にしてみましょう！選択した色が即時反映されます。
Modifierを無効にする
Modifierをクリアするには、コントロールの隣にある円形のインジケーターをクリックします。
色を元に戻すことができました。
Previewキャンバス上でインスペクタを呼び出す Ctrl + ⌥ + クリック
Ctrl + ⌥押しながら対象のViewをクリックすることで、右側にインスペクタの領域を取られる事なくModifierの値を変更することが可能です。
プレビューの複製
ワンクリックでプレビューの複製が行えます。
とても便利です。
Previewをダークモードにする
Inspect Previewをクリックし、Color SchemeをDarkにします。
ダークモードになっていることが確認できます。
## おわりに
XCodeのPreview機能の触りを実際に動かしながら解説しました。
次回は、自分で作ったカスタムViewやカスタムModifierを作る記事を書こうと思います。
参考
Visually edit SwiftUI views - WWDC 2020 - Videos - Apple Developer