Xcodeには要素ライブラリーが含まれており、SwiftUIビュー要素を簡単に閲覧できるようになっています。これはコンポーネントの使用にあたってコンポーネント名を覚えておく必要がないので便利です。
自作の SwiftUI 要素をXcodeライブラリに追加することも可能です。これは、あなたが開発した SwiftUI ビューを使って Swift Package
を開発する場合に便利です。他の開発者があなたの Swift Package
を使うときに、あなたのライブラリに何が含まれているかをすぐに理解することができます。
また、Xcodeでは、プロジェクト内のすべてのファイルやインポートした SwiftUI パッケージのビュー要素を表示することができるのも利点の一つです。
XcodeのSwiftUIライブラリーを利用する
まず最初に、SwiftUIのプレビュー画像が、Xcodeウィンドウのコードの右側に表示されていることを確認してください。表示されていない場合は、レイアウトボタンをクリックし、Canvas
を切り替えてください。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F635330%2Fd49f8009-2bf7-d99d-27ef-7b8de1cb2aca.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f5ba5a379eef7d8a4965d4776b7044fc)
Xcode SwiftUIライブラリを開くには、Xcodeウィンドウの上部にあるプラスアイコンをクリックします。キーボードショートカットの command-shift-L
を使用することもできます。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F635330%2F6669d93f-277e-286e-9756-541877a35161.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4b5091ba8263835b879e42c9d18e291b)
選択できるタブは複数あります。
1番目のタブにはSwiftUIビュー要素が含まれています。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F635330%2F8603aff0-3e28-52cd-d705-256505b624c3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5a830a3cf7481a12c9c57c12427de2b9)
2番目のタブにはSwiftUI修飾子が含まれています。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F635330%2Ffe5a1e7e-180d-1662-66d5-6897a4245963.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7aa6ac4554b812c723c33bfcc9e32c8c)
項目をダブルクリックすると、その項目のコードがコードエディタの現在のカーソル位置に挿入されます。
独自のコンポーネントをライブラリに追加する
自分でデザインしたSwiftUIビューがたくさんあるならば、LibraryContentProvider
を使用してXcodeライブラリに追加することができます。
例えば、私は一匹の猫の情報を表示できるようにする CatInfoCell
という名前のSwiftUIビューを設計しました。
あなたは自分のプロジェクトの任意の1つのファイルで、LibraryContentProvider
に対して確認を行う構造体を作成します。この構造体の名前は問題になりません。
struct CatInfoLibraryContent: LibraryContentProvider {
@LibraryContentBuilder
var views: [LibraryItem] {
LibraryItem(
CatInfoCell(displayedCat: .example, displayCatImage: false),
title: "猫の情報ビュー",
category: .control
)
}
}
また、同じ要素に対して、異なる設定で複数のエントリを定義することもできます。
struct CatInfoLibraryContent: LibraryContentProvider {
@LibraryContentBuilder
var views: [LibraryItem] {
LibraryItem(
CatInfoCell(displayedCat: .example, displayCatImage: false),
title: "猫の情報ビュー",
category: .control
)
LibraryItem(
CatInfoCell(displayedCat: .example, displayCatImage: true),
title: "画像付きの猫の情報ビュー",
category: .control
)
}
}
これで、Xcode ライブラリで以下の2つのビュー要素を見ることができるようになります。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F635330%2Fab9a9756-a8d0-ca1b-dc56-cce5c53f8e76.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c0880501ab47f620fbfae99f7fc2f6f1)
Xcode ライブラリから要素を追加すると、LibraryContentProvider
構造体で定義した構成が提供されます。
![image.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F635330%2F185219c5-6b79-529b-5df0-88354f27d5ae.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=359b221255ba75134f72e42ab9dab28c)
Xcodeライブラリに独自のビューモディファイアを追加
ライブラリに自分のビューモディファイアを追加することもできます:
struct CatInfoLibraryContent: LibraryContentProvider {
@LibraryContentBuilder
var views: [LibraryItem] {
//...
}
@LibraryContentBuilder
func modifiers(base: Text) -> [LibraryItem] {
LibraryItem(
base.makeRoundedButton(color: .orange)
)
}
}
結論
もしあなたのプロジェクトが少数のカスタムビューエレメントしか持たないシンプルなものである場合は、Xcode SwiftUIライブラリを使用する必要はないかもしれません。
しかし、もし多数のカスタムエレメントがある場合や、チームでプロジェクトに取り組んでいる場合は、Xcodeライブラリにエレメントを追加することで、自分が設計したエレメントを他の人たちが利用したり理解したりするのがより簡単になる可能性があります。