Transparent Navigation bar in Xcode 13

Question

Created Jul ’21

Replies 2

Boosts 0

Views 8.9k

Participants 3

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.

Answered by Frameworks Engineer in 681158022

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.

Boost

Answer 1

Frameworks Engineer OP

Apple

Jul ’21

Accepted Answer

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.

3

Answer 2

JorgeGuerrero OP

Oct ’21

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

1