Build programmatic UI with Xcode Previews

ハイライト

Xcode15#Previewマクロは、SwiftUI、UIKit、AppKit、およびウィジェットのプレビューをサポートします。ライブ/選択/バリアントの 3 つのキャンバスモードを使用すると、開発者はアプリを実行せずにリアルタイムで UI を反復し、実際のデバイスで直接プレビューできます。

主要内容

SwiftUI ビューを作成し、その効果を確認したいと考えています。以前は、コンパイルして起動し、対応するページに移動する必要がありました。今すぐ使用#Previewマクロの場合、コードはソースファイルの最上位に記述され、Xcode キャンバスは数秒で更新されます。

(01:25) プレビューはアプリにコンパイルされたコードの一部であり、プロジェクト内のすべてのシンボルとリソースにアクセスできます。 Swift コードを変更する場合、Xcode は最小限の増分コンパイルのみを実行し、プレビューを再実行します。

基本的な使い方

最も単純なプレビューには 1 行だけが必要です。

#Preview {
    MyView()
}

(05:05) ビューが通常リストに配置されている場合は、リストをプレビューに配置します。

#Preview {
    List {
        CollageView(layout: .twoByTwoGrid)
    }
    .environment(CollageLayoutStore.sample)
}

キーポイント:

#Previewソースファイルの最上位に記述され、型や関数にネストされていません
アプリのシーンエントリーと同様に、環境修飾子とデータ依存関係を追加できます。
オプションのパラメータとして渡される特性に名前を付けて設定します

(05:37) プレビューする名前と方向を追加します。

#Preview("2x2 Grid", traits: .landscapeLeft) {
    List {
        CollageView(layout: .twoByTwoGrid)
    }
    .environment(CollageLayoutStore.sample)
}

UIKit と AppKit のサポート

（05:58）#PreviewUIKit もサポートしています。

#Preview {
    var controller = SavedCollagesController()
    controller.dataSource = CollagesDataStore.sample
    controller.layoutMode = .grid
    return controller
}

#Preview("Filter View") {
    var view = CollageFilterDisplayView()
    view.filter = .bloom(amount: 15.0)
    view.imageData = ...
    return view
}

キーポイント:

UIViewControllerまたはUIViewに戻っても問題ありません
使用するvarインスタンスを作成し、プロパティを構成して戻ります
特性パラメータは UIKit プレビューでも有効です

(11:30) UIKit プレビューの初期方向を設定します。

#Preview("All Filters", traits: .landscapeLeft) {
    let viewController = FilterRenderingViewController()
    if let image = UIImage(named: "sample-001")?.cgImage {
        viewController.imageData = image
    }
    viewController.filter = Filter(
        bloomAmount: 1.0,
        vignetteAmount: 1.0,
        saturationAmount: 0.5
    )
    return viewController
}

3 つのキャンバスモード

(07:17) キャンバスの左下隅には 3 つのモードがあります。

ライブモード (デフォルト): インタラクティブで、アニメーションと非同期コードをサポートします。スライダーをドラッグしてアニメーションをテストできます。
選択モード: 静的スナップショット。 UI 要素をクリックすると、Xcode によってソースコードの対応する行が強調表示されます。テキストビューをダブルクリックすると、編集に直接ジャンプします。
バリアントモード: すべての配色やすべてのダイナミックタイプサイズなど、さまざまなデバイス設定のバリアントを同時に表示します。

(08:29) [デバイス設定] パネルはキャンバスの下部にあります。コードを変更せずに、ダークモードと動的文字サイズをすばやく切り替えることができます。

ウィジェットのプレビュー

(12:20) ウィジェットのプレビューでは、ウィジェットファミリとタイムラインプロバイダーを指定する必要があります。

#Preview(as: .systemSmall) {
    FrameWidget()
} timelineProvider: {
    RandomCollageProvider()
}

キーポイント:

as:パラメータはウィジェットのサイズを指定します (.systemSmall、.systemMedium など) -timelineProvider:タイムラインデータを提供する
Xcode は各タイムラインエントリのスナップショットを取得し、矢印キーを使用して参照できます。
再生ボタンをクリックすると、タイムライン遷移アニメーションがループします。

(13:28) 特定の移行シナリオをテストしたい場合は、次を使用します。timeline交換するtimelineProvider：

#Preview(as: .systemSmall) {
    FrameWidget()
} timeline: {
    TimelineEntry(date: .now, collage: collageA)
    TimelineEntry(date: .now.addingTimeInterval(3600), collage: collageB)
}

ピンとループ

(13:58) キャンバスの左上隅にあるピンボタンをクリックすると、他のファイルに切り替えるときにプレビューがアクティブなままになります。ループ再生ボタンを使用すると、アニメーションのトランジション効果を継続的に観察し、同時にコードを変更できます。

詳細

ライブラリターゲットでのプレビューの使用

(16:15) プレビューを実行するには、実行可能ファイル (アプリまたはウィジェット) が必要です。 Xcode は次のルールに従って選択します。

現在編集中のソースファイルが属するターゲット
これらのターゲットのすべての依存関係
現在のスキームとの交差

アプリがない場合、Xcode は自動的に XCPreviewAgent を作成します。ビューに特定の Info.plist キー (アルバム権限など) が必要な場合は、専用のプレビューアプリターゲットを作成し、必要な権限を追加して、そこにライブラリを埋め込むことができます。

Development Assets

(20:30) プレビューに使用される画像およびその他のリソースは、Development Assets フォルダーに配置できます。これらのリソースは開発中に使用され、App Store に送信されると自動的に削除されます。

設定方法：プロジェクト設定＞ビルド設定＞開発資産にフォルダーパスを追加します。新しいプロジェクトを作成すると、デフォルトで「プレビューコンテンツ」フォルダーがすでに存在します。

実機プレビュー

(23:25) キャンバスの下部にあるデバイスセレクターを使用して、接続されている実際のデバイスを選択できます。選択すると、Xcode はシミュレーターをバイパスして、実際のデバイス用に直接ビルドしてプレビューします。

実デバイスのプレビューの利点: -カメラやセンサーなどのハードウェアへのアクセス

デバイス上の実際のデータを使用します (写真ライブラリなど)
最高の忠実度の UI 検証

(25:07) コードを変更すると、実マシン上のプレビューがすぐに更新されます。

.navigationTitle("Add Collage")

コード行を追加すると、実際のデバイスに新しいタイトルがすぐに表示されます。

重要ポイント

やるべきこと: プロジェクト内の各カスタムビューに追加します。#Preview- 実行する価値がある理由: ビューコードを変更すると、アプリ全体をコンパイルして実行しなくても、数秒で効果を確認できます。 UIKit プロジェクトでもこのワークフローを利用できます
開始方法: ビューソースファイルの最上位に追加します#Preview { YourView() }、キャンバスモードがオンになっていることを確認してください
内容: バリアントモードを使用して、すべてのダイナミックタイプサイズのレイアウトをチェックします
実行する価値がある理由: アクセシビリティには、最大フォントサイズのサポートが必要です。バリアントモードでは、すべてのサイズが一度に表示され、切り捨てや重複の問題をすばやく特定できます。
開始方法: [キャンバスバリアント] ボタンをクリックし、[ダイナミックタイプ] を選択して、各バリアントのレイアウトを確認します。
やるべきこと: タイムラインプレビューをウィジェットに追加し、タイムライン遷移アニメーションをテストします
実行する価値がある理由: ウィジェットのアニメーションはタイムラインエントリが切り替わったときにのみ発生しますが、これは通常テストが困難です。プレビューはこれらのトランジションをループできます
開始方法: を使用します#Preview(as: .systemSmall) { MyWidget() } timelineProvider: { MyProvider() }
やるべきこと: 実際のデバイスのプレビューを使用して、デバイスデータに依存するビューをテストします。
価値がある理由: シミュレーターには実際の写真、連絡先、健康データはありません。これらの実機データを用いて、実機プレビューを直接検証することができます。
開始方法: デバイスセレクターを使用して、接続されている実デバイスを選択し、開発資産に必要なテストリソースがあることを確認します。

Build programmatic UI with Xcode Previews

ハイライト

主要内容

基本的な使い方

UIKit と AppKit のサポート

3 つのキャンバスモード

ウィジェットのプレビュー

ピンとループ

詳細

ライブラリターゲットでのプレビューの使用

Development Assets

実機プレビュー

重要ポイント

関連セッション

コメント

ハイライト

主要内容

基本的な使い方

UIKit と AppKit のサポート

3 つのキャンバス モード

ウィジェットのプレビュー

ピンとループ

詳細

ライブラリターゲットでのプレビューの使用

Development Assets

実機プレビュー

重要ポイント

関連セッション

コメント

3 つのキャンバスモード