I am trying to use an image as the background for my navigation bar. I can get the image into the bar, but it doesn't appear properly. I have attached an image of the desired background, and the result that I am getting.
In addition this is the code I am using to get the image into the bar background.
navigationController.navigationBar.setBackgroundImage(UIImage(named:"Top Bar Slice"), forBarMetrics: UIBarMetrics.Default)
EDIT:
One of the answers got the image into the code, but now it is tile-ing across the bar. Is there a way to fix this?
I am now using this code in the app delegate:
UINavigationBar.appearance().setBackgroundImage(UIImage(named: "Top Bar"), forBarMetrics: UIBarMetrics.Default)
You need to override UINavigationBar.appearance()
Option 1:
let image = UIImage(named: "yourImage")
UINavigationBar.appearance().setBackgroundImage(image, forBarMetrics: UIBarMetrics.Default)
Option 2:
UINavigationBar.appearance().setBackgroundImage(UIImage(named: "yourimage"), forBarMetrics: UIBarMetrics.Default)
You can also add a titleView to the navigation item in your viewController.
Option 3:
navigationItem.titleView = UIImageView(image: UIImage(named: "yourimage"))
Related
Sample project with the issue can be found here
I have a requirement where I am going from a UIViewController inside a UINavigationController with large titles set to true to a UIViewController where the NavigationBar is transparent.
I have done this following numerous StackOverflow answers by setting the backgroundImage and shadowImage of the NavigationBar to be an empty UIImage instance:
self.navigationController!.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
The issue I am having is when I go back from this UIViewController to the first one the background image has gone and appears as a clear image if I set them to nil.
self.navigationController!.navigationBar.setBackgroundImage(nil, for: .default)
self.navigationController?.navigationBar.shadowImage = nil
As can be seen in the images below.
How can I get the NavigationBar back to the original state?
The NavigationBar in iOS11 has a nice blur to it. I'm trying to replicate this to another image.
The following will set the NavigationBar with the default values (that include the blur):
self.navigationController?.navigationBar.barStyle = .default
self.navigationController?.navigationBar.setBackgroundImage(nil, for: UIBarMetrics.default)
self.navigationController?.navigationBar.shadowImage = nil
I'm simply trying to copy the background to a new image to match the look but the following does not work:
let imageView = UIImageView()
imageView.image = self.navigationController.navigationBar.backgroundImage(for: UIBarMetrics.default)
Any ideas?
So I never could figure this out but I was able to solve it by using a blank UIToolbar where I needed to replicate the navBar background.
In my case I was trying to set the statusBar to have the same background and the navigationBar.
statusBarView = UIToolbar()
To set it with the default background:
self.statusBarView.setBackgroundImage(nil, forToolbarPosition: .any, barMetrics: .default)
And to make it transparent:
self.statusBarView.setBackgroundImage(UIImage(), forToolbarPosition: .any, barMetrics: .default)
I have the nav bar transparent with only the bar button being displayed in my app. In my storyboard I have no title so that the nav bar looks like nothing is there, but when I run the simulator, the text that I deleted is in the nav bar.
This is what i've found to solve problem:
What the nav bar should look like without the transparency
What the nav bar looks like in the simulator
My code for making the bar transparent:
//Makes navigation bar translucent
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
In your code, inside view will appear method
use this code
self.title = "" // or whatever text you have
In your app delegate, did finish launching with option method:
UINavigationBar.appearance().barTintColor = .white
UINavigationBar.appearance().isTranslucent = false
UINavigationBar.appearance().titleTextAttributes =
[NSForegroundColorAttributeName: UIColor.black] // shouldn't be needed, but if you want something
UINavigationBar.appearance().tintColor = .blue
From your storybord remove any changes done by you. It can be done from code, also since it needs to be consistent in the app. Try to handle status bar and navigation bar from code itself.
I create an app with Swift 3 and Xcode 8.1, I have a view controller with navigation bar, my view shows a line (separator) between the bar and other viewController's content.
I use following code in viewDidLoad:
self.navigationController?.navigationBar.isTranslucent = false
But nothing changed, for more details here's a screenshot:
What I can do to solve that?
Try:
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
And if you want to apply this effect to the whole app (so that you don't need to write this code for every navigation controller) you can use:
UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarPosition: UIBarPosition.Any, barMetrics: UIBarMetrics.Default)
UINavigationBar.appearance().shadowImage = UIImage()
I am just a simple guy struggling to get a translucent navigation bar.
I have tried to set it in appDelegate and in the spesific ViewController.
What i end up with is this:
Does anyone know why the section header in white is moved down? The navigation bar is not even translucent when i scroll and i can´t set a color to it. (i can set color when translucent = false)
I have tried to set it to translucent and opaque and inferred in storyboard.(not working)
Update:
let colorImage = imageFromColor(UIColor(red:0.22, green:0.23, blue:0.29, alpha:0.5), frame: CGRectMake(0, 0, 340, 64))
self.navigationController!.navigationBar.setBackgroundImage(colorImage, forBarMetrics: UIBarMetrics.Default)
self.navigationController!.navigationBar.shadowImage = colorImage
self.navigationController!.navigationBar.translucent = true
The colorImage is a image i make with a rgb-uicolor. The outcome is this: navigation bar 2
It is transclucent between the section header, but the top bar is not!
UPDATE 2
If you are trying to set a translucent background for navigationBar across your application, you can use the following code in application:didFinishLaunchingWithOptions method of your AppDelegate
let colorImage = getImageWithColor(UIColor(red:0.22, green:0.23, blue:0.29, alpha:0.5), size: CGSizeMake(360, 64))
UINavigationBar.appearance().setBackgroundImage(colorImage, forBarMetrics: UIBarMetrics.Default)
UINavigationBar.appearance().translucent = true
UINavigationBar.appearance().tintColor = UIColor.whiteColor()
Result Screenshot: