iOS如何设置Navigation Bar半透明毛玻璃效果？现有方案均无效

我想要将App的Navigation Bar设置为半透明效果，不需要完全透明，要求可以透出下方页面内容的颜色并带有毛玻璃模糊效果，效果参考截图：

我已经尝试了数十种方案均未生效，尝试过的代码如下：

let bounds = self.navigationController?.navigationBar.bounds as CGRect!
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
visualEffectView.frame = bounds
self.navigationController?.navigationBar.addSubview(visualEffectView)
self.navigationController.navigationBar.translucent = YES;

第二段尝试代码：

let blurEffect = UIBlurEffect(style: UIBlurEffect.Style.dark)
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = (self.navigationController?.navigationBar.bounds)!
self.navigationController?.navigationBar.addSubview(blurEffectView)darkUIBlurEffect.Style

第三段尝试代码：

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default) //UIImage.init(named: "transparent.png")
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.view.backgroundColor = .clear

第四段尝试代码：

self.navigationController?.navigationBar.isTranslucent = true

除此之外我还在Main.storyboard的Attributes Inspector中勾选了Translucent选项，设置页参考截图：

以上所有方法都没有生效，请问应该如何解决？

失效原因 #

你之前尝试的方案无法生效主要有两点核心问题：

• iOS 13及以上版本引入了UINavigationBarAppearance专门统一管控导航栏样式，旧的直接修改属性、手动添加子视图的方案会被系统自动生成的背景层覆盖
• 手动添加的UIVisualEffectView没有适配导航栏安全区域，也没有调整到正确层级，同时导航栏默认背景色未完全置空，挡住了毛玻璃效果

兼容全系统的实现代码 #

以下Swift代码支持iOS 11及以上版本，可直接放到视图控制器的viewDidLoad方法中使用：

guard let navBar = navigationController?.navigationBar else { return }

// 基础半透配置
navBar.isTranslucent = true
navBar.tintColor = .systemBlue // 可自行修改导航栏按钮、标题的颜色
navBar.setBackgroundImage(UIImage(), for: .default)
navBar.shadowImage = UIImage()

// 适配iOS13+新的外观API
if #available(iOS 13.0, *) {
    let appearance = UINavigationBarAppearance()
    // 毛玻璃效果配置，可根据需求替换style：.systemUltraThinMaterial（最透）、.systemThinMaterial、.systemMaterial、.systemThickMaterial（最不透）
    appearance.backgroundEffect = UIBlurEffect(style: .systemMaterial)
    // 调整背景透明度，0为全透明，1为完全不透明，可自行调整到需要的半透效果
    appearance.backgroundColor = .systemBackground.withAlphaComponent(0.15)
    // 隐藏默认底部分割线
    appearance.shadowColor = .clear
    // 应用到所有状态的导航栏
    navBar.standardAppearance = appearance
    navBar.scrollEdgeAppearance = appearance
    if #available(iOS 15.0, *) {
        navBar.compactScrollEdgeAppearance = appearance
    }
}

注意事项 #

• 不要手动给导航栏添加子视图，系统会自动管理毛玻璃层，手动添加的视图层级不对会遮挡标题、按钮等导航元素
• 确保页面的主视图或滚动视图布局延伸到导航栏底部，不要额外设置顶部内边距避开导航栏，否则看不到透出的下层内容
• 如果需要适配明暗模式，直接修改UIBlurEffect的style即可，系统会自动适配对应的模糊效果

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