UINavigationBar大标题模式动画异常及自定义背景兼容咨询

这个问题我之前也碰到过，根源在于当我们修改导航栏为非半透明状态时，默认的大标题折叠/展开动画联动逻辑会被打断。下面给你两种可行的解决方案，优先推荐第一种苹果官方的配置方式，动画效果和App Store完全一致：

方案一：使用UINavigationBarAppearance（iOS 13+ 推荐） #

苹果在iOS 13引入了UINavigationBarAppearance，专门用来统一配置不同状态下的导航栏样式，同时能完美保留默认的动画联动。不管你是设置纯色背景还是渐变背景，都可以用这个方法实现：

代码示例： #

override func viewDidLoad() {
    super.viewDidLoad()
    loadData()
    
    if #available(iOS 13.0, *) {
        // 创建导航栏外观配置实例
        let appearance = UINavigationBarAppearance()
        
        // 👉 方式1：设置纯色不透明背景
        appearance.backgroundColor = .systemBlue
        
        // 👉 方式2：设置渐变背景（如果需要）
        // let gradientLayer = CAGradientLayer()
        // gradientLayer.colors = [UIColor.orange.cgColor, UIColor.red.cgColor]
        // gradientLayer.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 44)
        // let gradientImage = UIGraphicsImageRenderer(size: gradientLayer.bounds.size).image { context in
        //     gradientLayer.render(in: context.cgContext)
        // }
        // appearance.backgroundImage = gradientImage
        
        // 关闭半透明效果（确保背景完全不透明）
        appearance.backgroundEffect = nil
        // 保留导航栏底部阴影（可选，和默认样式一致）
        appearance.shadowColor = .systemGray4
        
        // 将配置应用到导航栏的所有状态
        navigationController?.navigationBar.standardAppearance = appearance
        navigationController?.navigationBar.scrollEdgeAppearance = appearance
        navigationController?.navigationBar.compactAppearance = appearance
        
        // 开启大标题模式
        navigationController?.navigationBar.prefersLargeTitles = true
    }
}

为什么有效？ #

scrollEdgeAppearance负责大标题完全展开时的导航栏样式，standardAppearance对应折叠后的样式，把两者设为一致后，系统会自动处理两种状态之间的平滑过渡动画，完全复刻App Store的效果。

方案二：兼容iOS 11-12的自定义方案 #

如果你的App需要支持iOS 11或12，可以通过监听滚动视图的滚动事件，手动同步导航栏背景的动画：

步骤1：添加滚动监听 #

override func viewDidLoad() {
    super.viewDidLoad()
    loadData()
    
    if #available(iOS 11.0, *) {
        navigationController?.navigationBar.prefersLargeTitles = true
        // 关闭自动调整内边距，避免布局冲突
        collectionView?.contentInsetAdjustmentBehavior = .never
    } else {
        automaticallyAdjustsScrollViewInsets = false
    }
    
    // 添加自定义背景视图（以渐变为例）
    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = [UIColor.orange.cgColor, UIColor.red.cgColor]
    gradientLayer.frame = navigationController?.navigationBar.bounds ?? .zero
    let gradientView = UIView(frame: navigationController?.navigationBar.bounds ?? .zero)
    gradientView.layer.addSublayer(gradientLayer)
    gradientView.tag = 100 // 标记视图方便后续查找
    gradientView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    navigationController?.navigationBar.insertSubview(gradientView, at: 0)
    
    // 关闭半透明
    navigationController?.navigationBar.isTranslucent = false
    // 设置导航栏背景色为透明（让自定义背景显示）
    navigationController?.navigationBar.barTintColor = .clear
    
    // 监听滚动事件
    collectionView?.delegate = self
}

步骤2：同步滚动动画 #

extension YourViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        guard let navigationBar = navigationController?.navigationBar,
              let gradientView = navigationBar.subviews.first(where: { $0.tag == 100 }) else { return }
        
        // 计算大标题折叠进度（0=完全展开，1=完全折叠）
        let offsetY = scrollView.contentOffset.y
        let progress = min(max(offsetY / 44, 0), 1)
        
        // 调整背景视图的位置，模拟默认动画
        gradientView.frame = CGRect(
            x: 0,
            y: -progress * 44, // 随着滚动向上偏移
            width: navigationBar.bounds.width,
            height: navigationBar.bounds.height + progress * 44 // 高度同步增加
        )
    }
}

总结 #

• iOS 13及以上优先用方案一，代码简洁且动画完全符合系统规范；
• iOS 11-12可以用方案二手动同步动画，效果也能接近默认表现。

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