iOS 15 导航栏透明

Question

我的 iOS 应用程序使用故事板作为 UI，并使用自定义色调作为导航栏的背景颜色。

我已经在 Xcode 13 beta 5 上测试了我的应用程序，导航栏为“白色”，并且导航栏上的文本不可见。

在https://developer.apple.com/forums/thread/682420的苹果开发者论坛中，它指出“在 iOS 15 中，UIKit 已将scrollEdgeAppearance（默认情况下会生成透明背景）的使用扩展到所有导航栏”。要恢复旧的外观，您必须采用新的 UINavigationBar 外观 API

我将以下代码（来自上面的链接）添加到应用程序委托“application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions”：

        if #available(iOS 13, *) {
            let navigationController = UINavigationController(navigationBarClass: nil, toolbarClass: nil)
            let navigationBar = navigationController.navigationBar
            let appearance = UINavigationBarAppearance()
            appearance.configureWithOpaqueBackground()
            appearance.backgroundColor = UIColor(red: 0.0/255.0, green: 125/255.0, blue: 0.0/255.0, alpha: 1.0)
            navigationBar.standardAppearance = appearance;
            navigationBar.scrollEdgeAppearance = navigationBar.standardAppearance
            navigationBar.isTranslucent = false
        }

这并不能解决问题。我仍然在故事板编辑器中为导航栏设置了自定义色调。我是否需要删除自定义色调，或者我是否错误地实现了外观 API？

Answer 1

要使用您自己的配色方案，请使用以下命令：

迅速

// White non-transucent navigatio bar, supports dark appearance
if #available(iOS 15, *) {
    let appearance = UINavigationBarAppearance()
    appearance.configureWithOpaqueBackground()
    UINavigationBar.appearance().standardAppearance = appearance
    UINavigationBar.appearance().scrollEdgeAppearance = appearance
}

Objective-C

if (@available(iOS 15.0, *)) {
    UINavigationBarAppearance *navBarAppearance = [[UINavigationBarAppearance alloc] init];
    navBarAppearance.backgroundColor = [UIColor redColor];
    [navBarAppearance configureWithOpaqueBackground];
    [UINavigationBar appearance].standardAppearance = navBarAppearance;
    [UINavigationBar appearance].scrollEdgeAppearance = navBarAppearance;
}

要获得默认的半透明行为（iOS 15 之前的默认行为），只需设置scrollEdgeAppearance：

迅速

if #available(iOS 15, *) {
    UINavigationBar.appearance().scrollEdgeAppearance = UINavigationBarAppearance()
}

Objective-C

if (@available(iOS 15.0, *)) {
    [UINavigationBar appearance].scrollEdgeAppearance = [[UINavigationBarAppearance alloc] init]; 
}

Answer 2

无需更改故事板中的任何内容。这是添加到 App Delegate 后最终起作用的解决方案application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions：

//Fix Nav Bar tint issue in iOS 15.0 or later - is transparent w/o code below
if #available(iOS 15, *) {
    let appearance = UINavigationBarAppearance()
    appearance.configureWithOpaqueBackground()
    appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
    appearance.backgroundColor = UIColor(red: 0.0/255.0, green: 125/255.0, blue: 0.0/255.0, alpha: 1.0)
    UINavigationBar.appearance().standardAppearance = appearance
    UINavigationBar.appearance().scrollEdgeAppearance = appearance
}

请注意，必须将标题文本属性设置为“白色”，因为如果未指定该属性，则标题文本默认为黑色。

另请注意，这仅适用于 iOS 版本 15.0 或更高版本。它不适用于早期版本，因为故事板导航栏自定义色调是默认行为。

Answer 3

如果有人需要G. Steve答案的Objective C版本

if (@available(iOS 15, *)){
        UINavigationBarAppearance *appearance = [[UINavigationBarAppearance alloc] init];
        [appearance configureWithOpaqueBackground];
        appearance.titleTextAttributes = @{NSForegroundColorAttributeName : UIColor.whiteColor};
        appearance.backgroundColor = [UIColor colorWithRed:0.0/255.0 green:125/255.0 blue:0.0/255.0 alpha:1.0];
        [UINavigationBar appearance].standardAppearance = appearance;
        [UINavigationBar appearance].scrollEdgeAppearance = appearance;
    }

Answer 4

它在界面构建器中为我排序（xcode 13 - 针对 iOS 13 及更高版本进行了测试），并且不需要检查 iOS 15 可用性（即 @available）

1. 选择导航栏的标准外观和滚动边缘外观。

2. 为两种外观选择相似的设置

祝你好运

Answer 5

就我而言\xef\xbc\x8c，当我更新到xcode13和iOS15\xe3\x80\x82时，我发现navigationBar和tabBar变成透明\xe3\x80\x82 我的viewController嵌入在UINavigationController中

\n

\n

经过一系列测试，我发现设置navigationController的backgroundColor是解决这个问题的最佳方法

\n

navigationController?.view.backgroundColor = .yourColor\n

\n

颜色设置好后一切就OK了

\n

\n

Answer 6

此代码可以放在任何地方，而不仅仅是在 App Delegate 中来修复 iOS15 上的问题：

if (@available(iOS 15, *)){
        UINavigationBarAppearance *appearance = [[UINavigationBarAppearance alloc] init];
        [appearance configureWithOpaqueBackground];
        appearance.titleTextAttributes = @{NSForegroundColorAttributeName : UIColor.blackColor};
        appearance.backgroundColor = [UIColor colorWithRed:0.0/255.0 green:125/255.0 blue:0.0/255.0 alpha:1.0];
        self.navigationController.navigationBar.standardAppearance = appearance;
        self.navigationController.navigationBar.scrollEdgeAppearance = appearance;
    }

Answer 7

Xcode 13+

在 iOS 15 中，UIKit 已将 的用法scrollEdgeAppearance（默认情况下会生成透明背景）扩展到所有导航栏。背景由滚动视图何时滚动导航栏后面的内容来控制。

要恢复旧的外观，您必须采用新的 UINavigationBar 外观 API UINavigationBarAppearance，. 删除现有的自定义并执行如下操作：

    let appearance = UINavigationBarAppearance()
    appearance.backgroundColor = <your tint color>
    navigationBar.standardAppearance = appearance
    navigationBar.scrollEdgeAppearance = appearance

您还可以将外观代理与上面的代码一起使用，但替换navigationBar.appearance().scrollEdgeAppearance = appearance最后一行。

Answer 8

我创建了这个扩展来支持 iOS 15 和 iOS 12，以便仅在需要的地方而不是在所有应用程序中更改导航栏背景（色调）和标题颜色。

extension UINavigationBar {
  func update(backroundColor: UIColor? = nil, titleColor: UIColor? = nil) {
    if #available(iOS 15, *) {
      let appearance = UINavigationBarAppearance()
      appearance.configureWithOpaqueBackground()
      if let backroundColor = backroundColor {
        appearance.backgroundColor = backroundColor
      }
      if let titleColor = titleColor {
        appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor: titleColor]
      }
      standardAppearance = appearance
      scrollEdgeAppearance = appearance
    } else {
      barStyle = .blackTranslucent
      if let backroundColor = backroundColor {
        barTintColor = backroundColor
      }
      if let titleColor = titleColor {
        titleTextAttributes = [NSAttributedString.Key.foregroundColor: titleColor]
      }
    }
  }
}

并在需要的地方使用它（在我的例子中是 UIViewController 的 UI 配置），如下所示

  func configureNavigationController() {
    navigationController?.navigationBar.update(backroundColor: .blue, titleColor: .white)
  }