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

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

В этой статье я покажу как добавить свою View в Xcode Library с помощью LibraryContentProvider.


Имя Автора
Автор Никита Россик Увлекаюсь разработкой под .

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

Библиотека `Views` в Xcode.

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

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)
    }
}

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

Как будет выглядеть `UserProfileView`.

Создаём файл 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
    )
)

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

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


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

Жизненный цикл ´UIViewController´

Рассмотрим когда вызываются методы контроллера и что можно делать внутри них. Когда настраивать вьюхи и данные.

Поиск и модификатор ´Searchable´ в SwiftUI

Поиск в SwiftUI. Работаем с модификатором Searchable.

Альтернативные иконки для тестов Product Page Optimization

Как добавить альтернативные иконки для A/B тестов на странице приложения.

Отступы Edge Insets для ´UIButton´

Как добавить отступ между картинкой и заголовком в кнопке. Как поместить иконку справа от заголовка.

В telegram-канале приходят уведомления о новых туториалах. В чате для iOS разработчиков ответят на вопросы.

Открыть Telegram-канал