Swift中UIView底部渐变效果未正常显示的解决方法

你的代码存在两个核心问题，导致渐变效果不符合预期：

问题1：渐变层的Frame绑定错误 #

你将渐变层的frame设置为控制器根view的bounds，但实际应该绑定到目标view（viewBottomBorder）的边界，否则渐变层会超出目标view范围，或完全不显示在目标view内。

问题2：未处理AutoLayout后的布局更新 #

在viewDidLoad阶段，AutoLayout尚未完成最终布局，viewBottomBorder的bounds可能不是最终尺寸，导致渐变层的位置或大小出现偏差。

另外，若你需要的是从透明过渡到黑色的垂直方向底部渐变，可以明确设置渐变的起始点和结束点，确保方向符合预期。

修正后的代码 #

import UIKit

class GradientController: UIViewController {    
    @IBOutlet weak var viewBottomBorder: UIView!
    
    lazy var gradient: CAGradientLayer = {
        let gradient = CAGradientLayer()
        gradient.type = .axial
        // 渐变颜色：透明 -> 黑色
        gradient.colors = [UIColor.clear.cgColor, UIColor.black.cgColor]
        gradient.locations = [0, 1]
        // 设置渐变方向：从上到下（若需要从下到上可改为startPoint(0,1)、endPoint(0,0)）
        gradient.startPoint = CGPoint(x: 0, y: 0)
        gradient.endPoint = CGPoint(x: 0, y: 1)
        return gradient
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 将渐变层添加到目标view的layer层级中
        viewBottomBorder.layer.addSublayer(gradient)
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        // 布局完成后更新渐变层frame，确保与目标view边界完全匹配
        gradient.frame = viewBottomBorder.bounds
    }
}

额外优化建议 #

如果希望实现目标view内容从底部开始渐隐的效果，可以把渐变层设置为目标view的遮罩层，而非子layer：

// 替换viewDidLoad中的添加代码
viewBottomBorder.layer.mask = gradient

这样渐变层会作为遮罩，仅显示渐变范围内的内容，实现底部渐隐的视觉效果。

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