Показать состояние контроллера с помощью knStateView

Вы когда-нибудь добавляли пустое состояние в свое приложение? Как вы показываете загрузку или состояние ошибки при вызове API?

Где-то на Github есть несколько библиотек, вы можете сами поискать, чтобы найти лучшую для вас.

Сегодня я покажу вам свой подход, knStateView. Вы можете скачать мою демо-версию на кнстатевиев

  • Сделать вид с iconImageView, titleLabelа также subtitleLabel.
  • Изменить содержимое по состоянию
  • Установите пользовательский контент, переопределив состояние в contentLibrary
  • Установите пользовательское представление состояния, переопределив состояние в customViewsLibrary.
enum knState: String {
    case success
    case noInternet, error, empty, loading
}

Вы можете проверить содержимое knStateView в проекте. Я объясню некоторые основные вещи здесь

customViewsLibrary

customViewsLibrary — это словарь [knState: UIView] содержать пользовательские интерфейсы для каждого состояния.

Если вы хотите настроить error состояние вашего собственного пользовательского интерфейса, установите его здесь

stateView.setCustomView(your_own_UI, for: .error)

Состояние ошибки по умолчанию
Состояние ошибки по умолчанию

Пользовательское состояние ошибки
Пользовательское состояние ошибки

ContentLibrary

contentLibrary — это словарь knState.noInternet: (String, String, String) чтобы получить значок, заголовок, подзаголовок для каждого состояния. Вы можете переопределить желаемое состояние.

setState

private func setState(_ value: knState) {
    currentView?.removeFromSuperview()

// (1)
    if let view = customViewsLibrary[value] {
        currentView = view
        addSubviews(views: view)
        view.center(toView: self)
        return
    }

// (2)
    if let data = contentLibrary[value] {
        setData(data)
        return
    }

// (3)
    if value == .success {
        removeFromSuperview()
    }
}

(1)

Если существует пользовательское представление для нового состояния, мы переносим это представление в пользовательский интерфейс.

(2)

contentLibrary содержит наш контент по умолчанию для 4 состояний. Мы получаем данные из contentLibrary для отображения пользовательского интерфейса по умолчанию.

Если вы уже переопределили состояние в contentLibraryон показывает ваш новый контент.

Если значок является URL-адресом, мы загружаем значок автоматически.

(3)

Если ваше приложение находится в состоянии успеха, просто удалите представление текущего состояния.

Как показать knStateView

Есть 2 способа показать это

  • Добавьте вручную в корневой вид и установите для него автоматический макет.
  • Добавить к определенному представлению и knStateView заполнить все пространство вашего взгляда.
  • Ваше пользовательское представление должно иметь размер (или внутренний размер содержимого).
  • Вы можете удалить iconImageView или же titleLabel или же subtitleLabel установив его пустым в contentLibrary.
    Например: удалить subtitleLabel
stateView.setContent(image: "loading_2",
                             title: "New loading view",
                             subtitle: "",
                             for: .loading)
  • Вы можете добавить в это обратный вызов повторной попытки. Я делаю это не для простоты.

Этот подход позволяет мне использовать пользовательский интерфейс по умолчанию или специальный пользовательский интерфейс для некоторых экранов.
Что вы делаете с представлением состояния? Поделитесь мной в комментарии.

Наслаждайтесь кодированием.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *