如何为开启大标题的UINavigationController导航栏添加渐变背景

看起来你遇到的核心问题有两个：一是渐变层的层级不对导致效果被遮挡，二是用patternImage设置barTintColor无法适配导航栏的动态高度（大标题模式下导航栏高度会变化）。下面是修正后的方案：

问题分析 #

1. 层级错误：你在BrandedHeader里把渐变层插在了layer的第0位（最底层），而视图的backgroundColor是在渐变层之上的，所以绿色背景完全挡住了渐变效果，自然看不到过渡。
2. 尺寸适配问题：用patternImage设置导航栏背景时，图片的尺寸是固定的，无法跟随导航栏在大标题/普通模式下的高度变化，导致渐变无法铺满整个导航栏区域。

修正方案 #

我们直接给导航栏添加自定义背景视图，用AutoLayout约束确保它始终铺满导航栏，同时调整渐变层的层级让效果正确显示。

1. 修改BaseViewController的导航栏配置 #

private func configureNavigationBar() {
    navigationController?.navigationBar.prefersLargeTitles = true
    navigationController?.navigationBar.isTranslucent = false
    navigationItem.title = "Home"
    
    // 创建自定义背景视图
    let headerView = BrandedHeader()
    headerView.translatesAutoresizingMaskIntoConstraints = false
    navigationController?.navigationBar.addSubview(headerView)
    
    // 添加约束让视图完全铺满导航栏
    NSLayoutConstraint.activate([
        headerView.topAnchor.constraint(equalTo: navigationController!.navigationBar.topAnchor),
        headerView.leadingAnchor.constraint(equalTo: navigationController!.navigationBar.leadingAnchor),
        headerView.trailingAnchor.constraint(equalTo: navigationController!.navigationBar.trailingAnchor),
        headerView.bottomAnchor.constraint(equalTo: navigationController!.navigationBar.bottomAnchor)
    ])
    
    // 将背景视图放到最底层，避免遮挡标题、按钮等元素
    navigationController?.navigationBar.sendSubviewToBack(headerView)
}

2. 修正BrandedHeader的层级和布局逻辑 #

class BrandedHeader: UIView {
    let gradient: CAGradientLayer = CAGradientLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }
    
    private func setupView() {
        // 设置基础背景色为绿色
        backgroundColor = .green
        
        // 配置渐变层参数：从透明到黑色半透明，水平方向过渡
        gradient.colors = [UIColor.clear.cgColor, UIColor.black.withAlphaComponent(0.3).cgColor]
        gradient.locations = [0.0, 0.7]
        gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
        gradient.endPoint = CGPoint(x: 1.0, y: 0.0)
        
        // 将渐变层添加到视图层的最上层，这样就能覆盖在绿色背景上显示过渡效果
        layer.addSublayer(gradient)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 每次布局更新时，让渐变层铺满整个视图
        gradient.frame = bounds
    }
}

为什么这个方案有效？ #

• 用AutoLayout约束替代固定frame，确保背景视图始终跟随导航栏的尺寸变化（包括大标题收缩时的高度调整）。
• 把渐变层添加到视图层的上层，让它覆盖在绿色背景上，这样就能看到从透明到深色的过渡效果。
• 将背景视图发送到导航栏的子视图底层，避免遮挡导航栏的标题、按钮等交互元素。

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