在XIB创建的UIView中添加多色渐变图层失效问题求助

问题背景 #

尝试给XIB创建的separatorView添加包含6种颜色的渐变图层，但渐变效果未生效，目标是实现如图所示的渐变效果：

现有代码核心问题分析 #

1. UIColor初始化错误 #

UIColor的RGB参数要求是0.0-1.0的浮点数，你当前使用0-255的整数，超出范围的数值会被截断为1.0，导致颜色全部显示为白色，渐变自然失效。

2. Locations与Colors数量不匹配 #

传入的locations: [0.0, 1.0]仅2个位置，但颜色数组有6个元素，CAGradientLayer要求locations数组长度必须和colors一致，否则无法正确映射颜色位置。

3. 图层Frame未同步更新 #

XIB加载时self.bounds可能未确定正确尺寸，导致渐变图层frame错误；且未处理视图尺寸变化时的图层更新逻辑。

4. 默认参数逻辑混乱 #

applyGradient方法默认locations为[0.0, 0.0]，会导致渐变逻辑冲突，需移除不合理默认值。

修正后的完整代码 #

1. 修正颜色数组 #

let colors = [
    UIColor(red: 255/255.0, green: 252/255.0, blue: 252/255.0, alpha: 0).cgColor,
    UIColor(red: 126/255.0, green: 125/255.0, blue: 125/255.0, alpha: 1).cgColor,
    UIColor(red: 197/255.0, green: 195/255.0, blue: 195/255.0, alpha: 0.62).cgColor,
    UIColor(red: 126/255.0, green: 125/255.0, blue: 125/255.0, alpha: 1).cgColor,
    UIColor(red: 189/255.0, green: 189/255.0, blue: 189/255.0, alpha: 0.7).cgColor,
    UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 0.0).cgColor
]

2. 修正渐变方法调用 #

传入与颜色数量匹配的locations（可根据目标效果调整数值）：

self.separatorView.applyGradient(
    colors: colors,
    locations: [0.0, 0.15, 0.4, 0.6, 0.85, 1.0],
    direction: .leftToRight
)

3. 修正渐变方法实现 #

enum Direction {
    case topToBottom, bottomToTop, leftToRight, rightToLeft
}

extension UIView {
    func applyGradient(colors: [CGColor], locations: [NSNumber], direction: Direction = .leftToRight) {
        // 移除已存在的渐变图层，避免重复叠加
        layer.sublayers?.filter { $0 is CAGradientLayer }.forEach { $0.removeFromSuperlayer() }
        
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = bounds
        gradientLayer.colors = colors
        gradientLayer.locations = locations
        
        switch direction {
        case .topToBottom:
            gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
            gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)
        case .bottomToTop:
            gradientLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
            gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.0)
        case .leftToRight:
            gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
            gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
        case .rightToLeft:
            gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.5)
            gradientLayer.endPoint = CGPoint(x: 0.0, y: 0.5)
        }
        
        layer.addSublayer(gradientLayer)
        // 监听bounds变化，同步更新渐变图层frame
        addObserver(self, forKeyPath: "bounds", options: .new, context: nil)
    }
    
    override open func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if keyPath == "bounds" {
            layer.sublayers?.filter { $0 is CAGradientLayer }.forEach {
                $0.frame = bounds
            }
        }
    }
    
    deinit {
        removeObserver(self, forKeyPath: "bounds")
    }
}

额外优化建议 #

• 若使用Auto Layout，确保separatorView的约束已正确设置，避免初始bounds为零的情况。
• 可调整locations数组数值，比如让中间颜色区间占比更大，更贴近目标渐变效果。

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