ios 在iOS13中状态栏背景颜色与大文本模式下的导航栏不同

In iOS13 the status bar background colour is different from the navigation bar in large text mode

提问by steven

Pre-conditions to reproduce the problem:

重现问题的先决条件：

1. Xcode 11 beta + iOS 13 (latest version until Jun. 12 2019)
2. The navigation bar is in Large text mode
3. Specify the colour of navigation bar.

1. Xcode 11 beta + iOS 13（最新版本至 2019 年 6 月 12 日）
2. 导航栏处于大文本模式
3. 指定导航栏的颜色。

The status bar will remain in white in a real device, above the green navigation bar.

在真实设备中，状态栏将保持为白色，位于绿色导航栏上方。

Solutions I tried:

我试过的解决方案：

1. Revert it back to iOS12 will solve it, but we will encounter iOS13 eventually...
2. disabling the large text mode will solve it...
3. hide the status bar will fix it, but it will cause status text overlapping with navigation bar item.

1. 恢复到iOS12就可以解决，但是我们最终还是会遇到iOS13...
2. 禁用大文本模式将解决它...
3. 隐藏状态栏将修复它，但它会导致状态文本与导航栏项目重叠。

Any ideas? appreciate any help.

有任何想法吗？感谢任何帮助。

回答by Mike

No hacks or funkiness required here. The key is defining the desired appearance and setting this value on BOTH the nav bar's standardAppearanceAND its scrollEdgeAppearance. I have the following in the init for my base navigation controller subclass for my entire app:

这里不需要黑客或时髦。关键是定义所需的外观并在导航栏standardAppearance及其scrollEdgeAppearance. 我在整个应用程序的基本导航控制器子类的 init 中有以下内容：

if #available(iOS 13.0, *) {
    let navBarAppearance = UINavigationBarAppearance()
    navBarAppearance.configureWithOpaqueBackground()
    navBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
    navBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
    navBarAppearance.backgroundColor = <insert your color here>
    navigationBar.standardAppearance = navBarAppearance
    navigationBar.scrollEdgeAppearance = navBarAppearance
}

回答by Hans Kn?chel

On iOS 13, navigation bars using large title have a transparent color per Apple human interface guidelines. See more infos here:

在 iOS 13 上，根据 Apple 人机界面指南，使用大标题的导航栏具有透明颜色。在此处查看更多信息：

In iOS 13 and later, a large title navigation bar doesn't include a background material or shadow by default. Also, a large title transitions to a standard title as people begin scrolling the content

在 iOS 13 及更高版本中，大标题导航栏默认不包含背景材料或阴影。此外，当人们开始滚动内容时，大标题会转换为标准标题

回答by matt

If the problem is that you'd like to give the navigation bar a color when the large title is showing, use the new UINavigationBarAppearance class.

如果问题是您想在显示大标题时为导航栏设置颜色，请使用新的 UINavigationBarAppearance 类。

    let app = UINavigationBarAppearance()
    app.backgroundColor = .blue
    self.navigationController?.navigationBar.scrollEdgeAppearance = app

回答by Chris Van Buskirk

Universal code

通用代码

        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.configureWithOpaqueBackground()
        navBarAppearance.backgroundColor = // your color
        navBarAppearance.shadowImage = nil // line
        navBarAppearance.shadowColor = nil // line
        UINavigationBar.appearance(whenContainedInInstancesOf: [UINavigationController.self]).standardAppearance = navBarAppearance
        UINavigationBar.appearance(whenContainedInInstancesOf: [UINavigationController.self]).scrollEdgeAppearance = navBarAppearance

回答by mohammad alabid

Objective C Solutions and iOS 13

Objective C 解决方案和 iOS 13

UINavigationBarAppearance* navBarAppearance = [self.navigationController.navigationBar standardAppearance];
        [navBarAppearance configureWithOpaqueBackground];
        navBarAppearance.titleTextAttributes = @{NSForegroundColorAttributeName:TitleColor};
        navBarAppearance.largeTitleTextAttributes = @{NSForegroundColorAttributeName: TitleColor};
        navBarAppearance.backgroundColor = TopColor;
        self.navigationController.navigationBar.standardAppearance = navBarAppearance;
        self.navigationController.navigationBar.scrollEdgeAppearance = navBarAppearance;

回答by Fabio

my navigationBar extension, iOS 13 Swift 5

我的导航栏扩展，iOS 13 Swift 5

extension UIViewController {
func configureNavigationBar(largeTitleColor: UIColor, backgoundColor: UIColor, tintColor: UIColor, title: String, preferredLargeTitle: Bool) {
    if #available(iOS 13.0, *) {
        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.configureWithOpaqueBackground()
        navBarAppearance.largeTitleTextAttributes = [.foregroundColor: largeTitleColor]
        navBarAppearance.titleTextAttributes = [.foregroundColor: largeTitleColor]
        navBarAppearance.backgroundColor = backgoundColor

        navigationController?.navigationBar.standardAppearance = navBarAppearance
        navigationController?.navigationBar.compactAppearance = navBarAppearance
        navigationController?.navigationBar.scrollEdgeAppearance = navBarAppearance

        navigationController?.navigationBar.prefersLargeTitles = preferredLargeTitle
        navigationController?.navigationBar.isTranslucent = false
        navigationController?.navigationBar.tintColor = tintColor
        navigationItem.title = title

    } else {
        // Fallback on earlier versions
        navigationController?.navigationBar.barTintColor = backgoundColor
        navigationController?.navigationBar.tintColor = tintColor
        navigationController?.navigationBar.isTranslucent = false
        navigationItem.title = title
    }
}}

How to use:

如何使用：

configureNavigationBar(largeTitleColor: .yourColor, backgoundColor: .yourColor, tintColor: .yourColor, title: "YourTitle", preferredLargeTitle: true)

Set ViewController-based status bar...... to NO in info.plist if you want light Content

如果你想要轻量内容，在 info.plist 中将基于 ViewController 的状态栏......设置为 NO

If you don't want largeTitles set it to false

如果您不希望 largeTitles 将其设置为 false

Tested on iOS 13, hope this help :)

在 iOS 13 上测试过，希望这会有所帮助:)

回答by Andrew Edwards

For iOS 13 I was having a problem with the bar's shadow line showing up. Setting the Bars shadow image to nilsolved that issue.

对于 iOS 13，我遇到了条形阴影线显示的问题。设置 Bars 阴影图像以nil解决该问题。

Before

前

func configureNavigation() {
        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.configureWithOpaqueBackground()
        navBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.myColor,
                                                     .font: UIFont(name: "MyFont", size: 42)!]
        navBarAppearance.backgroundColor = .white
        navigationController?.navigationBar.isTranslucent = false
        navigationController?.navigationBar.scrollEdgeAppearance = navBarAppearance
    }

After

后

func configureNavigation() {
        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.configureWithOpaqueBackground()
        navBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.myColor,
                                                     .font: UIFont(name: "MyFont", size: 42)!]
        navBarAppearance.backgroundColor = .white
        navBarAppearance.shadowColor = nil
        navigationController?.navigationBar.isTranslucent = false
        navigationController?.navigationBar.scrollEdgeAppearance = navBarAppearance
    }

回答by Ning

Thanks to Mike and Hans's answer. My case is half transparent status bar and nav bar with alpha 0.5. iOS13 seems complicated. Below is my test result, will work if you want transparent for both.

感谢迈克和汉斯的回答。我的情况是半透明状态栏和带有 alpha 0.5 的导航栏。iOS13 看起来很复杂。以下是我的测试结果，如果您希望两者都透明，则可以使用。

if #available(iOS 13.0, *) {
                let navBarAppearance = UINavigationBarAppearance()
                // This only set top status bar as transparent, not the nav bar.
                navBarAppearance .configureWithTransparentBackground()
                // This set the color for both status bar and nav bar(alpha 1).
                navBarAppearance.backgroundColor = UIColor.red.withAlphaComponent(0.5)
                navigationController?.navigationBar.standardAppearance = navBarAppearance
                navigationController?.navigationBar.scrollEdgeAppearance = navBarAppearance
                // Nav bar need sets to translucent for both nav bar and status bar to be translucent.
                navigationController?.navigationBar.isTranslucent = true
                // // Need to reset nav bar's color to make it clear to display navBarAppearance's color
                navigationController?.navigationBar.backgroundColor = UIColor.clear
               } 

回答by Drew

I had a similar problem when updating one of my apps to be more iOS 13 compatible. As Hansmentioned above, the large titles are transparent by default. If you are a heavy Storyboard user as I am, there's another setting in the side bar that's easy to turn on.

在更新我的一个应用程序以使其与 iOS 13 更加兼容时，我遇到了类似的问题。正如Hans上面提到的，大标题默认是透明的。如果您像我一样是 Storyboard 的重度用户，侧栏中还有另一个易于打开的设置。

If you click on your nav bar in the story board, it usually defaults to selecting the Navigation Item, and you won't get any customization options. Select the Navigation Baroption above it, and then you are able to choose a custom background color of whatever you want over in the Inspector on the right.

如果您单击故事板中的导航栏，它通常默认选择Navigation Item，并且您不会获得任何自定义选项。选择Navigation Bar它上面的选项，然后您可以在右侧的检查器中选择您想要的任何自定义背景颜色。

回答by André Pinto

The following Objective-C code made iOS 13 navigation bar behave like the previous version for me:

以下 Objective-C 代码使 iOS 13 导航栏的行为与我之前的版本类似：

    if (@available(iOS 13.0, *)) {
        // Setup iOS 13 navigation bar
        sharedSelector.navigationBar.scrollEdgeAppearance = sharedSelector.navigationBar.standardAppearance;
    } else {
        // Fallback on earlier versions
    }