SwiftUIビューを視覚的に編集する

こんにちは WWDCへようこそ

“SwiftUIビューを視覚的に編集する” こんにちは Xcode Previewsチームのデイジーです SwiftUIアプリケーションを素早く構築するのに 役立つXcode Previewsついて説明します SwiftUIを使い慣れているか どうかに関係なくです その目的のために スムージーアプリケーションの rowビューを構築しようと思います ビューには スムージーの名前や 成分 カロリー摂取量と画像 そして人気度を表す 星型が表示されています 始めに ライブラリーを使用して 新しいビューを自分のUIに追加します ライブラリーにはSwiftUIのビューと モディファイアがあり それを使用すれば 追加修正を行わなくても プレビューのコンパイルを 維持することができます

SwiftUIは 構造レイアウトを 使用してアプリケーションを適応させます iMacとiPhoneのどちらで動かしても アプリケーションはうまく表示されます Xcode Previewsでコンテンツを 挿入し 一体化されたアクションで 適正なレイアウトの コンテナーを取得します

次に “Hello World”ビューをダブルクリック すると エディターにフォーカスが移動し それが画像かテキストかにかかわらず ビューの キーコンポーネントを容易に変更できます Xcode Previewsのキャンバスとソース エディターは 強固に統合されています キャンバスとインスペクタを使用すれば より迅速にSwiftコードを記述でき ソースに加えた変更は 即座に キャンバスの表示に反映されます

構造体をもっと迅速に 構築するのには “Command-D”でビューを複製します

Xcode Previewsはコードの 構造を認識しているので コンテナーに含まれていない ビューを複製すると そのビューが挿入されます

次に 三番目のラベルをダブルクリックして それを手早く変更します ビューをダブルクリックすると 静的コンテンツを置き換えられるだけでなく モデルデータの統合も 簡単に行うことができます

画像を挿入するため キーボードショートカット “Command-Shift-L”を使用して ライブラリーを呼び出します Xcode Previewsのキャンバスは SwiftUIのビューとモディファイアだけでなく メディアとも機能するので 自分のアセット カタログにある画像を簡単に利用できます

このイメージは予想より大きいですね SwiftUIは 実際のサイズで画像を 表示するので これは当然のことです サイズを修正するため インスペクタを 使用して適切なモディファイアを探します “Add Modifier”をクリックすると 現在のコンテキストを使用して “推奨される提案”リストが表示されます その中から探しているものを 素早く見つけ出し そのビューと 一般的に使用されている モディファイアを把握できます 画像をリサイズしていますが サイズが求めるものには及びません インスペクタで 一般的な モディファイアを追加して編集することで モディファイアのシグネチャを 知らなくても 様々な値を試みることができます これですぐにコードが更新され キャンバスへ反映されます

次に スムージーの人気度を示す 星型のビューを追加します プロジェクトのカスタムSwiftUIのビューと モディファイアをキャンバスで使用するのは ライブラリーが提供するものを使用 するのと同じくらい簡単です その方法をお知りになりたい方は “Adding Custom Views and Modifiers to the Xcode Library”セッションをご覧ください 水平方向に星型を並べるため Xcode Previewsに備わっている 選択したビューを様々なコンテナーに 埋め込むアクションを利用します Commandを押したまま対象のビューをクリック すれば アクションを呼び出すことができます ここでは “Embed in HStack”をクリックして 水平方向のコンテナーに埋め込みます 星型のビューを並べるため 同じメニューを呼び出して “Repeat”をクリックします

“マンゴースムージー” スムージーのタイトルを 目立つようにしたいと思います インスペクタを使用して ビューで 様々なフォントとウエイト値を手早く試し その結果をすぐにキャンバスで プレビューできます

これは私が望んだ見た目ではありません モディファイアをクリアするには コントロールのとなりにある青い円形の インジケーターをクリックします モディファイアをクリアすると 継承された値に戻ります この場合 フォントはデフォルトの SwiftUIフォントに戻ります

次に インスペクタを使用してほかのラベルを 編集します いくつかクリックするだけです インスペクタは モディファイアの プロパティの編集だけでなく ビューのプロパティの編集にも使用できます

画面の活用可能な範囲には多くの需要があります Xcode Previewsには キャンバス内にインスペクタが あるので サイドパネルをクローズしても 機能が失われることはありません キャンバスインスペクタを呼び出すには “Control-Option”を押したまま 検査したいビューをクリックします

様々な構成全体を プレビューしやすくするため Xcode 12には様々なプレビュー中心の 機能が導入されています たとえば ワンクリックでプレビューを 複製することができます プレビューも単なるビューにすぎないので それらも同様に検査できます

まとめると Xcode Previewsは SwiftUIを視覚的に 編集する場合に 強固なソースエディターとの 統合と インスペクタや ライブラリーを通して 様々な方法で作業を支援できるということです ご視聴ありがとうございます