Установить цвет градиента на пользовательской границе UIView

Question

У меня есть UIView, который содержит 2 UILabels с кнопкой внутри, и я хотел бы добавить градиентный цвет к его границе.Мне удалось добавить его, и кнопка в конечном итоге вышла за пределы пользовательского UIView с пользовательским UIView, также уменьшающимся полностью на небольших устройствах.Как я могу исправить UIView, чтобы он оставался таким же размером, когда я добавляю gradient color

Вот начальный UIView с двумя UILabels и кнопкой внутри с нормальным цветом границы перед

А вот как это выглядит после применения к нему градиентного цвета

Вот мой код того, как я применяю градиент.

@IBOutlet weak var customView: UIView!

let gradient = CAGradientLayer()
        gradient.frame.size = self.customView.frame.size
        gradient.colors = [UIColor.green.cgColor, UIColor.yellow.cgColor, UIColor.red.cgColor]
        gradient.startPoint = CGPoint(x: 0.1, y: 0.78)
        gradient.endPoint = CGPoint(x: 1.0, y: 0.78)
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = UIBezierPath(rect:   self.customView.bounds).cgPath
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.black.cgColor
        shapeLayer.lineWidth = 4
        gradient.mask = shapeLayer
        self.customView.layer.addSublayer(gradient)

Answer 1

Слои не меняются при изменении размера представления, поэтому вы хотите создать настраиваемое представление и переопределить layoutSubviews().

Вот пример:

@IBDesignable
class GradBorderView: UIView {

    var gradient = CAGradientLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    func commonInit() -> Void {
        layer.addSublayer(gradient)
    }

    override func layoutSubviews() {

        gradient.frame = bounds
        gradient.colors = [UIColor.green.cgColor, UIColor.yellow.cgColor, UIColor.red.cgColor]
        gradient.startPoint = CGPoint(x: 0.1, y: 0.78)
        gradient.endPoint = CGPoint(x: 1.0, y: 0.78)
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = UIBezierPath(rect: bounds).cgPath
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.black.cgColor
        shapeLayer.lineWidth = 4
        gradient.mask = shapeLayer

    }

}

Теперь, когда ваше представлениеизменяя размер в зависимости от ограничений и автоматического размещения, граница градиента будет корректно «автоматически изменять размер».

Кроме того, с помощью @IBDesignable вы можете увидеть результаты при разметке ваших представлений в раскадровке / Интерфейсном Разработчике.

Вот как это выглядит при ширине Grad Border View, установленной на 240:

и с Grad Border Viewширина установлена ​​на 320: