Быстрое превращение границы UIView в градиент цвета

Question

Я хочу создать градиентную границу на UIView.

Следующий код может создать тело для представления Box1.

Ничто из того, что я нашел, не позволяет мне изменить frameColor наградиент.

    var frameColor = UIColor.red.cgColor

    var leftBorder = CALayer()
    leftBorder.frame = CGRect(x: 0.0, y: 0, width: 1, height: box1.frame.size.height )
    leftBorder.backgroundColor = frameColor

Я использую Swift 5 и Xcode 11.

Спасибо.

Answer 1

Попробуйте с нижним расширением

public extension UIView {

private static let kLayerNameGradientBorder = "GradientBorderLayer"

func setGradientBorder(
    width: CGFloat,
    colors: [UIColor],
    startPoint: CGPoint = CGPoint(x: 0.5, y: 0),
    endPoint: CGPoint = CGPoint(x: 0.5, y: 1)
    ) {
    let existedBorder = gradientBorderLayer()
    let border = existedBorder ?? CAGradientLayer()
    border.frame = bounds
    border.colors = colors.map { return $0.cgColor }
    border.startPoint = startPoint
    border.endPoint = endPoint

    let mask = CAShapeLayer()
    mask.path = UIBezierPath(roundedRect: bounds, cornerRadius: 0).cgPath
    mask.fillColor = UIColor.clear.cgColor
    mask.strokeColor = UIColor.white.cgColor
    mask.lineWidth = width

    border.mask = mask

    let exists = existedBorder != nil
    if !exists {
        layer.addSublayer(border)
    }
}

func removeGradientBorder() {
    self.gradientBorderLayer()?.removeFromSuperlayer()
}

private func gradientBorderLayer() -> CAGradientLayer? {
    let borderLayers = layer.sublayers?.filter { return $0.name == UIView.kLayerNameGradientBorder }
    if borderLayers?.count ?? 0 > 1 {
        fatalError()
    }
    return borderLayers?.first as? CAGradientLayer
}

}

Использование

self.borderView.setGradientBorder(width: 5.0, colors: [UIColor.red , UIColor.blue])

Надеюсьэто достигнет вашего требования.

https://medium.com/@kushal0409/gradient-button-3dc8ef763039

Answer 2

Нет готового способа сделать это, но вы могли бы построить его самостоятельно.

С моей головы, подход может выглядеть так:

• Создайте CAGradientLayer и настройте его для рисования градиента по желанию.

• Создайте CAShapeLayer, который содержит пустой прямоугольник, который является вашей рамкой.

• Добавьте свой слой формы в качестве маски вашего градиентного слоя.

• Добавьте градиентный слой к своему виду в качестве подслоя его содержимого.слой.