Visually edit SwiftUI views

ハイライト

Xcode プレビューは、Xcode 12 の SwiftUI キャンバス、ソース コード エディター、ライブラリ、およびインスペクターを接続し、開発者がビューの挿入、コンテナーの埋め込み、コンポーネントの繰り返し、プレビューで直接修飾子を調整し、ソース コードとインターフェイス間の同期結果をすぐに確認できるようにします。

---

主要内容

SwiftUI の約束の 1 つは、インターフェイス構造がコードに直接記述されることです。この約束は実際的な問題も引き起こします。リスト行を実行したいだけの場合でも、頭の中でそれをシミュレートする必要があります。HStack、画像のサイズ、テキストのスタイル、繰り返されるアイコン間の関係。コード行を記述し、プレビューを更新し、次のステップを推測するというリズムは簡単に崩れてしまいます。

このセッションでは、スムージー アプリの行ビューを使用して、Xcode プレビュー ソリューションをデモンストレーションします。この行には、名前、材料、カロリー、画像、人気度の星が必要です。デイジーは、最初にライブラリから SwiftUI ビューを挿入し、次にキャンバスに適切なレイアウト コンテナーを自動的に処理させることを選択しました。

キャンバスとソースコードの間で変更が発生します。プレビュー内のテキストをダブルクリックすると、エディタ内の対応するコンテンツにフォーカスが戻ります。 Command-D を使用してビューをコピーすると、Xcode は現在の構造を認識し、必要に応じてコンテナを自動的に追加します。インスペクターを使用して画像やフォントを調整すると、コードが同期的に更新され、キャンバスがすぐに再レンダリングされます。

このプロセスの価値は、コードを置き換えることにありません。これにより、試行錯誤が最も起こりやすい部分が短縮されます。まず、キャンバス内の構造、マテリアル、繰り返し要素、および修飾子をターゲットに近づくように調整します。次に、Swift コードに戻って、名前付け、モデル データ、境界の再利用を整理します。 SwiftUI を初めて使用する人にとっては、参入障壁が低くなります。 SwiftUI に慣れている開発者にとっては、モディファイア シグネチャとレイアウト コンテナの間でドキュメントを確認するのに費やす時間が削減されます。

詳細

このセッションのコード スニペットとリソースは両方とも 0 です。以下を使用します。textSwift コードや API 署名を偽造することなく、トランスクリプトで示されている Xcode プレビュー ワークフローをブロックします。

1. ライブラリからビューを挿入し、Xcode にレイアウト コンテナーを完成させます

(00:30) デイジーはライブラリから新しいビューを追加します。ライブラリには SwiftUI ビューとモディファイアがあります。その目的は、コンパイルを継続しながら、プレビューでインターフェイスを徐々に構築できるようにすることです。 SwiftUI は構造化レイアウトを使用し、Xcode プレビューはコンテンツを挿入するときに適切なレイアウト コンテナーを提供できます。

SwiftUI preview canvas を開く
Library から SwiftUI view または modifier を選ぶ
内容を現在の row view に挿入する
Xcode Previews に同じ操作の中で適切な layout container を補わせる
"Hello World" テキストをダブルクリックし、ソース内の対応位置にフォーカスを移す
smoothie の名前、材料、カロリーテキストに置き換える

キーポイント:

• ライブラリは現在の SwiftUI 構造に従ってコンテンツを挿入します。その機能は単にコンポーネントをリストするだけではありません。
• トランスクリプトには、Xcode プレビューが 1 回の操作でコンテンツを挿入し、正しいレイアウト コンテナーを取得できることが明確に記載されています。
• キャンバス内の静的テキストをダブルクリックすると、編集フォーカスがソース コードに移動します。これは、ラベルの核となるコンテンツをすばやく置き換えるのに適しています。
• このステップは、最初に行ビューのスケルトンを構築し、次に画像、星、モディファイアを処理するのに適しています。

2. Command-D を使用してビューをコピーし、静的テキストをモデル データに置き換えます。

(01:25) 行ビューを構築する場合、多くの場合、複数の連続したラベルが必要になります。 Xcode プレビューは Command-D コピー操作を提供し、SwiftUI コード構造を理解します。コピーされたビューがまだコンテナー内にない場合、Xcode はそれをコンテナーに自動的に挿入します。

既存の Text view を選択する
Command-D を押して複製する
現在の view がコンテナ内にない場合は、Xcode にコンテナを自動挿入させる
3 つ目の label をダブルクリックする
静的な内容をモデルデータのフィールドに置き換える
canvas で名前、材料、カロリーの 3 つのテキストの並びを確認する

キーポイント:

• Command-D は、トランスクリプトのクイック コピー表示操作に対応します。
• コンテナーを自動的に挿入するステップは、Xcode による SwiftUI 構造の理解に基づいて行われるため、最初に完全なレイアウトを手書きする必要はありません。
• ラベルをダブルクリックして静的コンテンツを置き換え、テキストをモデル データに接続します。
• リスト行、設定ページ、詳細カードなどの繰り返しのテキスト構造の場合、最初から挿入するよりも、データをコピーして置換する方が高速です。

3. アセット カタログから画像を挿入し、インスペクターを使用してモディファイアを調整します

(01:56) 画像は、Command-Shift-L でライブラリを開くと挿入されます。 Xcode プレビュー キャンバスは、SwiftUI ビューとモディファイアを処理するだけでなく、プロジェクトのアセット カタログのメディアを使用することもできます。デモでは、SwiftUI が実際のサイズに従って画像をレンダリングするため、挿入後の画像のサイズが大きすぎます。

Command-Shift-L を押して Library を開く
Asset Catalog から smoothie 画像を選ぶ
row view に挿入する
画像が実サイズで表示され、想定より大きいことを確認する
Inspector の Add Modifier を開く
現在の Image コンテキストに応じて推奨される resizing 関連 modifier を選ぶ
Inspector でよく使う modifier の値を調整する
コードと canvas が同期して更新されることを観察する

キーポイント:

• Command-Shift-L は、トランスクリプトでライブラリを開くショートカット キーです。
• 画像サイズが異常になる理由は、SwiftUI が実際のサイズに従って画像をレンダリングするためです。
• Inspector の [Add Modifier] は、現在のコンテキストに基づいて推奨事項を提供します。これは、一般的に使用される修飾子を見つけるのに適しています。
• トランスクリプトには、画像のサイズ変更が開始されることが記載されているだけで、特定の API 署名が与えられていないため、ここには Swift コードは記述されていません。
• インスペクターは値を変更すると、すぐにソース コードを更新し、キャンバスを再レンダリングします。これは、簡単なサイズ テストに適しています。

4. HStackを埋め込んでRepeatを使って星の数を作る

(02:51) 行ビューには、人気を表示するスタービューも必要です。 Xcode Previews キャンバスはプロジェクト独自の SwiftUI ビューとモディファイアーを使用でき、操作方法はシステム ライブラリのコンテンツと同じです。カスタム ライブラリ コンテンツの詳細については、セッションで「カスタム ビューとモディファイアを Xcode ライブラリに追加する」を参照してください。

プロジェクト内の star view を row view に挿入する
Command を押しながら star view をクリックする
メニューで Embed in HStack を選ぶ
同じメニューをもう一度開く
Repeat を選ぶ
単一の star view を横方向に繰り返して popularity indicator にする

キーポイント:

• カスタム SwiftUI ビューは、システム ビューと同様にキャンバス操作フローに表示できます。
• コマンド クリック メニューは、コンテナ関連のアクションを提供します。トランスクリプトの例は Embed in HStack です。
• 繰り返しアクションは、単一の星のビューを水平方向に繰り返す要素に拡張するために使用されます。
• このステップは、評価、ページネーション ポイント、ステータス アイコン、ラベル グループなどの繰り返し UI に適しています。

5. インスペクターを使用してフォント、ウェイトを試し、不適切な修飾子を削除します

(03:30) タイトルをより目を引く必要がある場合、インスペクターはフォントとウェイトのさまざまな値を直接試すことができます。デモでは、試してみた結果は期待どおりではありませんでした。デイジーは、コントロールの横にある青い円形のインジケーターをクリックして修飾子をクリアし、フォントを継承された値に戻しました。

smoothie title を選択する
Inspector で font と weight を試す
canvas 内のタイトル変化を観察する
効果が合わない場合は、コントロール横の青い円形インジケータをクリックする
その modifier を削除する
フォントを既定の SwiftUI font に戻す
他の label の view 属性と modifier 属性の調整を続ける

キーポイント:

• インスペクターは、ビュー自体のプロパティだけでなくモディファイアのプロパティも編集できます。
• モディファイアをクリアすると、試行錯誤のために冗長なスタイルが残らないように、継承された値が返されます。 ・フォント、太さ、画像サイズなど視覚的な判断が必要なパラメータに適した処理です。
• デフォルト値に戻した後は、ソース コードがよりきれいになり、その後の手書きや仕上げのコストが低くなります。

6. キャンバス内インスペクターを使用してプレビュー設定をコピーします

(04:12) 画面スペースが限られている場合は、サイドバーをオフにして、代わりにキャンバス内のインスペクターを使用できます。 Ctrl キーを押しながらターゲット ビューをクリックして、キャンバス内で検査および編集します。 Xcode 12 では、ワンクリックでプレビューをコピーするなど、プレビュー指向の機能も追加されています。プレビュー自体はビューであるため、インスペクターによって検査することもできます。

サイド Inspector を閉じ、編集領域を広げる
Control-Option を押しながら確認したい view をクリックする
canvas 内で Inspector を直接開く
現在の preview を複製する
複製に別の構成を切り替える
row view が異なる preview 構成でどう見えるか確認する

キーポイント:

• Control-Option をクリックすると、トランスクリプトでキャンバス内のインスペクターを開くことができます。
• キャンバス内インスペクターは、小さな画面やソース コードを並べて表示する場合に適しています。
• ワンクリックのコピー プレビューにより、同じ行ビューを複数の構成に配置して比較できます。
• メタデータには、ライト/ダーク モードとダイナミック タイプが明示的に記載されています。これらの構成は、プレビューをコピーすることによる回帰チェックに適しています。

重要ポイント

• やるべきこと: アプリ内の最も一般的なリスト行を視覚的な反復テンプレートに作成します。 実行する価値がある理由: このセッションのスムージー行にはテキスト、画像、スターが含まれており、これは多くのコンテンツベースのアプリのリスト単位をカバーしているだけです。 開始方法: 実際のリスト行を選択し、ライブラリを使用してキャンバスにテキストと画像を挿入し、Command-D を使用してラベルをコピーし、インスペクターを使用して画像のサイズとタイトルのスタイルを調整します。

• やるべきこと: 評価、進行状況、ステータス バッジなどの反復的な UI 用の再利用可能なウィジェットを構築します。 実行する価値がある理由: このセッションでは、単一のスター ビューを HStack に埋め込み、Repeat を使用して水平方向の繰り返しを行う方法を示します。これは、ビジネス ビューから繰り返しグラフィックを削除するのに適しています。 開始方法: まず、既存の行ビューにカスタム ビューを挿入し、Command キーを押しながらクリックして [HStack に埋め込む] を選択し、[Repeat] を使用して番号を展開します。安定後に再度確認してください10649Xcode ライブラリに追加します。

• 何をすべきか: 特にダーク モードとダイナミック タイプをチェックする一連のプレビュー構成を構築します。 実行する価値がある理由: メタデータには、ライト/ダーク モードとアクセシビリティ機能を表示するための Xcode プレビューが明示的に記載されています。レイアウトの問題は、多くの場合、これらの構成で最も早く明らかになります。 開始方法: 現在のプレビューをコピーし、各コピーの環境構成を設定します。同時に、タイトル、画像、材料テキストがキャンバス内で折り返されているか、切り詰められているか、または押し込まれているかを観察します。

• やるべきこと: 視覚的な試行錯誤をインスペクターに入力し、完了後にソース コードに戻って整理します。 実行する価値がある理由: このセッションでは、インスペクターが推奨モディファイアの追加、一般的な値の編集、不適切なモディファイアの削除ができることを示しています。これは、フォント、ウェイト、画像サイズなどの視覚パラメータの処理に適しています。 開始方法: ターゲット ビューを選択し、まずインスペクターを使用して適切な修飾子と値を見つけます。試行錯誤の結果が正しくない場合は、青色のインジケーターを使用してそれをクリアし、実際に必要な最終変更を保存します。

• やるべきこと: SwiftUI 行ビューの構築注文についてチームと合意します。 実行する価値がある理由: ライブラリ、Command-D、Inspector、HStack、Repeat、キャンバス内 Inspector を組み合わせると、安定した複数人によるコラボレーション プロセスを形成でき、全員が空のファイルからレイアウトを探索する時間を短縮できます。 開始方法: プロジェクト ドキュメントに短いプロセスを記述します。最初にライブラリを使用して構造を配置し、次にテキストをコピーし、次にマテリアルを接続し、次にインスペクターを使用してモディファイアを調整し、最後に構成チェックのためにプレビューをコピーします。

関連セッション

• SwiftUI プレビュー用にアプリを構造化する — 入力、サンプル データ、状態をプレビュー用に準備する方法を学習し、安定してプレビューできない複雑なビューの問題を解決します。
• Xcode ライブラリにカスタム ビューとモディファイアを追加する — このセッションは star view によって推奨されており、カスタム SwiftUI ビューとモディファイアを Xcode ライブラリに追加する方法について説明します。
• SwiftUI の概要 — 宣言型ビュー、軽量ビュー、データ駆動型インターフェイスを使い始めて、SwiftUI の基礎を完成させます。
• SwiftUI の新機能 — 2020 年の SwiftUI アプリ、シーン、コントロール、ウィジェット、クロスプラットフォーム機能の概要を説明します。
• SwiftUI のスタック、グリッド、アウトライン — このセッションでスムージー行を改善し続けるのに適した、詳細なレイアウト コンテナーとリスト構造。