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，您可以在情节提要/ Interface Builder中布置视图时看到结果。

将Grad Border View宽度设置为240的情况如下：

，并且将Grad Border View的宽度设置为320：

在自定义UIView边界上设置渐变颜色

1 个答案: