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

Question

我有一个 UIView，其中包含一个 2 UILabels，里面有一个按钮，我想为其边界添加渐变颜色。我设法添加了它，但按钮最终移到了自定义 UIView 之外，而自定义 UIView 也在较小的设备上一直缩小到外面。添加 gradient color

时如何修复 UIView 以保持相同大小

这里是初始的 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，您可以在 Storyboard / Interface Builder 中布置视图时看到结果。

这是 Grad Border View 宽度设置为 240 时的样子：

并将 Grad Border View 宽度设置为 320:

编辑

如果我们想使用圆角，我们可以将形状图层路径设置为圆角矩形贝塞尔曲线路径，然后还设置视图图层的圆角半径。

例如：

override func layoutSubviews() {

    let cRadius: CGFloat = 8.0
    let bWidth: CGFloat = 4.0
    
    // layer border is centered on layer edge
    let half: CGFloat = bWidth * 0.5
    // make gradient frame size of view + half the border width
    gradient.frame = bounds.insetBy(dx: -half, dy: -half)
    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()
    // make shapeLayer path the size of view OFFSET by half the border width
    //  with rounded corners
    shapeLayer.path = UIBezierPath(roundedRect: bounds.offsetBy(dx: half, dy: half), cornerRadius: cRadius).cgPath
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = UIColor.black.cgColor
    shapeLayer.lineWidth = bWidth
    gradient.mask = shapeLayer
    
    // same corner radius as shapeLayer path
    layer.cornerRadius = cRadius
}

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

Set gradient color on custom UIView boarder

ios

swift

gradient

calayer

cagradientlayer