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
How is it possible to customize the navigation bar like in the AppStore app?
I already tried to set the following (it is a subclass of UINavigationController):
self.navigationBar.setBackgroundImage(UIImage.with(color: UIColor.red), for: .default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.isTranslucent = true
self.view.backgroundColor = .blue
Then the large navigationBar is blue and the small/collapsed navigationBar is red. But what I have to adjust that I get a translucent navigationBar when the navigationBar is collapsed?
[
Is there a way we can customize the code below on a nav bar which is from the object library and not a nav bar which is embedded in? I have the code below. It's working on a nav bar that is embedded on my view but when I create my own nav bar from the object library, the code below is no longer working.
self.navigationController?.navigationBar.tintColor = UIColor.white
self.navigationController?.navigationBar.barStyle = UIBarStyle.black
self.navigationController!.navigationBar.titleTextAttributes = [NSAttributedStringKey.font: UIFont(name: "Chalet-NewYorkNineteenEighty", size: 37.0)!];
self.navigationController?.navigationBar.setBackgroundImage(UIImage(named: "BG.jpg")!.resizableImage(withCapInsets: UIEdgeInsets.zero, resizingMode: .stretch), for: .default)
For the most part I assume you are creating UINavigationBar in xib, in that case IBOutlet wont be UINavigationBarController, give this a try
navigationBar.tintColor = UIColor.white
navigationBar will be outlet var name...
If this doesn't work more info might help...
I have a navigation bar created by the nav controller for my view, these are loaded via a container side menu.
When i click an item, it loads the nav controller and view, but the nav bar background drops out showing a blank background colour on the status bar.
Any idea how I can diagnose this issue? I have included some view debugger screenshots to best illustrate
UINavigationBar.appearance().tintColor = UIColor.white
UINavigationBar.appearance().barTintColor = UIColor().appThemeColour()
UINavigationBar.appearance().isTranslucent = false
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName : UIColor.white]
UIApplication.shared.statusBarStyle = .lightContent
Well you are missing one thing here and thats setBackgroundImage of UINavigationBar.
UINavigationBar.appearance().tintColor = UIColor.white
UINavigationBar.appearance().barTintColor = UIColor().appThemeColour()
UINavigationBar.appearance().isTranslucent = false
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName : UIColor.white]
UIApplication.shared.statusBarStyle = .lightContent
*Note this is the solution for Sidemenu Library named "https://github.com/jonkykong/SideMenu/"
Change status bar end alpha property to 0
Please find code below.
#objcMembers
open class SideMenuPresentationStyle: InitializableClass {
/// Background color behind the views and status bar color
open var backgroundColor: UIColor = .white`
I am having view controllers
And I am showing like this
Let assume 1,2,3 are the view controllers.
I navigate like this
1->2->3
When I come back
3->2->1
then from 1 the navigation bar button item cancel of UIImagePicker doesn't show. If I don't go with this sequence (1->2->3
) It shows perfectly.
Please let me know what could be the issue.
I am using opaque navigation bar.
And the navigation bar tint and bar tint color I am updating like this in the appdelegate class
func setNavigationAppearance(tintColor : UIColor, barTintColor : UIColor?) {
let navigationBarAppearace = appDelegateObj.navigationController!.navigationBar
navigationBarAppearace.tintColor = tintColor
navigationBarAppearace.barTintColor = tintColor
navigationBarAppearace.translucent = false
//navigationBarAppearace.
//Settign the Custome Font and TextColor
if let font = UIFont(name: FontCustom.Regular, size: 17) {
UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName: font ,NSForegroundColorAttributeName : tintColor]
}
}
And adding the background image to the navigation bar like this
if let myImage = UIImage(named: AppImagesName.PatternRed) {
UINavigationBar.appearance().setBackgroundImage(myImage, forBarMetrics: .Default)
}