Swift 使 UIView 边框变成渐变色

Question

我想在 UIView 上创建一个渐变边框。

以下代码可以为 View 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