feat: skeletons api

[castlele]

Skeletons API

Как настроить

1. Подписать UIView или UIViewController под протокол SkeletonsPresenter
2. Реализовать свойство skeletonsConfiguration
3. Добавить методы showSkeletons() и hideSkeletons()в нужные места
4. (Опционально) переопределить свойство viewsToSkeletone, добавив в него только те view, которые необходимо конвертировать в скелетоны

Пример добавления скелетонов на существующий контроллер

Screen.Recording.2023-03-01.at.17.52.57.mov

Как сконфигурировать "под себя"

Для конфигурации скелетонов существует класс SkeletonsConfiguration который определяется внутри объекта реализующего протокол SkeletonsPresenter

Возможные опции для настройки:

Анимация

SkeletonsConfiguration для настройки анимации принимает тип (SkeletonsLayer) -> CAAnimationGroup. Это означает, что при необходимости вы можете создать любую необходимую анимацию.

Однако для удобства существует уже определенный класс SkeletonsAnimationBuilder со статическим методом createDirectionalGradientAnimation(_:) для создания анимаций в одну из сторон:

public enum SkeletonsAnimationDirection {
    case leftToRight
    case rightToLeft
    case topToBottom
    case bottomToTop
    case topLeftToBottomRight
    case topRightToBottomLeft
    case bottomLeftToTopRight
    case bottomRightToTopLeft
}

Screen.Recording.2023-03-01.at.19.28.09.mov

var skeletonsConfiguration: SkeletonsConfiguration {
        SkeletonsConfiguration(animation: { _ in 
            SkeletonsAnimationBuilder.createDirectionalGradientAnimation(.init(direction: .leftToRight, duration: 1.5)) 
        })
}

Screen.Recording.2023-03-01.at.19.27.51.mov

var skeletonsConfiguration: SkeletonsConfiguration {
        SkeletonsConfiguration(animation: { _ in 
            SkeletonsAnimationBuilder.createDirectionalGradientAnimation(.init(direction: .topToBottom, duration: 1.5)) 
        })
}

Цвет

За настройку цвета отвечает параметр skeletonsBackgroundColor: основной цвет скелетонов, им будет заливаться фон и выделяться border

var skeletonsConfiguration: SkeletonsConfiguration {
    let animation = SkeletonsAnimationBuilder.createDirectionalGradientAnimation(.init())

    return .init(animation: { _ in animation },
                 skeletonsBackgroundColor: .red)
}

Форма

Форму можно настраивать отдельно для UILabel, UITextView, UIImageView и остальных вью.

Например, картинки можно сделать круглыми, а лейблы прямоугольные с закругленными краями:

var skeletonsConfiguration: SkeletonsConfiguration {
    let labelConf = LabelSkeletonsConfiguration(shape: .rectangle(cornerRadius: 10))
    let imageConf = BaseViewSkeletonsConfiguration(shape: .circle)

    return .init(labelConfiguration: labelConf,
                 imageViewConfiguration: imageConf)
}

Для UILabel и UITextView есть возможность настроить высоту каждой строчки, расстояние между ними и их количество.

Что если нужно больше?

Если стандартной настройки не хватает, то в конфигуратор можно передать объект, соответствующий протоколу SkeletonsConfigurationDelegate через который можно настроить слой скелетона для каждой вью отдельно

public protocol SkeletonsConfigurationDelegate: AnyObject {
    func layerDidConfigured(forViewType type: SkeletonLayer.ViewType, layer: SkeletonLayer)
}