Transparent Navigation bar in Xcode 13

So, after installing Xcode 13 beta I found out that Nav bar in NavController is now transparent by default. And the only appear if you have something srollable in the scene.

Is there a way to return default (iOS14) presentation of nav bar, so that it is always gray on top of the container view?

P.S. no matter what settings I toggled in IB, visuals remained the same.

Accepted Reply

To control how the navigation bar reacts to scrolling, you need to customize the scrollEdgeAppearance property (this also means you will need to adopt UINavigationBarAppearance to customize the navigation bar in general). If you set the same appearance for the standardAppearance and scrollEdgeAppearance then it will no longer react to scroll interactions.

  • Well, the problem was that I could achieve standard appearance of navigation bar only by scrolling, i.e. the bar became gray only when trying to scroll. And I wanted it to be gray by default.

    This "problem" only appeared after using Xcode 13. In previous versions standard appearance of navigation bar was standard and not fully transparent.

  • This is a change in behavior for iOS 15. Prior versions of iOS only used the scrollEdgeAppearance when you had a large title or collapsable search bar enabled. iOS 15 now uses it anytime the associated scroll view is at its top. Xcode 13 includes the iSO 15 SDK, building against which is required for this behavior to be activated.

    The solution to getting back to iOS 14 behavior is just as I said before – to customize the scrollEdgeAppearance to be the same as the standardAppearance.

Add a Comment

Replies

To control how the navigation bar reacts to scrolling, you need to customize the scrollEdgeAppearance property (this also means you will need to adopt UINavigationBarAppearance to customize the navigation bar in general). If you set the same appearance for the standardAppearance and scrollEdgeAppearance then it will no longer react to scroll interactions.

  • Well, the problem was that I could achieve standard appearance of navigation bar only by scrolling, i.e. the bar became gray only when trying to scroll. And I wanted it to be gray by default.

    This "problem" only appeared after using Xcode 13. In previous versions standard appearance of navigation bar was standard and not fully transparent.

  • This is a change in behavior for iOS 15. Prior versions of iOS only used the scrollEdgeAppearance when you had a large title or collapsable search bar enabled. iOS 15 now uses it anytime the associated scroll view is at its top. Xcode 13 includes the iSO 15 SDK, building against which is required for this behavior to be activated.

    The solution to getting back to iOS 14 behavior is just as I said before – to customize the scrollEdgeAppearance to be the same as the standardAppearance.

Add a Comment

On your App Delegate you can set the new navigationBarAppearance. On scroll the navigation bar won't be transparent.


navigationBarAppearance.configureWithTransparentBackground()
navigationBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
navigationBarAppearance.backgroundColor = UIColor(named: "AccentColor")

UINavigationBar.appearance().standardAppearance = navigationBarAppearance
UINavigationBar.appearance().compactAppearance = navigationBarAppearance
UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance