On iOS 12 and Xcode 10.3 I had no problems with the large titles scrolling, but with the same code, Xcode 11 and iOS 13, I encounter the problem as shown in the following GIF:
While on iOS 12 I had the navigation bar with the desired behaviour, which is this:
Did someone encounter the same problem? For the rest I'm of course using the prefersLargeTitles = true and I'm sure the code I'm using it's the same for this 2 different behaviours. Thanks for any help
I found a solution for it after some investigation, so I'll share my findings since I think can help some people.
The solution is that, from iOS 13, we have to work with the UINavigationBarAppearance. Once we have created this object, we can assign it to some new properties called:
standardAppearance
compactAppearance
scrollEdgeAppearance (this one in particular was probably the cause probably of my bug)
I post an example of it as an extension:
extension UINavigationBar {
func setupLarge() {
// ... Set up here your tintColor, isTranslucent and other properties if you need
if #available(iOS 11.0, *) {
prefersLargeTitles = true
//largeTitleTextAttributes = ...Set your attributes
}
if #available(iOS 13.0, *) {
let appearance = UINavigationBarAppearance()
appearance.backgroundColor = barTintColor
appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
standardAppearance = appearance
compactAppearance = appearance
scrollEdgeAppearance = appearance
}
}
}
Related
I faced a weird problem. I wanted to change the colors of my tabBar in just one of my view controllers of my tabBar. How do I achieve this in iOS > 13?
After searching a lot and finding no working solutions, I succeeded by luck.
I found out that you must set an appearance object before I can change them!!
But if you set appearance before the override function endAppearanceTransition() of UITabbar it is working, but not anymore. finally, this way worked:
Set an empty appearance object at viewDidLoad of one of the view Controllers or UITabbarViewcontroller to be executed one time:
override func viewDidLoad() {
super.viewDidLoad()
tabBarController?.tabBar.standardAppearance = UITabBarAppearance()
}
Then you can use updating like this at anytime:
let attrs = [NSAttributedString.Key.foregroundColor: UIColor.green]
tabBarController?.tabBar.backgroundColor = barColor
tabBarController?.tabBar.standardAppearance.stackedLayoutAppearance.selected.iconColor = .green
tabBarController?.tabBar.standardAppearance.stackedLayoutAppearance.normal.iconColor = .green
tabBarController?.tabBar.standardAppearance.stackedLayoutAppearance.normal.titleTextAttributes = attrs
tabBarController?.tabBar.standardAppearance.stackedLayoutAppearance.selected.titleTextAttributes = attrs
I tested against iOS 14.5
We would like to provide ability to change the navigation bar color during runtime.
However, I notice the following code no longer has any effect.
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
navigationController?.navigationBar.backgroundColor = UIColor.red
navigationController?.navigationBar.tintColor = UIColor.red
UINavigationBar.appearance().barTintColor = UIColor.red
}
}
But, if I did it directly in Storyboard, it works just fine.
We would like to have ability to change the various different color during runtime (via user button clicked)
Does anyone has any idea why the above code broken?
Thanks.
p/s I can confirm the navigationController is not nil.
On iOS 13 & above, you have to use new UINavigationBarAppearance api to get the correct color.
public extension UINavigationBar {
func applyPlainAppearanceFix(barTintColor: UIColor, tintColor: UIColor) {
if #available(iOS 13, *) {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = barTintColor
self.standardAppearance = appearance
self.compactAppearance = appearance
self.scrollEdgeAppearance = appearance
}
self.isTranslucent = false
self.barTintColor = barTintColor
self.backgroundColor = barTintColor
self.tintColor = tintColor
}
}
From the call site it should look like
navigationController?.navigationBar.applyPlainAppearanceFix(barTintColor: .red, tintColor: .white)
Could you try adding this in your AppDelegate and I think it will work, if you didn't want it for all the app then your code is working fine, I've used it and it's working like in the image below:
I recently updated my Xcode to 11.4. When I run the app on the device, i've noticed that all my navigations item's titles gone fully black when being set from storyboard.
You can't change neither from code, the following line of code doesn't work anymore
self.navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
I only make it work using some iOS 13 stuffs UINavigationBarAppearance
#available(iOS 13.0, *)
private func setupNavigationBar() {
let app = UINavigationBarAppearance()
app.titleTextAttributes = [.foregroundColor: UIColor.white]
app.backgroundColor = Constants.Color.barColor
self.navigationController?.navigationBar.compactAppearance = app
self.navigationController?.navigationBar.standardAppearance = app
self.navigationController?.navigationBar.scrollEdgeAppearance = app
self.navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
}
Can somebody explain me why??? This is a crucial bug, or some new hidden feature?
This fixed it for me, using UINavigationBarAppearance instead, from: Customizing Your App’s Navigation Bar
if #available(iOS 13.0, *) {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = UIColor.black
appearance.titleTextAttributes = [.foregroundColor: UIColor.white] // With a red background, make the title more readable.
self.navigationBar.standardAppearance = appearance
self.navigationBar.scrollEdgeAppearance = appearance
self.navigationBar.compactAppearance = appearance // For iPhone small navigation bar in landscape.
} else {
self.navigationBar.barTintColor = UIColor.black
self.navigationBar.tintColor = UIColor.white
self.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
}
Note: I subclassed UINavigationController, and this was called from the override of viewWillAppear.
...or for AppDelegate, app-wide:
if #available(iOS 13.0, *) {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = UIColor.black
appearance.titleTextAttributes = [
NSAttributedStringKey.foregroundColor: UIColor.white
]
let buttonAppearance = UIBarButtonItemAppearance()
buttonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.white]
appearance.buttonAppearance = buttonAppearance
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance
UINavigationBar.appearance().compactAppearance = appearance
UIBarButtonItem.appearance().tintColor = UIColor.white
} else {
UINavigationBar.appearance().barTintColor = UIColor.black
UINavigationBar.appearance().titleTextAttributes = [
NSAttributedStringKey.foregroundColor: UIColor.white
]
UINavigationBar.appearance().tintColor = UIColor.white
UIBarButtonItem.appearance().tintColor = UIColor.white
}
...for AppDelegate, app-wide, in Objective-C:
if (#available(iOS 13, *)) {
UINavigationBarAppearance *appearance = [[UINavigationBarAppearance alloc] init];
[appearance configureWithOpaqueBackground];
appearance.backgroundColor = UIColor.whiteColor;
appearance.titleTextAttributes = titleAttributes;
UIBarButtonItemAppearance *buttonAppearance = [[UIBarButtonItemAppearance alloc] init];
buttonAppearance.normal.titleTextAttributes = barButtonItemAttributes;
appearance.buttonAppearance = buttonAppearance;
UINavigationBar.appearance.standardAppearance = appearance;
UINavigationBar.appearance.scrollEdgeAppearance = appearance;
UINavigationBar.appearance.compactAppearance = appearance;
[[UINavigationBar appearance] setTintColor:UIColor.blackColor];
} else {
[[UINavigationBar appearance] setBarTintColor:UIColor.whiteColor];
[[UINavigationBar appearance] setTintColor:UIColor.blackColor];
[[UINavigationBar appearance] setTranslucent:false];
[[UINavigationBar appearance] setTitleTextAttributes: titleAttributes];
[[UIBarButtonItem appearance] setTitleTextAttributes:barButtonItemAttributes forState:UIControlStateNormal];
}
On the storyboard, for your Navigation Controller change the "Bar Tint" to its "Default" value, then on your code you can change it as you normally would.
Apple finally fixed it in version 11.4.1
https://developer.apple.com/documentation/xcode_release_notes/xcode_11_4_1_release_notes
Not sure if it's a bug or not.
The way we fixed it is by setting the "Status Bar Style" to either dark or light content in project setting. This will force the Status Bar text color a certain way rather than being determined based on the devices being in Light or Dark mode.
In addition, you need to set the value "View controller-based status bar appearance" to "NO" in your Info.plist. without that value the "Status Bar style" will be overridden.
Next create a custom navigation controller and implement it in your storyboards.
class CustomNavigationController: UINavigationController {
override func viewDidLoad() {
super.viewDidLoad()
setNavBar()
}
func setNavBar() {
if #available(iOS 13.0, *) {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = UIColor.blue
appearance.titleTextAttributes = [.foregroundColor: UIColor.yellow]
self.navigationBar.standardAppearance = appearance
self.navigationBar.scrollEdgeAppearance = appearance
self.navigationBar.compactAppearance = appearance
} else {
self.navigationBar.barTintColor = UIColor.blue
self.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.yellow]
}
}
}
*Colors are set so you can see them clearly working.
I found it was better to set the code in ViewDidLoad rather than ViewDidAppear because my colors were not being set on the initial load, only after navigating back and reloading.
I also found that this issue might be tied to the "Bar Tint" of a NavBar. when we were first trying to resolve it, we set the "Bar Tint" to default and that seemed resolve the error too. However, it made it so we couldn't get the NavBar background color what we wanted. So in my storyboards I made sure to set this value to default just for good measure.
Hope it helps
no need for the workaround.it is a bug in Xcode Interface Builder. Apple release Update for Xcode 11.4.1
from Apple developer release notes
Interface Builder
Fixed an issue that caused some UINavigationBar appearance properties
set in storyboard and XIB documents to be ignored when building with
Xcode 11.4. (60883063) (FB7639654)
https://developer.apple.com/documentation/xcode_release_notes/xcode_11_4_1_release_notes
Similar to Stu Carney's response on 3/25, I added a few more implementation details.
Create a subclass of UINavigationController. Add the following to viewWillAppear:
let isDarkMode = UserDefaults.standard.bool(forKey: "DarkMode")
let titleColor: UIColor = isDarkMode ? .white : .black
let navBarColor: UIColor = isDarkMode ? .black : .white
let tintColor: UIColor = isDarkMode ? .yellow : .red //back button text and arrow color, as well as right bar button item
if #available(iOS 13.0, *) {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = navBarColor
appearance.titleTextAttributes = [.foregroundColor: titleColor]
appearance.largeTitleTextAttributes = [.foregroundColor: titleColor]
self.navigationBar.standardAppearance = appearance
self.navigationBar.scrollEdgeAppearance = appearance
self.navigationBar.compactAppearance = appearance // For iPhone small navigation bar in landscape.
self.navigationBar.tintColor = tintColor //changes back button text and arrow color, as well as right bar button item
} else {
self.navigationBar.barTintColor = navBarColor
self.navigationBar.tintColor = tintColor
self.navigationBar.titleTextAttributes = [.foregroundColor: titleColor]
self.navigationBar.largeTitleTextAttributes = [.foregroundColor: titleColor]
}
Then override preferredStatusBarStyle:
override var preferredStatusBarStyle: UIStatusBarStyle {
let isDarkMode = UserDefaults.standard.bool(forKey: "DarkMode")
return isDarkMode ? .lightContent : .default
}
If you want to update the navigation bar and status bar dynamically, like from a UISwitch IBAction or selector method, add the following:
navigationController?.loadView()
navigationController?.topViewController?.setNeedsStatusBarAppearanceUpdate()
Also, be sure to set all your navigation bars and bar buttons to the default colors in IB. Xcode seems to have a bug where the the IB colors override the colors set programatically.
In my case, after I upgraded Xcode from 11.3 to 11.4 this bug occurred.
So I have to change my code to blow in order to set an image as background in the navigation bar.
if #available(iOS 13.0, *) {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
let backgroundImage = UIImage(named: "{NAVBAR_IMAGE_NAME}")?.resizableImage(withCapInsets: UIEdgeInsets.zero, resizingMode: .stretch)
appearance.backgroundImage = backgroundImage
self.navigationController?.navigationBar.compactAppearance = appearance
self.navigationController?.navigationBar.standardAppearance = appearance
self.navigationController?.navigationBar.scrollEdgeAppearance = appearance
} else {
self.navigationController?.navigationBar.barTintColor = Utils.themeColor
let backgroundImage = UIImage(named: "{NAVBAR_IMAGE_NAME}")?.resizableImage(withCapInsets: UIEdgeInsets.zero, resizingMode: .stretch)
self.navigationController?.navigationBar.setBackgroundImage(backgroundImage, for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
}
I had the same issue and was wondering that coding is not the solution. There MUST be a way. And found out that checking any option under Navigation bar -> Appearances in storyboard attribute inspector makes the title go black. So uncheck all of them. But not sure how I can have scroll Edge option on to color the status bar as well and still get the title colored.
I'm trying to implement a toggle for dark mode in my app - this would involve toggling the nav bar color to black when the UIViewController is already visible on the screen. I'm aware of how to do this by setting
UINavigationBar.appearance().barTintColor = .black
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
UINavigationBar.appearance().isTranslucent = false
in the AppDelegate, however, this won't work in this case as it needs to be done dynamically.
I've also tried navigationController?.navigationBar.barTintColor = UIColor.white but this doesn't work either.
UPDATE:
I think a lot of the responses were confused with the purpose of this question - this is NOT at all related to the iOS13 Dark Mode which was just released - it is an INDEPENDENT dark mode feature I want to add to my app (similar to other apps like Messenger etc which had dark mode available IN-APP before iOS 13 was released). What I need to do is dynamically update the color of the UINavigationBar AFTER it has been already displayed on the screen, the same way I can change the background color of a view by doing view.backgroundColor = .white and this will update the color in real-time on screen.
Achieved this by making the nav bar translucent (in AppDelegate):
let barAppearance = UINavigationBar.appearance()
barAppearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor: appRed]
barAppearance.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
barAppearance.shadowImage = UIImage()
barAppearance.isTranslucent = true
Next I create a view and place it behind the nav bar as follows (using SnapKit):
let coverView = UIView()
cover.snp.makeConstraints {
make in
make.left.right.top.equalTo(self)
make.bottom.equalTo(self.snp.top).offset(universalNumber(num: parent!.topbarHeight))
}
where the parent is my UIViewController and topBarHeight is:
extension UIViewController {
/**
* Height of status bar + navigation bar (if navigation bar exist)
*/
var topbarHeight: CGFloat {
return UIApplication.shared.statusBarFrame.size.height +
(self.navigationController?.navigationBar.frame.height ?? 0.0)
}
}
Finally, to update the color I set
coverView.backgroundColor = universalWhite()
where
func universalWhite() -> UIColor {
let defaults = UserDefaults.standard
let darkMode = defaults.bool(forKey: "darkMode")
if darkMode {
return .black
} else {
return .white
}
}
You may want to check out the traits provided with the UIViewController to determine the current Interface style, instead of a manual check for versions running iOS 13+. Using this method, you can define colors in your Assets folder for both appearances.
For below iOS 13, you can use something similar to what #byaruah stated, but that is not a global effect. You should also consider using the UINavigationBar.appearance() functionality for a global approach.
I have my UISearchBar set up as follows:
searchController.searchResultsUpdater = self
searchController.obscuresBackgroundDuringPresentation = false // Allow user to tap on results
searchController.searchBar.placeholder = "Search patients" // Placeholder
searchController.searchBar.barStyle = .blackOpaque
searchController.searchBar.tintColor = colors.text // Cancel button tint
navigationItem.searchController = searchController // Set the searchController
navigationItem.hidesSearchBarWhenScrolling = true // Auto-hide search when user scrolls
This is how it looks on iOS 12:
vs iOS 13:
What's changed in iOS 13? I've tried going through the different barStyles, and also setting .isTranslucent to false - no effect for either. Light/dark mode also don't change anything.
The other change is hiding the search bar - on iOS 12 if I scrolled upwards a little the search bar would hide (didn't matter if the table was populated or not). With iOS 13, once the search bar has appeared (ie the user has swiped down), it cannot be hidden again. Anyone know of a fix for this too?
I get something similar problem with you. I don't know why this happen in currently iOS 13 and work properly in older version. But i have found the solution by adding this function to your searchBar.
if #available(iOS 13.0, *) {
searchBar.searchTextField.backgroundColor = UIColor.white
}
Preview after fixing:
How about to use searchBarStyle as default and change the searchTextField background color?
if #available(iOS 13.0, *) {
searchBar.searchBarStyle = .default
searchBar.searchTextField.backgroundColor = UIColor.black.withAlphaComponent(0.1)
}
For setting in globally like in AppDelegate:
if #available(iOS 13, *) {
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).backgroundColor = .anyColor
}
searchController.searchBar.searchTextField.backgroundColor = UIColor.black does the job as a workaround. The selector is new in iOS 13.
I've filed a report on feedback assistant anyway as I do believe this to be unexpected behaviour.
iOS 13+.
searchController.searchBar.searchTextField.backgroundColor = UIColor.white