I have the following code that works fine for setting a background image:
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed: #"navbar_bg.png"] forBarMetrics:UIBarMetricsDefault];
My question is, for Xcode6, iOS8/9, iPhone 5, 6, 6+, iPad, etc, how do I make sure I cover all devices, widths and resolutions, to make sure that my background image always fills the navigation bar correctly?
I have seen other questions on SO and various other sites, but all have been 2-4 years old, and so don't mention or cover the latest device widths and resolutions.
I want to use a background image in the navigation bar, but I need to make sure it looks good on all possible devices.
All you have to do is have three versions of your image in your asset catalogue. The first in the size you need the second twice the size and the third three times the size. Xcode will put the right image on the right device.
Alternatively you can just put a vectorial image and at complie time Xcode will generate the three images for you on the fly.
For the navigation bar you need separate images for portrait and landscape. You can write something like this:
UIImage *portraitImage = [UIImage imageNamed:#"test_bar_portrait.png"];
UIImage *landscapeImage = [UIImage imageNamed:#"test_bar_landscape.png"];
[[UINavigationBar appearance] setBackgroundImage:portraitImage forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setBackgroundImage:landscapeImage forBarMetrics:UIBarMetricsLandscapePhone];
self.navigationController.navigationBar.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
Related
The following code works perfectly on iOS8 but has a strange behavior on iOS7.
[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:#"icone retour#2x.png"]];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:#"icone retour#2x.png"]];
See images below. Any idea ?
You should not directly reference the #2x or #3x version of your images, but rather just reference the "base" name and let iOS automatically determine the correct variant for the current device:
[UIImage imageNamed:#"icone retour.png"]
Regarding the different behavior in iOS7 vs. iOS8 I can only speculate that iOS8 has changed the behavior in imageNamed: with regard to the scale of the returned UIImage when passing an image with #2x or #3x in the name. But you should usually not do this anyways.
I currently develop a sample app that I deliver white-branded to several entities based on their own visual entities.
Since iOS7 and the merge of the UIStatusBar with the UINavigationBar, I have to manage images in a lot of size : #2x for retina, -64h for iOS7 (64px height) and classical one.
I want to support both iOS 5, 6 & 7.
It is quite painful each time I want to deliver for specific entity to photoshop and resize 7 (even 8, here is missing the #2x for iPad) images.
At least for the Icon image it is quite easy as it remains a square whatever the targeted OS or device.
Is their a more productive to package it with fewer image resources ?
I am currently using the following code to set up my navbar image in all the app :
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"navbar-64h.png"] forBarMetrics:UIBarMetricsDefault];
else
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:#"navbar.png"] forBarMetrics:UIBarMetricsDefault];
You can provide just two images (regular and retina), using -[UIImage resizableImageWithCapInsets:], or the Xcode 5 image slicer.
In code
For example:
UIEdgeInsets insets = UIEdgeInsetsMake(1, 1, 1, 1); // represents a 1 point (2 pixel retina) border of your background color around your logo.
UIImage *navBackgroundImage = [UIImage imageNamed:#"background"];
navBackgroundImage = [navBackgroundImage resizableImageWithCapInsets:insets];
[[UINavigationBar appearance] setBackgroundImage:navBackgroundImage forBarMetrics:UIBarMetricsDefault];
The insets should indicate the area of the image that isn't stretchable.
If you want more control over the placement of the logo, make the background color border larger than 1 point, and adjust insets to match.
You can provide different values of insets depending on your device, if necessary.
Xcode 5 Image Slicer
This code is equivalent to Xcode 5's image slicing editor in xcassets files, which is backwards compatible to iOS 5 according to this post.
I am using this code to set custom background image for all UINavigationBars. The problem is that the final image does not appear to be retina size. I researched UINavigationBars are 640x88px. Thats exact dimensions of my UINavigationBar.png however I only see 320x44px on the iPhone Sim(retina) and my iphone 4 which is also retina.
The code that sets the image:
UIImage *background = [UIImage imageNamed:#"UINavigationBar.png"];
[[UINavigationBar appearance] setBackgroundImage:background forBarMetrics:UIBarMetricsDefault];
Here is a screenshot for illustration:
(the difference is there is no bottom dark line as in Photoshop. I can only see half of the image in the iPhone 5 Simulator (Retina))
My question is why this happens and how can I fix it? Thanks.
You need to have two .png files with different size and same name, but with #2x addition in the retina display file.
For example,
File 1 for regular display support:
size- 320x44,
name- UINavigationBar.png
File 2 for retina display support:
size- 640x88,
name- UINavigationBar#2x.png
In your code you always use UINavigationBar.png, the device will automatically know witch file to use, according to the hardware.
My back button in my app works perfectly on Retina-based devices but has serious issues on non-Retina devices. Does anyone have any idea why this would be happening? As you can see the UINavigationBar background gets overlayed on top of the text area of the button.
However, when viewed on a Retina device, it renders correctly. Both images have #2x versions for retina display but for some reason the standard version won't render. I use this code to set the background button's image:
UIImage *backButtonImage = [UIImage imageNamed:#"backbutt4on.png"];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
Non-Retina:
Retina:
In my iPhone app I have the following code to set the background image for both the landscape and portrait titlebar in the app.
if ([UINavigationBar respondsToSelector:#selector(appearance)]) {
[[UINavigationBar appearance] setBackgroundImage: [UIImage imageNamed:#"titlebar_landscape.png"] forBarMetrics:UIBarMetricsLandscapePhone];
[[UINavigationBar appearance] setBackgroundImage: [UIImage imageNamed:#"titlebar.png"] forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setBackgroundColor: [UIColor redColor]];
}
The image is the apps logo centered on a gradient background, which is re-sized for landscape accordingly. I have done the same for my iPad version of the app, however the landscape image doesn't work, because there is no specific option for Landscape on the iPad like there is on the iPhone UIBarMetricsLandscapePhone.
So my question is how to I achieve a similar effect on my iPad of my apps logo centered on a gradient background in landscape mode in iOS5?
iPad uses the same bar metrics regardless of orientation, so you should only have to set the UIBarMetricsDefault image. The iPhone landscape metric is because the system uses a slightly shorter navigation bar on iPhone when in landscape mode. All other navigation bars are the larger size, including any navigation bar shown on an iPad.
Here is a good tutorial on it, might help point you in the right direction. http://iosdevelopertips.com/user-interface/ios-5-customize-uinavigationbar-and-uibarbuttonitem-with-appearance-api.html