为何UIView渐变边框显示为黑色？技术问题求助

以下是我尝试实现渐变边框的代码：

private let containerView: UIView = {
    let view = UIView()
    var gradientBorderLayer: CAGradientLayer?
    view.translatesAutoresizingMaskIntoConstraints = false
    view.backgroundColor = .white
    view.layer.cornerRadius = 15
    view.layer.borderWidth = 1
    gradientBorderLayer = view.getGradientWithBorderLayer(with: .gradientColorFirst, .gradientColorSecond)
    view.layer.addSublayer(gradientBorderLayer ?? CAGradientLayer())
    return view
}()

func getGradientWithBorderLayer(with firstColor: UIColor, _ secondColor: UIColor) -> CAGradientLayer {
    let gradientLayer = CAGradientLayer()
    let shapeLayer = CAShapeLayer()
    gradientLayer.frame =  CGRect(origin: CGPoint.zero, size: bounds.size)
    gradientLayer.colors = [firstColor.cgColor, secondColor.cgColor]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.1)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.1)

    shapeLayer.lineWidth = 3
    shapeLayer.path = UIBezierPath(roundedRect: bounds.insetBy(dx: shapeLayer.lineWidth, dy: shapeLayer.lineWidth), cornerRadius: layer.cornerRadius).cgPath
    shapeLayer.strokeColor = UIColor.black.cgColor
    shapeLayer.fillColor = UIColor.clear.cgColor
    gradientLayer.mask = shapeLayer

    return gradientLayer
}

我尝试通过上述代码为UIView设置渐变边框，但边框未显示预期的渐变颜色，而是呈现黑色。请问这可能是什么原因导致的？

问题原因分析 #

1. 视图布局未完成时创建渐变层
   在containerView的闭包初始化阶段，视图还未添加到父视图，也没有完成约束布局，此时bounds.size是CGSize.zero。这导致gradientLayer的frame为零，shapeLayer的路径也无效，渐变层根本无法正常显示。而你设置了view.layer.borderWidth = 1（默认边框颜色为黑色），所以最终看到的是这个默认的黑色边框。

2. 冗余的strokeColor设置
   mask层只关心图层的alpha通道，shapeLayer.strokeColor = UIColor.black.cgColor属于冗余代码——只要stroke区域是不透明的即可（默认就是不透明状态），这个设置对实际效果没有影响。

3. 渐变层未适配视图尺寸变化
   即便视图后续完成布局，你创建的gradientLayer也不会自动更新frame和路径，导致渐变边框无法匹配视图的实际尺寸。

修复方案 #

1. 移除初始化闭包中的渐变层创建代码，以及默认的borderWidth设置；
2. 将渐变边框的创建/更新逻辑移到layoutSubviews方法中，确保在视图尺寸确定后再处理；
3. 把gradientBorderLayer作为属性存储，避免重复创建图层。

修复后的代码示例：

private let containerView: UIView = {
    let view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.backgroundColor = .white
    view.layer.cornerRadius = 15
    // 移除默认黑色边框设置
    return view
}()

// 存储渐变边框层，复用避免重复创建
private var gradientBorderLayer: CAGradientLayer?

override func layoutSubviews() {
    super.layoutSubviews()
    // 每次布局更新渐变边框
    updateGradientBorder()
}

private func updateGradientBorder() {
    guard let containerBounds = containerView.superview?.bounds else { return }
    
    if let layer = gradientBorderLayer {
        // 已有图层，更新尺寸和路径
        layer.frame = containerBounds
        updateMaskPath(for: layer)
    } else {
        // 首次创建渐变层
        gradientBorderLayer = containerView.getGradientWithBorderLayer(with: .gradientColorFirst, .gradientColorSecond)
        containerView.layer.addSublayer(gradientBorderLayer!)
    }
}

private func updateMaskPath(for gradientLayer: CAGradientLayer) {
    guard let maskLayer = gradientLayer.mask as? CAShapeLayer else { return }
    let lineWidth: CGFloat = 3
    // 偏移lineWidth/2是为了让边框贴合视图圆角，避免超出范围
    maskLayer.path = UIBezierPath(roundedRect: containerView.bounds.insetBy(dx: lineWidth/2, dy: lineWidth/2), cornerRadius: containerView.layer.cornerRadius).cgPath
}

func getGradientWithBorderLayer(with firstColor: UIColor, _ secondColor: UIColor) -> CAGradientLayer {
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame = containerView.bounds
    gradientLayer.colors = [firstColor.cgColor, secondColor.cgColor]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.1)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.1)

    let shapeLayer = CAShapeLayer()
    shapeLayer.lineWidth = 3
    shapeLayer.fillColor = UIColor.clear.cgColor
    // 移除冗余的strokeColor设置
    shapeLayer.path = UIBezierPath(roundedRect: containerView.bounds.insetBy(dx: shapeLayer.lineWidth/2, dy: shapeLayer.lineWidth/2), cornerRadius: containerView.layer.cornerRadius).cgPath
    gradientLayer.mask = shapeLayer

    return gradientLayer
}

内容的提问来源于stack exchange，提问作者Miaperolla