ハイライト
Xcode 12 に合格しました
LibraryContentProvider開発者がカスタム SwiftUI ビューとモディファイアをドラッグ可能として登録できるようにするLibraryItem, Xcode は、ソース コードをスキャンした後、これらのエントリをライブラリに表示し、挿入時にプレビューを維持してレンダリングを続行します。
主要内容
SwiftUI プロジェクトが大きくなるにつれて、再利用可能なビューが別のファイルやパッケージに隠されることがよくあります。チームメンバーはシステムを知っているButton、TextXcode ライブラリからドラッグして取り出すこともできますが、プロジェクト内にすでに書かれたものが存在することに気づかないかもしれません。SmoothieRowView。毎回ファイル名と手書きの初期化パラメータの検索に頼っていると、プレビューのビジュアル編集の利点が損なわれてしまいます。
Xcode 12 では、これを Swift コードに戻します。開発者は宣言しますLibraryContentProvider重要なビューまたは修飾子を入力してラップします。LibraryItem。これらのエントリは Xcode ライブラリに表示され、ユーザーはコードまたはキャンバスにドラッグできます。挿入されたコンテンツはコンパイル可能な Swift サンプルのままであり、プレビューは引き続き更新されます。
デモプロジェクトFrutaでは、SmoothieRowView元々は、複数のインターフェイスで再利用された一般的な SwiftUI View でした。ライブラリに登録すると、Xcode はこのエントリを自動的に検出し、プロジェクト カテゴリとタイトルを生成します。挿入するときに使用します.lemonberryプレースホルダー データとしてパラメーターはトークン化され、開発者はそれらを現在のリスト内のパラメーターに直接置き換えることができます。smoothie。
ビューだけが入り口ではありません。スピーチの後半Image共通のresizable、aspectRatio、frame3回連続通話のコミッションresizedToFill(width:height:)、それをモディファイア ライブラリに追加します。 Xcodeの場合baseパラメーターは、変更されたオブジェクトと挿入される実際のモディファイアーを区別し、最終的にはモディファイアー呼び出しのみがコードに書き戻されます。
このメカニズムではプロジェクトを実行する必要はありません。 Xcode はワークスペース内のソース コードをスキャンして見つけます。LibraryContentProvider免責事項;このコードはリリース ビルドでは実行されず、配布製品のビルド時に削除されます。スキャン スコープには依存関係が含まれるため、Swift パッケージはそのビューをライブラリに公開することもできます。 Fruta の例の栄養成分表パッケージはこの方法で提供されます。CalorieCountView。
詳細
LibraryContentProvider入り口です (01:57)
Xcode ライブラリを拡張するには、まず、LibraryContentProviderタイプ。プロトコルには 2 つの入り口があります。viewsView エントリを提供します。modifiers(base:)修飾子のエントリを提供します。どちらも戻りますLibraryItem配列。
public protocol LibraryContentProvider {
@LibraryContentBuilder
var views: [LibraryItem] { get }
@LibraryContentBuilder
public func modifiers(base: ModifierBase) -> [LibraryItem]
}キーポイント:
viewsXcode のビュー ライブラリを拡張するために使用されます。modifiers(base:)モディファイア ライブラリを拡張するために使用されます。@LibraryContentBuilderプロバイダーが複数を返すことを許可するLibraryItem。- プロバイダーは Swift コードの隣に配置され、コンパイラーは API が変更されたときにその項目が引き続き機能するかどうかを検出するのに役立ちます。
エントリは、挿入できる完成したコンテンツの一部です (02:32)
LibraryItem挿入される補完は少なくとも必要です。可視性、タイトル、カテゴリも取得できます。デモンストレーションでは、SmoothieRowView使用.lemonberryデフォルトデータとして、カテゴリーが選択します.control。
LibraryItem(
SmoothieRowView(smoothie: .lemonberry),
visible: true,
title: "Smoothie Row View",
category: .control
)キーポイント:
- 最初の行
SmoothieRowView(smoothie: .lemonberry)これは、ユーザーが項目を選択した後にコードに挿入されるコンテンツです。 visibleアイテムをライブラリに表示するかどうかを制御します。titleXcode が完了のみに基づいてタイトルを推測することを避けてください。category: .controlアイテムをより明確な機能分類にすると、デモ内のアイコンもコントロール スタイルに変わります。
同じビューに複数の構成を含めることができます (03:22)
スピーチでは、ビューとLibraryItem1対1の対応は必要ありません。SmoothieRowView通常バージョンまたはオープンバージョンがある可能性がありますshowNearbyPopularityバージョン。 2 番目のエントリでは、カスタム タイトルとの違いについて説明します。
struct LibraryContent: LibraryContentProvider {
@LibraryContentBuilder
var views: [LibraryItem] {
LibraryItem(
SmoothieRowView(smoothie: .lemonberry),
category: .control
)
LibraryItem(
SmoothieRowView(smoothie: .lemonberry, showNearbyPopularity: true),
title: "Smoothie Row View With Popularity",
category: .control
)
}
}キーポイント:
LibraryContentこの型名には特別な意味はなく、デモではプロバイダーをホストするためにのみ使用されます。- 初め
LibraryItem通常の挿入SmoothieRowView。 - 2番目
LibraryItemストラップを差し込むshowNearbyPopularity: true構成。 titleユーザーは、ライブラリの検索結果で 2 つの類似したアイテムを区別できるようになります。
修飾子は、繰り返しの呼び出しから最初に抽出されます (08:57)
Fruta プロジェクトではよく使用します。resizable、aspectRatio、frame写真で継続的に使用されます。スピーチでは、まずこれら 3 つのステップを要約します。Image拡張子を追加し、この機能をモディファイア ライブラリに追加します。
extension Image {
func resizedToFill(width: CGFloat, height: CGFloat) -> some View {
return self
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: width, height: height)
}
}キーポイント:
resizedToFill(width:height:)に記載されているImageオンなので、後続のプロバイダーはImageベースとして。resizable()画像のサイズを変更できるようにします。aspectRatio(contentMode: .fill)アスペクト比を維持し、ターゲット領域を塗りつぶします。frame(width:height:)最終的なビューの幅と高さを設定します。
baseどの部分が保持されるかを Xcode に指示します (09:17)
モディファイアを登録する場合、modifiers(base:)修飾子のパラメータのタイプは、修飾子のタイプと一致する必要があります。ここにありますImage。 Xcode が渡されましたbase変更されたオブジェクトと挿入されるモディファイアを区別します。ユーザーが得られるのは.resizedToFill(width:height:)この電話。
@LibraryContentBuilder
func modifiers(base: Image) -> [LibraryItem] {
LibraryItem(
base.resizedToFill(width: 100.0, height: 100.0)
)
}キーポイント:
base: Image対応するImage延長中resizedToFill。LibraryItem補完には次のものが含まれている必要がありますbase, そのため、Xcode は修飾子がどこにアタッチされているかを認識します。100.0はパラメータの例です。挿入後、パラメータはトークン化され、開発者はコンテキストに応じてパラメータを置き換えることができます。- このエントリは、ビュー タブではなく、モディファイア タブに表示されます。
Xcode はソース コードをスキャンしてライブラリ コンテンツを生成します (10:41)
講演は、Xcode ではライブラリを作成するためにプロジェクトをビルドしたり実行したりする必要はない、と述べて終わりました。ソースコードをスキャンしますLibraryContentProviderまた、宣言を解析することで、UI が途中でリファクタリングされ、プロジェクトが一時的に実行できなくなった場合でも、ライブラリのコンテンツを提供できるようになります。
この一連のスキャンでは、ワークスペース内の依存関係もカバーされます。 Fruta が依存する栄養成分表 Swift パッケージが公開されるCalorieCountView, Xcode によってパッケージのカテゴリが作成されます。開発者は、パッケージのソース コードを開かずに、このビューを見つけてライブラリに挿入できます。
重要ポイント
-
デザイン システム コンポーネント パネル 対処方法: プロジェクト内のボタン、カード、リスト行、空の状態ビューを Xcode ライブラリに登録します。 実行する価値がある理由: スピーチの中心的な問題点は API の見つけやすさであり、ライブラリは開発者がビジュアル コンテンツを見つけるためのエントリ ポイントです。 開始方法: コンポーネントが配置されているモジュールに追加します。
LibraryContentProvider、存在するviews実際のサンプル データを使用して複数の値を返しますLibraryItem。 -
同じコンポーネントに共通の状態を提供します 対処方法: 通常、読み込み中、空、エラー、または追加情報を含む複数のライブラリ エントリを含むビューを準備します。 実行する価値がある理由:
SmoothieRowViewデモでは 2 つを使用しますLibraryItem通常版と普及版を表します。 開始方法: 同じようにviewsビルダーで複数回作成されたLibraryItem、使用title各構成の目的を書き留めます。 -
高周波モディファイアチェーンを挿入可能なアイテムにします 対処方法: 画像のトリミング、丸い角、影、固定サイズなどの繰り返しのモディファイア チェーンをカプセル化し、モディファイア ライブラリに入れます。 やる価値がある理由: スピーキング
resizable、aspectRatio、frame合成resizedToFill(width:height:)、繰り返しの手書きを減らします。 開始方法: まずターゲットの型に拡張機能を記述し、それから実装します。modifiers(base:)、使用base.yourModifier(...)戻るLibraryItem。 -
Swift パッケージには視覚的なサンプルが付属しています 対処方法: ライブラリ コンテンツを共有パッケージでパブリック ビューに提供し、ユーザーが Xcode ライブラリから直接コンテンツを発見できるようにします。 実行する価値がある理由: Xcode はワークスペースの依存関係をスキャンするため、デモの栄養成分パッケージがライブラリに表示されます。 開始方法: パッケージのソース コードにプロバイダーを配置し、コンパイル可能なサンプル データとパブリック ビューごとに明確なタイトルを準備します。
関連セッション
- SwiftUI プレビュー用にアプリを構造化する — SwiftUI ビューのプレビューとテストを容易にするためにサンプル データ、データ フロー、入力設計を使用する方法について説明します。
- SwiftUI ビューを視覚的に編集 — Xcode プレビュー キャンバスを使用して SwiftUI インターフェイスを反復し、さまざまな環境で UI を検査する方法を示します。
- SwiftUI の概要 — 宣言型コード、SwiftUI ビューの構成、および Xcode コラボレーションから始めて、カスタム ビュー ライブラリ エントリの基盤を提供します。
- SwiftUI の新機能 — 再利用可能なコンポーネントの拡張に適した、2020 年の SwiftUI のアプリ、シーン、コントロール、スタイル、ウィジェットの更新の概要。
コメント
GitHub Issues · utterances