WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Build a SwiftUI view in Swift Playgrounds

Build a SwiftUI view in Swift Playgrounds

WWDC 2020SwiftSwiftUISwift Playgrounds
元の動画を見る

ハイライト

Apple は、PlaygroundSupport を使用して Xcode 互換の Swift Playground で SwiftUI ライブ ビューを表示し、複数のファイル、環境修飾子、@State および Button を使用してインタラクティブ プレビューを行い、開発者が iPad または Mac で SwiftUI プロトタイプを検証できることを実証しました。

主要内容

多くの人は、Swift Playgrounds を Swift を学習するための入り口だと考えています。このセッションの開始により、開発者は、iPad または Mac で Xcode プレイグラウンドを作成し、SwiftUI ビューを作成し、ライブ ビューを実行し、結果を Xcode に戻すなど、より実践的なプロトタイピング作業も行うことができることを思い出します。

講演者は例としてタスク追跡アプリの進行状況ビューを使用しました。目標は小さいです。中央にパーセントを表示した円形の進捗状況の概要を描きます。デバッグのためにそれを完全なプロジェクトに入れると、アイデアが中断されてしまいます。遊び場に置くと、最初に使用できますCircle、ZStackそしてText図形を入力し、[実行] ボタンまたは Command-R を使用して結果を確認します。

Swift Playgrounds の価値は、SwiftUI のセクションを実行するだけではありません。コード補完、カラー リテラル、中括弧をドラッグして既存のコードを囲む、キーボード ショートカットなどの編集機能を提供します。ビューが複雑になった後は、次のこともできます。ProgressView別のファイルに移動し、メイン ページを離れてコードをプレビューします。

最後の段落では、プレイグラウンドをカスタム プレビュー キャンバスに変えます。メインページの作成Previewビュー、一度に 2 つを表示ProgressView, そのうちの1つはダークモードに切り替わります。プラス@State、withAnimationそしてButton、ライブビューでは、さまざまな進行状況の値とアニメーションの感触をテストできます。

詳細

SwiftUI ライブビューを作成する

(02:23) 後続の作業によって Xcode が戻されるため、スピーカーは最初に空の Xcode Playground を作成します。 SwiftUI ビューを作成する場合、メイン ページはライブ ビューを制御するために SwiftUI と PlaygroundSupport をインポートする必要があります。

import SwiftUI
import PlaygroundSupport

キーポイント:

  • SwiftUI供給View、Text、Circle、ZStack、VStackおよび他のインターフェイスタイプ。
  • PlaygroundSupportカスタム プレイグラウンドの動作へのアクセスを提供します。
  • トランスクリプトには、ライブビューを表示するためのものであることが明確に記載されています。
  • このオプションを使用すると、プレイグラウンド ページでコンソール結果を出力するだけでなく、SwiftUI プレビューをホストできるようになります。

(03:05) はいProgressViewその後、メイン ページは現在の Playground ページでライブ ビューを設定します。コードを実行すると、SwiftUI ビューがプレイグラウンドのライブビュー領域に表示されます。

PlaygroundPage.current.setLiveView(ProgressView())

キーポイント:

  • PlaygroundPage.current現在のページにアクセスします。
  • setLiveViewSwiftUI ビューを Playground に与えて表示します。
  • ProgressView()はデモのプロトタイプ ビューです。
  • このステップでは、SwiftUI の書き込みと視覚的な結果を結び付けます。

単純な形状から進行状況ビューを作成する

(03:59) 進行状況ビューは円で始まります。スピーカー使用Circle、ストロークと前景色を追加し、Command + R を実行して結果を確認します。

Circle()
	.stroke(lineWidth: 25)
	.foregroundColor(.blue)

キーポイント:

  • Circle()SwiftUIの基本的な形です。
  • .stroke(lineWidth: 25)円をストロークとして表示します。
  • .foregroundColor(.blue)ストロークの色を設定します。
  • 実行後、サイズと線幅が不適切であることが判明し、スピーカーが直接値を調整し続けました。

(05:03) 円が大きすぎる場合、この例ではビュー全体にパディングを追加します。このスニペットは、Playground が視覚的なパラメーターを実験するのに適していることも示しています。つまり、数値を変更してすぐに比較結果を再実行します。

ProgressView().padding(150)

キーポイント:

  • ProgressView()表示する SwiftUI ビューです。
  • .padding(150)外層に固定空白を追加します。
  • この変更はライブ ビューの初期化時に行われ、最初にアプリのレイアウト全体を変更する必要はありません。
  • トランスクリプトでは、話者は Command-R を使用して、効果が目的の効果に近づくまで繰り返し実行します。

(05:17) センターパーセンテージ合格ZStack円の上に積み重ねます。講演者は、Swift Playgrounds の中括弧のドラッグも実演しました。閉じ中括弧を下にドラッグすると、既存のサークル コードが新しいスタックにラップされます。

ZStack { }

キーポイント:

  • ZStackサブビューを同じ平面上に積み重ねるのに使用されます。
  • 空の{ }これは公式のスニペットであり、その後の操作で既存のサークル コードが組み込まれます。
  • このステップでは、視覚的なパラメーターではなく、レイアウト構造を扱います。
  • Playground のブレースのドラッグにより、手動でインデントをカットする必要性が減ります。

(05:50) 円の中心のパーセンテージが最初にテキストにハードコードされます。プロトタイプの場合、視覚的な位置を確認するにはこのステップで十分です。

Text("25%")

キーポイント:

  • Text("25%")SwiftUIのテキストビューです。
  • 入れてくださいZStackその後、循環の進行状況とともに積み重ねられます。
  • 最初に 25 パーセントを記録に書き留めてから、進捗状況をステータスに変更します。
  • この順序はプロトタイピングに適しています。最初に形状を確認し、次にデータを入力します。

ビューを別のファイルに分割します

(08:07) ビューが複雑になった後、スピーカーは新しいビューを作成します。ProgressViewファイル、入れるProgressView構造体はメインページから切り取られます。これは別のモジュールに組み込まれるため、型、本体、初期化子はすべてパブリックである必要があります。

public struct ProgressView: View {

キーポイント:

  • publicメインページに別のファイルでアクセスできるようにするProgressView。
  • Viewプロトコルは引き続き SwiftUI から取得されるため、新しいファイルも必要ですimport SwiftUI。
  • トランスクリプトには、コードが別のモジュールにあるためであることが明確に記載されています。
  • したがって、メイン ページは、実装コードを混在させるのではなく、プレビューの作成に集中できます。

(09:35) Swift Playgrounds は、問題のある時点で修正を求めるプロンプトを表示します。スピーカーは問題点をクリックし、修正を受け入れて、bodyこちらも公開に変更。

public var body: some View {

キーポイント:

  • SwiftUIビューbodyビューを外部から使用するときにアクセスする必要があるプロパティです。
  • some View戻り値の型が具体的な複合ビューを公開しないようにします。
  • このスニペットは、手書きの補完ではなく、公式のコード スニペットから取得されています。
  • Playground の問題ドットと Fix-it は、アクセス制御を迅速に修正するのに役立ちます。

(09:43) 講演者はまた、メイン ページが次に異なる進行状況値を作成するため、イニシャライザを public としてマークしました。ProgressView。

public init(_ progress: Double = 0.3) {

キーポイント:

  • イニシャライザが受け取るDouble進行状況の値を入力します。
  • デフォルト値は次のとおりです。0.3、パラメータを渡さずにビューを作成することもできます。
  • これはパブリックである必要があり、メイン ページから呼び出すことができます。
  • これは、後でカスタム プレビューを入力するための準備となります。

ライト モードとダーク モードのプレビューを作成する

(10:06) 新しいメイン ページPreview表示、複数配置ProgressView入れますVStack。これは、トランスクリプト内の重要な事実を利用しています。ライブ ビュー領域全体がキャンバスであり、複数のビューを表示できます。

VStack(spacing: 30) {
  ProgressView()
  ProgressView()
}

キーポイント:

  • VStack(spacing: 30)2 つの進行状況ビューを垂直に配置します。
  • 二ProgressView()異なる環境を比較するために使用できます。
  • この構造により、Playground ライブ ビューがカスタム プレビューになります。
  • トランスクリプトで「自分の意見を複数回表示する」という目標に対応します。

(10:49) ライト モードとダーク モードの違いを明確に確認するために、システムの背景色がプレビューの外側のレイヤーに追加されます。スピーカーを使用すると、UIKit にコード補完を入力できます。secondarySystemBackground。

.background(Color(UIColor.secondarySystemBackground))

キーポイント:

  • Color(UIColor.secondarySystemBackground)UIKit システムカラーを SwiftUI にブリッジします。
  • システムの背景色は環境に応じて変わります。
  • プレビュー領域は実際のシステム インターフェイスに近くなります。
  • トランスクリプトにおけるこのステップの目的は、明暗の違いを見やすくすることです。

(11:11) メインページが最後に表示されましたPreviewを直接表示するのではなく、ProgressView。

Preview()

キーポイント:

  • Preview()カスタム プレビュー コンテナーです。
  • 複数のコピーを置きますProgressViewライブビューで整理しました。
  • この方法では、メイン ページで実際のアプリの入り口をホストする必要がありません。
  • SwiftUI プロトタイプの場合、プレビュー ビュー自体がテスト フィクスチャです。

(11:32) 2 つ目ProgressView環境修飾子を介してダークモードに切り替えます。再度実行すると、プレイグラウンドにはライト モードとダーク モードの両方が表示されます。

.environment(\.colorScheme, .dark)

キーポイント:

  • .environmentサブビューによって読み取られた環境値を上書きします。
  • \.colorSchemeカラーモードをポイントします。
  • .darkプレビューの 1 つをダーク モードでレンダリングします。
  • これにより、遊び場で 2 つの外観を並べて検査できます。

プレビューをインタラクティブにする

(12:10) 最後に、スピーカーは状態変数を使用して進行状況の値を駆動します。ライブ ビューは完全にインタラクティブであるため、プレイグラウンドのボタンをクリックしてアニメーションを観察できます。

@State var progress = 0.25

キーポイント:

  • @StateSwiftUI ビュー内で進行状況を保存します。
  • 初期値0.2525パーセントに相当します。
  • 状態の変化によりビューの再レンダリングが行われます。
  • この変数は 2 つに渡されます。ProgressView。

(12:18) どちらのプレビューでも同じ進行状況の値が使用されます。このように、ボタンをクリックすると、ライトモードとダークモードが一緒に更新されます。

ProgressView(progress)

キーポイント:

  • progress前段階の状態です。
  • イニシャライザは別のファイルでパブリックとしてマークされています。
  • 同じ入力で複数のプレビュー インスタンスを駆動できます。
  • これにより、さまざまな環境間で同等のパフォーマンスが維持されます。

(12:32) 最小限のインタラクションは、進行状況を 25 パーセント増やすだけです。公式クリップでは、最初にアニメーションなしのバージョンが表示されます。

func increment() {
  self.progress += 0.25
}

キーポイント:

  • increment()ボタンアクションが呼び出すメソッドです。
  • self.progress += 0.25毎回4分の1を追加します。
  • 直接変更します@State。
  • 状態を変更した後、SwiftUI はそれに依存するビューを更新する必要があります。

(12:40) その後、スピーカーは同じ行のステータス変更を含めました。withAnimation。これにより、コール ポイントを変更せずに進行状況の変化がアニメーション化されます。

func increment() {
  withAnimation {
    self.progress += 0.25
  }
}

キーポイント:

  • withAnimationラッピング状態が変わります。
  • アニメーションは、この状態によって引き起こされるビューの変更に添付されます。
  • 元の進捗計算は変更されていません。
  • プレイグラウンドのライブビューでは、アニメーションの感触を直接テストできます。

(12:52) ボタンの使用法incrementアクションとして。これにより、完全なアプリが作成されて検証されるまで待つのではなく、インタラクション ポータルがプレビュー状態になります。

Button(action: increment)

キーポイント:

  • ButtonSwiftUIのインタラクティブなコントロールです。
  • action: increment上記のステータス更新メソッドをバインドします。
  • ボタンを配置しましたVStack、両方のプレビューは同じ状態を共有します。
  • ProgressView は動作し、トランスクリプトのボタンをクリックするとアニメーションを再生します。
Button(action: increment) {
  Text("Increment Progress")
}

キーポイント:

  • このスニペットはボタンにテキスト ラベルを追加します。
  • Text("Increment Progress")ボタンの表示内容です。
  • アクションとラベルが一緒になって完全なボタンを形成します。
  • プレイグラウンドでクリックすると、さまざまな進行状況値でのビューのパフォーマンスを確認できます。

重要ポイント

  • SwiftUI コントロールのドラフト ボードを作成する: 何をするか: 設計中の単一の SwiftUI コントロールを Xcode Playground に配置し、ライブ ビューで個別に実行します。実行する価値がある理由: セッションには結果が表示されますCircle、ZStack、Text開始検証の進行状況ビューは、完全なアプリ プロセスに入るよりも軽いです。開始方法: 空の Xcode プレイグラウンドを作成してインポートします。SwiftUIそしてPlaygroundSupport、使用PlaygroundPage.current.setLiveViewターゲットビューを表示します。

  • 明るい/暗いを並べたプレビュー ページを作成します: やるべきこと: 主要なコンポーネントのプレビュー専用ページを作成しますPreviewビュー、複数のコンポーネントを一度にレンダリングします。やる価値がある理由: プレゼンテーションの場合VStackそして.environment(\.colorScheme, .dark)ライトモードとダークモードの両方を確認します。開始方法: 実際のコンポーネントを別のファイルに配置し、メイン ページのみを保持します。Preview()。

  • インタラクティブな状態テスト ベッドの作成: やるべきこと: プレビューに追加@State、ボタン、アニメーションを使用して、さまざまな入力値の下でコントロールのフィードバックをテストします。実行する価値がある理由: 進行状況を表示してセッションを終了し、withAnimation最初に実際のデータ ソースにアクセスせずに、進行状況の変化を確認します。開始方法: プレビュー ビューで宣言します。@State var progress、それをコンポーネントに渡してから使用しますButton(action:)修正してください。

  • チームで共有する SwiftUI パラメータ調整プレイグラウンドを作成します: やるべきこと: 色、間隔、線幅などのデザイン パラメータをプレイグラウンドに入力し、デザインと開発が一緒に試してみます。実行する価値がある理由: Transcript では、カラー リテラル、コード補完、中括弧のドラッグが紹介されており、視覚的な詳細をすばやく調整するのに最適です。開始方法: デザイン内のいくつかの候補値をプレイグラウンドの SwiftUI スニペットに変換し、実行後にスクリーンショットを撮るか、プレイグラウンド ファイルを共有します。

関連セッション

コメント

GitHub Issues · utterances