iOS15-导航栏透明问题

问题描述

 

iOS 13 UINavigationBar 新增了 scrollEdgeAppearance 属性。

但是这个属性在 IOS14 及其更早的版本中 只应用在大标题导航栏上，在 iOS15 中这个属性适用于所有导航栏。

scrollEdgeAppearance 是 UINavigationBarAppearance 类型，里面有几个属性:

 

1. backgroundEffect：基于 backgroundColor 或 backgroundImage 的磨砂效果


2. backgroundColor：注意 这个属性在 backgroundImage 下（在某个界面单独设置导航栏颜色，直接使用 backgroundColor 无效，被 backgroundImage 遮住了)

 

如果设置导航栏透明 ，也会无效。

原因：新的导航栏 在加入 large 模式之后 apple 会对普通模式的 nav 的 _UIbarBackground 进行一次 alpha = 1 的设置。

我们直接改变其 subview 的 alpha 就好了。

解决方法：

3. backgroundImage：背景图片

4. backgroundImageContentMode : 渲染 backgroundImage 时使用的内容模式。 默认为 UIViewContentModeScaleToFill 。

5. shadowColor：底部分割线阴影颜色

6. shadowImage： 阴影图片

全局设置 导航栏透明问题

不透明

if #available(iOS 15.0, *) {
     let app = UINavigationBarAppearance()
     app.configureWithOpaqueBackground()  // 重置背景和阴影颜色
     app.titleTextAttributes = [
           NSAttributedString.Key.font: UIFont.systemFont(ofSize: 18),
           NSAttributedString.Key.foregroundColor: UIColor.white
     ]
     app.backgroundColor = UIColor.init(hexString: "#2C81EC")  // 设置导航栏背景色
     app.shadowColor = .clear
     UINavigationBar.appearance().scrollEdgeAppearance = app  // 带scroll滑动的页面
     UINavigationBar.appearance().standardAppearance = app // 常规页面。描述导航栏以标准高度
}

透明

因为 scrollEdgeAppearance = nil ，如果当前界面中使用可了 ScrollView ，当 ScrollView 向上滚动时 scrollEdgeAppearance 会默认使用 standardAppearance。因此 backgroundEffect 和 shadowColor 也要显式设置为 nil ，防止 backgroundEffect、shadowColor 出现变成有颜色

if #available(iOS 15.0, *) {
       let app = UINavigationBarAppearance()
       app.configureWithOpaqueBackground()  // 重置背景和阴影颜色
       app.backgroundEffect = nil
       app.titleTextAttributes = [
               NSAttributedString.Key.font: UIFont.systemFont(ofSize: 18),
               NSAttributedString.Key.foregroundColor: UIColor.white
       ]
       app.backgroundColor = .clear // 设置导航栏背景色
       app.shadowColor = nil
       UINavigationBar.appearance().scrollEdgeAppearance = nil  // 带scroll滑动的页面
       UINavigationBar.appearance().standardAppearance = app // 常规页面。描述导航栏以标准高度
 }