見出し画像

Xcode Libraryにカスタムビューとモディファイアを追加する

oocoocococo

環境

・Xcode 12.3

内容

Xcode Libraryにカスタムビ ューとモディファイアを追加する方法

サンプルは犬のリストを表示する画面

ビューの作成とImage拡張を作成
・犬情報を表示するビューDogRowViewを作成
・Imageのサイズ変更処理をするresizedToFit(width:height:)を作成

作成したビューやモディファイアをXcode Library(⌘+⇧+L)から呼び出すためにはLibraryContentProviderに準拠した構造体を用意する必要がある

LibraryContentProvider

・LibraryContentProviderに準拠
・LibraryContentBuilderを修飾
・カスタムビューの場合はvar views: [LibraryItem]を実装
・モディファイアの場合はfunc modifiers(base: Any) -> [LibraryItem]を実装
・LibraryItemはtitleやcategoryの指定も可能
・同じビューで引数が違う場合などはtitleをつける

/// カスタムライブラリーコンテンツ
struct LibraryContent: LibraryContentProvider {
   
   // カスタムビュー
   
   @LibraryContentBuilder
   var views: [LibraryItem] {
       LibraryItem(
           DogRowView(dog: .akitainu),
           category: .control // カテゴリーを指定
       )
       
       LibraryItem(
           DogRowView(dog: .akitainu, favorite: false),
           title: "Dog Row View With Favorite", // タイトルを指定
           category: .control // カテゴリーを指定
       )
   }
   
   // カスタムモディファイア
   
   @LibraryContentBuilder
   func modifiers(base: Image) -> [LibraryItem] {
       LibraryItem(
           base
               .resizedToFit(width: 80.0, height: 80.0),
               category: .effect // カテゴリーを指定
       )
   }
   
}

コード

結果

⌘+⇧+Lでライブラリを表示、検索などで利用可能になる

Views library

画像1

Modifiers library

画像2

画面

画像3

参考


この記事が気に入ったらサポートをしてみませんか？