I have an iOS app, since upgrading to Xcode 13, I have noticed some peculiar changes to Tab and Navigation bars. In Xcode 13, there's now this black area on the tab and nav bars and on launching the app, the tab bar is now black as well as the navigation bar. Weird enough, if the view has a scroll or tableview, if I scroll up, the bottom tab bar regains its white color and if I scroll down, the navigation bar regains its white color.
N:B: I already forced light theme from iOS 13 and above:
if #available(iOS 13.0, *) {
window!.overrideUserInterfaceStyle = .light
}
Can anyone assist or point me in the right direction so as to deal with this peculiarity?
Is there a simple fix to get Storyboard to readjust or this is a case where I have to make changes to each view manually?
Example of Storyboard before upgrade:
and after:
Simulator screen before and after (respectively) upgrade:
About Navigation Bar is black, try do it:
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .red
appearance.titleTextAttributes = [.font:
UIFont.boldSystemFont(ofSize: 20.0),
.foregroundColor: UIColor.white]
// Customizing our navigation bar
navigationController?.navigationBar.tintColor = .white
navigationController?.navigationBar.standardAppearance = appearance
navigationController?.navigationBar.scrollEdgeAppearance = appearance
I wrote a new article talking about it.
https://medium.com/#eduardosanti/uinavigationbar-is-black-on-ios-15-44e7852ea6f7
After update to XCode 13 & iOS 15 I also faced some Tab Bar issues with bar background color and items text color for different states. The way I fixed it:
if #available(iOS 15, *) {
let tabBarAppearance = UITabBarAppearance()
tabBarAppearance.backgroundColor = backgroundColor
tabBarAppearance.stackedLayoutAppearance.selected.titleTextAttributes = [.foregroundColor: selectedItemTextColor]
tabBarAppearance.stackedLayoutAppearance.normal.titleTextAttributes = [.foregroundColor: unselectedItemTextColor]
tabBar.standardAppearance = tabBarAppearance
tabBar.scrollEdgeAppearance = tabBarAppearance
} else {
UITabBarItem.appearance().setTitleTextAttributes([.foregroundColor: selectedItemTextColor], for: .selected)
UITabBarItem.appearance().setTitleTextAttributes([.foregroundColor: unselectedItemTextColor], for: .normal)
tabBar.barTintColor = backgroundColor
}
For me I had problem with both Navbar and TabBar so I applied the styles globally in the AppDelegate
func configureNavigationBarAppearance() {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .white
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance
}
func configureTabBarAppearance() {
let appearance = UITabBarAppearance()
appearance.backgroundColor = .white
UITabBar.appearance().standardAppearance = appearance
UITabBar.appearance().scrollEdgeAppearance = appearance
}
You can do this in storyboards by selecting the Tab Bar and in attributes inspector selecting both standard and scroll edge appearance, setting both of their settings as with iOS 13 and for custom fonts or colors you need to change Standard Layout Appearances Stacked to Custom and set the attributes.
For Navigation Bar you set Standard and Scroll Edge Appearances similarly in Attributes Inspector but this has been mentioned elsewhere in stack overflow.
in XCode13.0 and iOS 15.0 tabbar and navigation bar transaparent issue programatically resolved 100%
For Tabbar
if #available(iOS 15, *) {
let appearance = UITabBarAppearance()
appearance.configureWithOpaqueBackground()
UITabBar.appearance().standardAppearance = appearance
UITabBar.appearance().scrollEdgeAppearance = appearance
}
For NavigationBar
if #available(iOS 15, *) {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance
}
first of all the problem is cause by unchecking translucent
I fixed it by choosing navigation bar appearance from attributes inspector scroll edge
it will fix it see this screen shot please
My problem is solved by following, replace the color on right you want for navigation bar
navigationController?.navigationBar.backgroundColor = .lightGray
Related
I'm using UISplitViewController and customise the appearance of my UINavigationBar via UIAppearance and its working as expected for the most part.
I want to change the navigation to pure white (Red in the example for debugging reasons)
Only on iPad, the UINavigationBar of the detail of the SplitViewController seems to have an additional UIVisualEffectsView that changes the color of the NavigationBar.
On iPhone, everything looks as expected...
This is how I set the Appearance in the AppDelegate
if #available(iOS 15.0, *) {
let navigationBarAppearance = UINavigationBarAppearance()
navigationBarAppearance.configureWithOpaqueBackground()
navigationBarAppearance.shadowColor = .clear
navigationBarAppearance.backgroundColor = .red
UINavigationBar.appearance().standardAppearance = navigationBarAppearance
UINavigationBar.appearance().compactAppearance = navigationBarAppearance
UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance
UINavigationBar.appearance().isTranslucent = false
}
How can I remove the UIVisualEffectsView from the NavigationBar in the Detail and make it plain white?
The statusbar on the top seems to take the view background color and not the navigation bar background color. Help would be appreciated
override func viewDidLoad() {
super.viewDidLoad()
self.title = "Hello"
self.navigationController?.navigationBar.backgroundColor = .white
self.view.backgroundColor = .blue
}
You should use UINavigationBarAppearance to customise the appearance of a navigation bar, instead of changing the background colour of the views directly.
https://developer.apple.com/documentation/uikit/uinavigationbarappearance
You can either set these directly on the UINavigationBar (standardAppearance, compactAppearance, scrollEdgeAppearance, compactScrollEdgeAppearance) or on your view controller's navigation item.
var appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .white
self.navigationItem.standardAppearance = appearance
self.navigationItem.scrollEdgeAppearance = appearance
This question already has answers here:
How to change navigation bar & back button colour iOS 15
(2 answers)
How to change UINavigationBar background color from the AppDelegate
(12 answers)
Closed last year.
Can't change navigation bar background color. I've tried setting colors to navigationController?.navigationBar.backgroundColor and navigationController?.navigationBar.barTintColor, such as UIColor.red in the following example, but a white UIImage appears above the navigation bar color in the view hierarchy, as shown in this image: https://imguh.com/image/CBXaj
Also tried making navigation bar translucent and opaque, to no effect. I can change the button colors and customize other elements, but not change the background color of the bar. Appreciate any help.
The following code should do the trick for you:
Background Colour
// This will change the navigation bar background color
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = UIColor.green // your colour here
navigationController?.navigationBar.standardAppearance = appearance
navigationController?.navigationBar.scrollEdgeAppearance = appearance
Place this inside the viewDidLoad() function within your ViewController
Title Colour
If you want to also change the navigation bar title appearance, then apply the following code before you set the standardAppearance and scrollEdgeAppearance:
// This will alter the navigation bar title appearance
let titleAttribute = [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 25, weight: .bold), NSAttributedString.Key.foregroundColor: UIColor.purple] //alter to fit your needs
appearance.titleTextAttributes = titleAttribute
Entire code:
// This will change the navigation bar background color
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = UIColor.green
// This will alter the navigation bar title appearance
let titleAttribute = [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 25, weight: .bold), NSAttributedString.Key.foregroundColor: UIColor.purple] //alter to fit your needs
appearance.titleTextAttributes = titleAttribute
navigationController?.navigationBar.standardAppearance = appearance
navigationController?.navigationBar.scrollEdgeAppearance = appearance
Image Example
I have a default navigation bar on iOS 15, initially the bar itself has a tranparent background.
But when I scroll the view in the view controller, to make some content of it underneath the navigation bar. Then the bar suddenly has a visible background.
I haven't done any special setting to my navigation bar. And tried setting scrollEdgeAppearance with no luck.
if #available(iOS 13.0, *) {
let barAppearance = UINavigationBarAppearance()
barAppearance.configureWithTransparentBackground()
navigationController?.navigationBar.scrollEdgeAppearance = barAppearance
}
Add couple of lines to your code:
if #available(iOS 13, *) {
let barAppearance = UINavigationBarAppearance()
barAppearance.configureWithTransparentBackground()
barAppearance.backgroundColor = .clear
barAppearance.shadowColor = nil
navigationController?.navigationBar.isTranslucent = true
navigationController?.navigationBar.scrollEdgeAppearance = barAppearance
navigationController?.navigationBar.standardAppearance = barAppearance
}
I have an app with custom colour themes, and themes can implement colours in TableView Header labels and Navigation bars.
When doing this, it was working fine with iOS14. But with changes in iOS15, the navigation bar cannot change colour anymore. The transparent and scrollEdgeAppearance was handled in iOS15, but the NavBar current-colour change based on user input while the app is running(after application(didFinisLaunching) has been called) is not working.
I am using the below code to trigger when the user selects a colour:
func setNavBarColour() {
if #available(iOS 15, *) {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
appearance.backgroundColor = LangBuilds.flavColor
let proxy = UINavigationBar.appearance()
proxy.tintColor = LangBuilds.flavColor
proxy.standardAppearance = appearance
proxy.scrollEdgeAppearance = appearance
}
else {
self.navigationController?.navigationBar.barTintColor = LangBuilds.flavColor
}
self.searchController.searchBar.searchTextField.textColor = .black
self.searchController.searchBar.searchTextField.backgroundColor = .white
self.searchController.searchBar.searchTextField.autocapitalizationType = .none
changeTextHolder()
}
Thanks for your help in advance.
the NavBar current-colour change based on user input while the app is running(after application(didFinisLaunching) has been called) is not working
You cannot change a navigation bar color while that navigation bar is showing by using the appearance proxy. The appearance proxy affects only future interface elements. You need to apply your UINavigationBarAppearance to the existing navigation bar directly:
self.navigationController?.navigationBar.standardAppearance = appearance
self.navigationController?.navigationBar.scrollEdgeAppearance = appearance