I am adding a custom background for my UINavigationBar. It works fine as long as the phone is in portrait mode. As soon as I switch to landscape mode, half the bar appears blue (the default navbar color) and half of it has my image
How can I stretch the image for landscape mode and make it small again for portrait mode?
Thanks
Solution
Incase anyone is looking for an answer to how to add an image to navigation bar - here goes
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 480.0, 44.0)];
[imgView setImage:[UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:#"navbar_landscape" ofType:#"png"]]];
[navigationController.navigationBar addSubview:imgView];
[imgView release];
In both screen orientation modes it's much better to use
[navigationController.navigationBar insertSubview:imgView atIndex:0];
This puts image view under all other views and all the default navigation bar elements (title, standard buttons) work OK.
After a bit of research and trail and error, I found a work around, that will not replace the navbar when you enter the movie playback mode. Hopeefully this does not cause problems with app approval, but based on this post, I think it should be fine:
http://developer.apple.com/iphone/library/qa/qa2009/qa1637.html
#implementation UINavigationBar (UINavigationBarCategory)
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
if([self isMemberOfClass: [UINavigationBar class]]){
UIImage *image = [UIImage imageNamed:#"navBarBackground.png"];
CGContextClip(ctx);
CGContextTranslateCTM(ctx, 0, image.size.height);
CGContextScaleCTM(ctx, 1.0, -1.0);
CGContextDrawImage(ctx, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), image.CGImage);
}else{
[super drawLayer:layer inContext:ctx];
}
}
#end
You probably need to set the autoresizingMask of your background image view; try using UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight
The solution Ben gave did solve the problem but it stretches the image in landscape mode. I ended up creating two images- one for landscape and other for the portrait mode. I then added code in shouldAutoRotate to change the navbar image based on the orientation
You can change the image for both portrait and landscape orientations by supplying different images for different orientations by checking the frame size of that UINavigation bar instance:
- (void) drawLayer:(CALayer *)layer inContext:(CGContextRef)context
{
if ([self isMemberOfClass:[UINavigationBar class]] == NO) {
return;
}
UIImage *image = (self.frame.size.width > 320) ?
[UINavigationBar bgImageLandscape] : [UINavigationBar bgImagePortrait];
CGContextClip(context);
CGContextTranslateCTM(context, 0, image.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextDrawImage(context, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), image.CGImage);
}
And this complete demo Xcode project on customizing the appearance of UINavigationBar might be helpful. It also includes #2x versions of background images to support retina displays on iPhone 4 devices.
Try the simpler method of [UIImage imageNamed:#"navbar_landscape.png"] since a UI element is exactly what imageNamed: is intended for, as ljonesATL shows.
Related
I'm using a category to implement a custom background for UINavigationBar.
#implementation UINavigationBar (UINavigationBarCategory)
- (void)drawRect:(CGRect)rect
{
UIImage *img = [UIImage imageNamed: #"TopNav-YellowRule.png"];
[img drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
#end
The image that I am using is a semitransparent PNG24. When the app loads the background of the UINavigationBar shows up just fine but is not semitransparent - I cannot see the views that are below the UINavigationBar.
When I rotate the device, however, the image is suddenly semitransparent and works just fine. Any ideas what is happening on rotate that is allow the image to display as intended? Is there a way to fix it so that it displays properly on initial load, before a rotation?
Try adding this after #end. See if it helps
navgationController.navigationBar.backgroundColor = [UIColor clearColor];
I have been trying to figure out how to display a background image behind a UINavigationBar on my iPhone app and have come across the same solution many times which is as follows:
#implementation UINavigationBar (UINavigationBarCategory) {
- (void)drawRect:(CGRect)rect {
UIImage *img = [UIImage imageNamed: #"logo_bar.png"];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextDrawImage(context, CGRectMake(0, 0, 317, 27), img.CGImage);
}
#end
Which works to a degree
My image is upside down and backwards!! why on earth would that be? I have checked the image itself which is fine. Where would this transform be getting applied??
I also have further questions, like:
How can I choose to show the BG image or perhaps toggle its alpha on selected screens? There is one particular screen where there is a back button and it covers the image, which I dont want, I would rather just not display the image on that screen.
The image is not the entire height of the UINavigationBar its just a small slice of it (27 as you can see). How can I keep the tint color for the rest of the bar using this technique?
Thanks, I have not used Categories before which may be key to me understanding this, but perhaps not...
// Drawing code
CGContextRef c = UIGraphicsGetCurrentContext();
UIImage *back=[UIImage imageNamed:#"bar.png"];
CGContextScaleCTM(c,1,-1);
CGContextTranslateCTM(c,0,-44);
CGContextDrawImage(c,CGRectMake(0, 0, 320, 44),[back CGImage]);
This is how I draw my custom navigation bar. Hope that helps.
You can also do it in the drawLayer:inContext: method in a UINavigationBar category class. Inside the drawLayer:inContext: method, you can draw the background image you want to use. This code also supports both portrait and landscape orientations.
- (void) drawLayer:(CALayer *)layer inContext:(CGContextRef)context
{
if ([self isMemberOfClass:[UINavigationBar class]] == NO) {
return;
}
UIImage *image = (self.frame.size.width > 320) ?
[UINavigationBar bgImageLandscape] : [UINavigationBar bgImagePortrait];
CGContextClip(context);
CGContextTranslateCTM(context, 0, image.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextDrawImage(context, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), image.CGImage);
}
And this complete demo Xcode project on customizing the appearance of UINavigationBar might be helpful.
Is there a way to add an image in the background of UINavigationBar. There is no direct option through interface builder but I have seen apps implemented this thing.
Any help would be appreciated.
Thanks
Create a UIView and add it as a subview.
Edit: You can now use setBackgroundImage:forBarMetrics:. Source: https://stackoverflow.com/a/7765102/313875
Use this code
UIImage *backgroundImage = [UIImage imageNamed:#"strip.png"];
[upnavbar setBackgroundImage:backgroundImage forBarMetrics:UIBarMetricsDefault];
this wil work.
Just add your background as a subview, as jrtc27 suggested and change the tint color according your needs.
You can also override the drawLayer:inContext: method in a UINavigationBar category class. Inside the drawLayer:inContext: method, you can draw the background image you want to use. You can also use different sized images for portrait and landscape orientations if you'd like to.
- (void) drawLayer:(CALayer *)layer inContext:(CGContextRef)context
{
if ([self isMemberOfClass:[UINavigationBar class]] == NO) {
return;
}
UIImage *image = (self.frame.size.width > 320) ?
[UINavigationBar bgImageLandscape] : [UINavigationBar bgImagePortrait];
CGContextClip(context);
CGContextTranslateCTM(context, 0, image.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextDrawImage(context, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), image.CGImage);
}
And as a complete demo Xcode project on customizing the appearance of UINavigationBar this and this might be helpful.
I recently wrote an article about customization of background for UINavigatioBar and UIToolbar. You can find a code sample and categories for seamless integration of this functionality in your app by following link — http://leonov.co/2011/04/uinavigationbar-and-uitoolbar-customization-ultimate-solution/
You can also override the drawRect function.
#implementation UINavigationBar (UINavigationBarCustom)
- (void)drawRect:(CGRect)rect {
UIImage *image = [UIImage imageNamed:#"nav_bar_logo.png"];
[image drawInRect:rect];
}
#end
I have applied following code to my application to change the navigation bar image.
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[self.navigationController.navigationBar setTintColor:[UIColor blackColor]];
[self setNavigationBarTitle];
}
-(void)setNavigationBarTitle {
UIView *aViewForTitle=[[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 45)] autorelease];
UIImageView *aImg=[[UIImageView alloc] initWithFrame:CGRectMake(-8, 0, 320, 45)];
aImg.image=[UIImage imageNamed:#"MyTabBG.png"];
[aViewForTitle addSubview:aImg]; [aImg release];
UILabel *lbl=[[[UILabel alloc] initWithFrame:CGRectMake(0, 0, 305, 45)] autorelease];
lbl.backgroundColor=[UIColor clearColor]; lbl.font=[UIFont fontWithName:#"Trebuchet MS" size:22];
lbl.shadowColor=[UIColor blackColor]; [lbl setShadowOffset:CGSizeMake(1,1)];
lbl.textAlignment=UITextAlignmentCenter; lbl.textColor=[UIColor whiteColor]; lbl.text=#"Mobile Tennis Coach Overview";
[aViewForTitle addSubview:lbl];
[self.navigationItem.titleView addSubview:aViewForTitle];
}
See following images. You can see the problem that I am facing.
Each view controller of my application has above methods to set the navigation bar background.
How ever, when I push a new view controller to my application. Back button will be appear.
I need back button to be appear. But The image should be behind back button.
Now I am little confused here.
Can you help me regarding this?
Thanks in advance for sharing your knowledge with me.
Thanks a lot.
After an annoying night, I found a slight tweak to this, if you use drawLayer. With drawRect, when you play a video, or youtube video, the navbar is replaced with the image. And I read a few posts that this caused their app to be rejected.
#implementation UINavigationBar (UINavigationBarCategory)
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
if([self isMemberOfClass:[UINavigationBar class]])
{
UIImage *image = [UIImage imageNamed:#"navBarBackground.png"];
CGContextClip(ctx);
CGContextTranslateCTM(ctx, 0, image.size.height);
CGContextScaleCTM(ctx, 1.0, -1.0);
CGContextDrawImage(ctx,
CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), image.CGImage);
}
else
{
[super drawLayer:layer inContext:ctx];
}
}
#end
If this article is accurate, all should be fine with this approach:
http://developer.apple.com/iphone/library/qa/qa2009/qa1637.html
The short answer is that modifying the structure of the UINavigationBar is not supported by Apple. They really do not want you do be doing what you are trying to do. That is what is causing the issue you are seeing.
Please file a radar requesting this feature so that it can get enough attention to be officially added at some point.
Having said that, to solve the issue you can add a category to UINavigationBar with a -drawRect: method and draw the background image in that method. Something like this will work:
- (void)drawRect:(CGRect)rect
{
static UIImage *image;
if (!image) {
image = [UIImage imageNamed: #"HeaderBackground.png"];
if (!image) image = [UIImage imageNamed:#"DefaultHeader.png"];
}
if (!image) return;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextDrawImage(context, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height), image.CGImage);
}
how do i show a background image on a navigation bar or give tint color to the navigation bar in a native iphone application??
For iOS5 use the following lines of code:
UINavigationBar *navBar = [[self navigationController] navigationBar];
UIImage *backgroundImage = [UIImage imageNamed:#"nav-bar-background-normal"];
[navBar setBackgroundImage:backgroundImage forBarMetrics:UIBarMetricsDefault];
For backward compatibility do a check to see if the navigation bar responds to setBackgroundImage:forBarMetrics:
More information on:
http://sebastiancelis.com/2009/12/21/adding-background-image-uinavigationbar/
This's how I did on iOS4:
#import <QuartzCore/QuartzCore.h> // For .layer
self.navigationController.navigationBar.layer.contents = (id)[UIImage imageNamed:#"navigationBarBackgroundImage"].CGImage;
self.navigationController.navigationBar.tintColor = [UIColor orangeColor];
No need to switch subviews between z-orders (-exchangeSubviewAtIndex:withSubviewAtIndex:), both background image and tintColor set in one line of code, and works with #2x image too.
Was looking for this a week ago. Found this over here discussions. apple. com/thread.jspa?threadID=1649012&tstart=0 (sorry won't let me post a real link).
-(void)setBackgroundImage:(UIImage*)image withTag:(NSInteger)bgTag{
if(image == NULL){ //might be called with NULL argument
return;
}
UIImageView *aTabBarBackground = [[UIImageView alloc]initWithImage:image];
aTabBarBackground.frame = CGRectMake(0,0,self.frame.size.width,self.frame.size.height);
aTabBarBackground.tag = bgTag;
[self addSubview:aTabBarBackground];
[self sendSubviewToBack:aTabBarBackground];
[aTabBarBackground release];
}
/* input: The tag you chose to identify the view */
-(void)resetBackground:(NSInteger)bgTag {
[self sendSubviewToBack:[self viewWithTag:bgTag]];
}
I made this as a category to UINavigationBar. To set it a background image for a UINavigationBar inside a UINavigationBarController, I did this:
[navigationControllerForChannels.navigationBar setBackgroundImage:[UIImage imageNamed:#"top_bar.png"] withTag:48151623];
I've had some buginess when updating the tab bar, so you'll want to call
[self.navigationController.navigationBar resetBackground:48151623];
After any modifications to the bar.
You can override UINavigationBar drawRect. The code can be placed to appDelegate.m
I've tested it and it's working on 3x and 4x iOS.
#implementation UINavigationBar (UINavigationBarCategory)
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor blackColor]; //tint color
UIImage *img = [UIImage imageNamed: #"navBarBg.png"]; // your image
[img drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
self.tintColor = color;
}#end
For the iOS5 and iOS6 I've used this solutions and it worked perfectly, Making a Universal UINavigationBar Background Image.
iPhone Retina Portrait 640px x 88px / iPhone Non-Retina Portrait 320px x 44px
Inside AppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
Place this code
// Set the status bar to black color.
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleBlackOpaque animated:NO];
// Change #"menubar.png" to the file name of your image.
UIImage *navBar = [UIImage imageNamed:#"menubar.png"];
[[UINavigationBar appearance] setBackgroundImage:navBar forBarMetrics:UIBarMetricsDefault];
Don't forget to change the image name (menubar.png)
Check out this link for the full answer http://www.lwxted.com/blog/2012/add-custom-background-image-uinavigationbar-ios-5/
a background image is going to take a bit more work (you might want to try setting a titleView that's the same size as the bar itself; I haven't tried this myself) or adding a view behind existing subviews. Tint color is easy: navBar.tintColor = [UIColor orangeColor];
If you use the CGImage solution, you may have a problem with image size:
CGRect layer=self.navigationController.navigationBar.frame;
layer.size.height=57.0;
layer.origin.y=0;
self.navigationController.navigationBar.frame=layer;
CGImageRef imageRef = [UIImage imageNamed:#"myImg.png"].CGImage;
self.navigationController.navigationBar.layer.contents = (id)imageRef;
It seems to me that the image is streched down, since the layer seems to have a height of 44.0 pixel, but a background image for the UINavigationBar should be at least 57.0.
If you try to move the layer's frame, all the buttons will move within it.