Как добавить кастомную SwiftUI View в библиотеку Xcode

Библиотека в Xcode предоставляет доступ к SwiftUI View, модификаторам modifiers, изображениям и т. д. Вы можете перетянуть выбранный элемент или кликнуть по нему дважды, чтобы добавить View в код.

Сделаем кастомную вью, которую будем добавлять в библиотеку. Я создам профиль пользователя. Пример модели:

struct User {
    
    let name: String
    let imageName: String
    let githubProfile: String
}

А так будет выглядеть вью:

struct UserProfileView: View {

    let user: User
    
    var body: some View {
        HStack {
            Image(user.imageName)
                .resizable()
                .frame(width: 40, height: 40)
                .clipShape(Circle())
            
            VStack(alignment: .leading) {
                Text(user.name)
                Text(user.githubProfile)
                    .foregroundColor(.gray)
            }
        }
        .padding(.all)
    }
}

А вот результат:

Создаём файл UserProfileLibrary.swift. Сначала определим структуру, которая наследуется от LibraryContentProvider.

//filename: UserProfileLibrary.swift

struct UserProfileLibrary: LibraryContentProvider {
    
    @LibraryContentBuilder
    var views: [LibraryItem] {
        LibraryItem(
            UserProfileView(
                user: User(
                    name: "Nikita",
                    imageName: "Nikita",
                    githubProfile: "wmorgue"
                )
            ),
            visible: true,    // будет ли доступна наша View в библиотеке
            title: "User Profile", // заголовок, который будет отображаться
            category: .control, // доступно несколько категорий на выбор
            matchingSignature: "UserProfile" // сигнатура для автокомплита
        )
    }
}

Потом с помощью LibraryContentProvider добавляем кастомные View в библиотеку Xcode.

И теперь перейдём в ContentView.swift файл и добавим пользователя.

Есть ограничения:

- Нельзя добавить описание к своей View, поэтому поле справа остаётся пустым — No Details.

- Нельзя добавить иконку.

- Когда добавляем View в код, добавляется также заранее _прописанное_ значение. В нашем случае это структура User():

UserProfileView(
    user: User(
        name: "Nikita",
        imageName: "Nikita",
        githubProfile: "wmorgue
    )
)

Надеюсь, в будущих версиях мы сможем добавлять описание и иконку.

Проект из туториала можно скачать.

---

Другие туториалы