Swift实现带垂直透明渐变的左右颜色渐变自定义UIView

核心思路 #

要实现水平从红到蓝渐变，同时垂直方向从顶部不透明到底部完全透明的效果，最简洁可靠的方式是：

• 先创建一个水平颜色渐变的图层
• 给该图层添加一个垂直方向的透明度渐变遮罩（mask），遮罩从上到下从完全不透明变为完全透明，以此让底部的颜色渐变区域逐渐消失。

正确实现代码 #

class GradientAlphaView: UIView {
    private let colorGradientLayer = CAGradientLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayers()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayers()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 布局更新时同步图层frame
        colorGradientLayer.frame = bounds
        (colorGradientLayer.mask as? CAGradientLayer)?.frame = bounds
    }
    
    private func setupLayers() {
        // 1. 设置水平颜色渐变层
        colorGradientLayer.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
        colorGradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        colorGradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
        layer.addSublayer(colorGradientLayer)
        
        // 2. 创建垂直透明度渐变遮罩
        let alphaMaskLayer = CAGradientLayer()
        // 遮罩颜色仅alpha通道生效：从上到下从完全不透明到完全透明
        alphaMaskLayer.colors = [
            UIColor.black.withAlphaComponent(1).cgColor,
            UIColor.black.withAlphaComponent(0).cgColor
        ]
        alphaMaskLayer.startPoint = CGPoint(x: 0.5, y: 0)
        alphaMaskLayer.endPoint = CGPoint(x: 0.5, y: 1)
        
        // 3. 给颜色渐变层添加遮罩
        colorGradientLayer.mask = alphaMaskLayer
    }
}

使用示例 #

// 在ViewController中添加测试视图
let testView = GradientAlphaView()
testView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(testView)

NSLayoutConstraint.activate([
    testView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
    testView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    testView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    testView.heightAnchor.constraint(equalToConstant: 100)
])

你之前实现的问题分析 #

1. 嵌套UIViews方案：
   • 错误地将黑色渐变层直接叠加在主视图上，主视图白色背景会遮挡子视图的颜色渐变，且未使用mask实现透明效果，逻辑完全错误。
2. 仅使用CAGradientLayers方案：
   • 添加的黑色渐变层是普通图层叠加，未设置为mask，无法实现透明裁剪，只会让整体颜色变暗，达不到底部透明的效果。
3. 参考重构的方案：
   • layoutSubviews中重复调用setupGradient()，会不断新增子视图和图层，导致视图层级混乱；遮罩层使用clear到white的颜色，实现的是顶部透明底部遮挡的反向效果，与需求不符。

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