I am having some problems coloring the navigationBar. I have tried using different methods from some different tutorials but nothing seems to work the way that I want it to work.
I am using the following code in my AppDelegate:
let navAppeareance = UINavigationBarAppearance()
navAppeareance.configureWithOpaqueBackground()
navAppeareance.backgroundColor = .systemRed
//Setup buttons
let buttonDone = UIBarButtonItemAppearance(style: .done)
buttonDone.normal.titleTextAttributes = [.foregroundColor: UIColor.white]
navAppeareance.doneButtonAppearance = buttonDone
let buttonPlain = UIBarButtonItemAppearance(style: .plain)
buttonPlain.normal.titleTextAttributes = [.foregroundColor: UIColor.white]
navAppeareance.buttonAppearance = buttonPlain
//Set appearances
UINavigationBar.appearance().standardAppearance = navAppeareance
UINavigationBar.appearance().scrollEdgeAppearance = navAppeareance
UINavigationBar.appearance().backgroundColor = .systemRed
The above code yields the following result:
I want the statusbar to be the same color as the navigationBar, but it takes the color of the backgroundColor of the view.
use this in AppDelegate
let navBarAppearnce = UINavigationBar.appearance()
navBarAppearnce.barTintColor = UIColor.red // the color you want
Related
I use this code to change my navigation bar appearance which I put it in AppDelegate:
UINavigationBar.appearance().barTintColor = UIColor(hex: "E1354A")
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
UINavigationBar.appearance().isTranslucent = false
Also I use UISearchController which I add programmatically. But when I push it the color of navigation bar and search controller are changed in black. I don't understand why it happens and how I can prevent it?
[][1
I've found a solution. I put in viewDidLoad:
let appearance = UINavigationBarAppearance()
appearance.backgroundColor = UIColor(hex: "E1354A")
appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
navigationItem.standardAppearance = appearance
navigationItem.scrollEdgeAppearance = appearance
let searchField = searchController.searchBar.searchTextField
searchField.backgroundColor = .systemBackground
I'm setting the background image of a large title navigation bar like this:
override func viewDidLoad() {
super.viewDidLoad()
navigationController?.navigationBar.prefersLargeTitles = true
self.title = "Nav bar"
let largeTitleAppearance = UINavigationBarAppearance()
largeTitleAppearance.configureWithOpaqueBackground()
largeTitleAppearance.backgroundImage = UIImage(named: "kunal-shinde--f0YLss50Bs-unsplash")
largeTitleAppearance.backgroundImageContentMode = .scaleAspectFill
largeTitleAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
largeTitleAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
navigationController?.navigationBar.standardAppearance = largeTitleAppearance
navigationController?.navigationBar.scrollEdgeAppearance = largeTitleAppearance
}
However, the image overflows out of the navigation bar as shown here:
I thought clipsToBounds might work so I set it to true at the end of viewDidLoad
navigationController?.navigationBar.clipsToBounds = true
This is better, but the image does not cover the status bar! How can I get it to cover the status bar while not overflowing?
We've solved this as followed:
We set the background image on ViewController. This is the same as we use in navigation bar.
let imageView = UIImageView(image: .assetImage(.background))
imageView.contentMode = .topLeft
collectionView.backgroundView = imageView
Style the navigation bar.
// General Styling
UINavigationBar.appearance().tintColor = .assetColor(.navigationBarTintColor)
// Bar Styling
let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.shadowColor = .clear
navBarAppearance.backgroundColor = UIColor(patternImage: .assetImage(.background)!)
UINavigationBar.appearance().standardAppearance = navBarAppearance
UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
In addition we change the translucent of the navigation bar for non-root views:
if isRootview {
self.navigationController?.navigationBar.isTranslucent = true
} else {
self.navigationController?.navigationBar.isTranslucent = false
}
I am trying to remove a border from UINavigationBar while making it completely white so that it blends with the background.
Here is the code which I have:
nav.navigationBar.standardAppearance.shadowColor = UIColor.white //also tried UIColor.clear
nav.navigationBar.barTintColor = UIColor.white
nav.navigationBar.backgroundColor = UIColor.white
nav.navigationBar.barStyle = .default
nav.navigationBar.isTranslucent = false
The end result is depicted in the image below. As you can see, my navigation bar is not completely white:
If I remove the line where I set shadowColor I do get a white background, but with a line at the bottom.
I would appreciate if someone could help me to get the result which I want.
Check out this code:
let appearance = UINavigationBarAppearance()
appearance.backgroundColor = .white
appearance.shadowColor = .none
appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
UINavigationBar.appearance().tintColor = .black
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().compactAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance
as many iOS devs out there i'm facing some issues with iOS 13 update.
One of these was the different management of the status bar style
On iOS 12 i used to set the navigation bar style like this
self.navigationController?.navigationBar.barStyle = .black
which affects the status bar style, setting it to white (because the navigation bar style is black);
but it doesn't seem to work on iOS 13, i guess it has something to deal with
UINavigationBarAppearance()
class
I configured my navigation bar for each ViewController like this:
if #available(iOS 13.0, *) {
let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.configureWithOpaqueBackground()
navBarAppearance.accessibilityTextualContext = .sourceCode
navBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
navBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
navBarAppearance.backgroundColor = .brownCircles
navBarAppearance.shadowImage = nil // remove navigationBar Bottom border
navBarAppearance.shadowColor = nil // remove navigationBar Bottom border
self.navigationController?.navigationBar.standardAppearance = navBarAppearance
self.navigationController?.navigationBar.compactAppearance = navBarAppearance
self.navigationController?.navigationBar.scrollEdgeAppearance = navBarAppearance
} else {
self.navigationController?.navigationBar.barTintColor = .blue
self.navigationItem.title = NSLocalizedString(kTitle, comment: kTitle.capitalized)
}
self.navigationController?.navigationBar.barStyle = .black
so far so good, but
self.navigationController?.navigationBar.barStyle = .black
works just on iOS 12, nothing happens on iOS 13 the status bar still looks black instead of white
Did anyone face this issue?
Finally i figured out!
the magic code to set a light status bar text is:
self.navigationController?.navigationBar.overrideUserInterfaceStyle = .dark
of course if you want to change to dark text i have to set it to .light.
Some things to notice:
This code:
if #available(iOS 13.0, *) {
overrideUserInterfaceStyle = .dark
}
although it should set the entire view and subviews to dark, doesn't seem to affect the status bar.
You can also use:
UIApplication.shared.statusBarStyle = UIStatusBarStyle.lightContent
but of course is deprecated so i'd recommend other ways
You still need:
self.navigationController?.navigationBar.barStyle = .black,
but put it AFTER the UINavigationBarAppearance() settings and after the self.navigationController?.navigationBar.overrideUserInterfaceStyle = .dark.
Final code will look like this:
if #available(iOS 13.0, *) {
let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.configureWithOpaqueBackground()
navBarAppearance.accessibilityTextualContext = .sourceCode
navBarAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
navBarAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
navBarAppearance.backgroundColor = .brownCircles
navBarAppearance.shadowImage = nil // remove navigationBar Bottom border
navBarAppearance.shadowColor = nil // remove navigationBar Bottom border
self.navigationController?.navigationBar.standardAppearance = navBarAppearance
self.navigationController?.navigationBar.compactAppearance = navBarAppearance
self.navigationController?.navigationBar.scrollEdgeAppearance = navBarAppearance
self.navigationController?.navigationBar.overrideUserInterfaceStyle = .dark
} else {
self.navigationController?.navigationBar.barTintColor = .blue
self.navigationItem.title = NSLocalizedString(kTitle, comment: kTitle.capitalized)
}
self.navigationController?.navigationBar.barStyle = .black
Hope it helps! ;)
My Scenario, I am trying to remove bottom line and shadow from UINavigationBar using iOS 13 - Swift 5. Here, Before iOS 13 - Swift 5, I used below code for removing bottom line and shadow without changing navigation bar color. Now, It is not showing NavigationBar color (I already set Bar Color and Background Color) also disabled Transulent.
Code:
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
How to fix this? Need to remove bottom line shadow and also want to give NavigationBar Colour.
For me, it only worked after changing the following (>= iOS13)
let navBarAppearance = UINavigationBarAppearance()
navBarAppearance.configureWithOpaqueBackground()
navBarAppearance.shadowColor = .clear
navBarAppearance.shadowImage = UIImage()
navigationController?.navigationBar.standardAppearance = navBarAppearance
navigationController?.navigationBar.scrollEdgeAppearance = navBarAppearance
If you are using iOS 13, you can't remove the shadow by setting the shadowImage to UIImage(). You'll have to also set the shadowColor to nil or UIColor.clear.
XCODE 13 - iOS 15
For Xcode 13 and targeting iOS ver 13 and above you can use this code:
if #available(iOS 13.0, *) {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .red // Your color
appearance.shadowColor = .clear
appearance.shadowImage = UIImage()
navigationController?.navigationBar.standardAppearance = appearance;
navigationController?.navigationBar.scrollEdgeAppearance = navigationController?.navigationBar.standardAppearance
}
Try with this, I added in viewDidLoad. It works for me.
self.navigationController?.navigationBar.shadowImage = UIImage()
This seems to be working for iOS13 and Swift
let barAppearance = UINavigationBarAppearance()
barAppearance.configureWithTransparentBackground()
Below Code working for me
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: UIBarMetrics.default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().isTranslucent = false
UINavigationBar.appearance().barTintColor = #colorLiteral
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
Starting from iOS 15 and in order to fix wrong navigation bar color glitch, you have to use relatively newest API of UINavigationBarAppearance and tiny but important moment - to refresh navigation bar if it's already on the screen. Below is the full code:
if #available(iOS 15.0, *) {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = <#your_color#>
appearance.shadowImage = UIImage()
appearance.shadowColor = .clear
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().compactAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance
UINavigationBar.appearance().compactScrollEdgeAppearance = appearance
// force refresh navigation bar background color
isNavigationBarHidden = true
isNavigationBarHidden = false
}
If you want to do with UINavigationBarAppearance you can do with this.
let appearance = UINavigationBarAppearance()
appearance.configureWithDefaultBackground()
appearance.shadowImage = UIImage()
appearance.shadowColor = UIColor.clear
appearance.backgroundImage = UIImage()
appearance.backgroundColor = UIColor.white
UINavigationBar.appearance().scrollEdgeAppearance = appearance