LeadKit/docs/tiuielements/viewbackground.md

2.8 KiB
Raw Permalink Blame History

UIViewBackground

Для задания фона UIView можно использовать реализации протокола UIViewBackground:

UIViewColorBackground - сплошной фон одного цвета

import TIUIElements
import UIKit

let viewFrame = CGRect(origin: .zero,
                       size: CGSize(width: 164, height: 192))

let solidFillBackground = UIViewColorBackground(color: .green)

let genericView = UIView(frame: viewFrame)

solidFillBackground.apply(to: genericView)

Nef.Playground.liveView(genericView)

UIViewGradientBackground - градиентный фон

Для задания градиентного фона необходимо определить GradientValues и применить фон в UIView:

let gradientView = UIView(frame: viewFrame)

let gradientColorStart = UIColor(red: 0.8, green: 0.74, blue: 1, alpha: 1).cgColor
let gradientColorEnd = UIColor(red: 1, green: 0.82, blue: 0.84, alpha: 1).cgColor

let centerPoint = CGPoint(x: 0.98, y: 0.95)
let outerPoint = CGPoint(x: 0.02, y: .zero)

let gradientValues: GradientValues = .elliptical(stops: [
    (gradientColorStart, 0),
    (gradientColorEnd, 1)
],
                                                              center: centerPoint,
                                                              outerEdge: outerPoint)

let gradientBackground = UIViewGradientBackground(values: gradientValues)

gradientBackground.apply(to: gradientView)
gradientView.layer.round(corners: .allCorners, radius: 20)

Nef.Playground.liveView(gradientView)

Использование внутри кастомной view

Также возможно использование градиентного фона внутри кастомной view с более точным контролем над обновлением состояния

final class GradientView: BaseInitializableView {
    var gradientBackground = UIViewGradientBackground(observeViewBoundsChange: false) {
        willSet {
            gradientBackground.remove(from: self)
        }

        didSet {
            gradientBackground.gradientValues = gradientValues
        }
    }

    var gradientValues: GradientValues = GradientValues() {
        didSet {
            gradientBackground.gradientValues = gradientValues
        }
    }

    override func configureAppearance() {
        super.configureAppearance()

        gradientBackground.apply(to: self)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        gradientBackground.updateGradientLayer(bounds: bounds, in: self)
    }
}

let customGradientView = GradientView(frame: viewFrame)
customGradientView.gradientValues = gradientValues
customGradientView.layer.round(corners: .allCorners, radius: 20)

Nef.Playground.liveView(customGradientView)