Can I set an image as a title in a UINavigationBar?

Question

Can I set any image as the title of the navigation bar?

I think the NYTimes application used the navigation bar and the title looked like an image file (the reason the UINavigationBar seems to be because they use the right button to search).

Answer 1

You can use UIImageView for the UINavigationItem.titleView property, for example:

 self.navigationItem.titleView = myImageView; 

Answer 2

I find the transparent .png at about 35 pixels high.

 - (void)awakeFromNib { //put logo image in the navigationBar UIImageView* img = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo.png"]]; self.navigationItem.titleView = img; [img release]; } 

Answer 3

You can do this directly from the storyboard (starting with Xcode 7):

• Create a view outside the main view controller view. It can be a nested view or just an image.
• Add a navigation item to the view controller
• Ctrl + drag from the navigation item and switch to the appearance

4. Select a header view.

Answer 4

I created a custom category for the UINavigationBar as follows

UINavigationBar + CustomImage.h

 #import <UIKit/UIKit.h> @interface UINavigationBar (CustomImage) - (void) setBackgroundImage:(UIImage*)image; - (void) clearBackgroundImage; - (void) removeIfImage:(id)sender; @end 

UINavigationBar + CustomImage.m

 #import "UINavigationBar+CustomImage.h" @implementation UINavigationBar (CustomImage) - (void) setBackgroundImage:(UIImage*)image { if (image == NULL) return; UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; imageView.frame = CGRectMake(110,5,100,30); [self addSubview:imageView]; [imageView release]; } - (void) clearBackgroundImage { NSArray *subviews = [self subviews]; for (int i=0; i<[subviews count]; i++) { if ([[subviews objectAtIndex:i] isMemberOfClass:[UIImageView class]]) { [[subviews objectAtIndex:i] removeFromSuperview]; } } } @end 

I call it from my UINavigationController

 [[navController navigationBar] performSelectorInBackground:@selector(setBackgroundImage:) withObject:image]; 

Answer 5

This line will work for you, I always use this

 [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"imageNavBar.png"] forBarMetrics:UIBarMetricsDefault]; 

Answer 6

I changed UINavigationBar + CustomImage.m so that the header is still visible to the user. Just use insertSubview: atIndex: instead of addSubview:

UINavigationBar + CustomImage.m

 #import "UINavigationBar+CustomImage.h" @implementation UINavigationBar (CustomImage) - (void) setBackgroundImage:(UIImage*)image { if (image == NULL) return; UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; imageView.frame = CGRectMake(0, 0, 320, 44); [self insertSubview:imageView atIndex:0]; [imageView release]; } - (void) clearBackgroundImage { NSArray *subviews = [self subviews]; for (int i=0; i<[subviews count]; i++) { if ([[subviews objectAtIndex:i] isMemberOfClass:[UIImageView class]]) { [[subviews objectAtIndex:i] removeFromSuperview]; } } } @end 

Answer 7

This works well too.

 [self.navigationController.navigationBar.topItem setTitleView:[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"YourLogo"]]]; 

Answer 8

For those who have the same error, but in Xamarin Forms , the solution is to create a Renderer in iOS application and set the image as follows:

 [assembly: Xamarin.Forms.ExportRenderer(typeof(Xamarin.Forms.Page), typeof(MyApp.Renderers.NavigationPageRenderer))] namespace MyApp.Renderers { #region using using UIKit; using Xamarin.Forms.Platform.iOS; #endregion public class NavigationPageRenderer : PageRenderer { public override void ViewDidLoad() { base.ViewDidLoad(); SetTitleImage(); } private void SetTitleImage() { UIImage logoImage = UIImage.FromFile(ResourceFiles.ImageResources.LogoImageName); UIImageView logoImageView = new UIImageView(logoImage); if (this.NavigationController != null) { this.NavigationController.NavigationBar.TopItem.TitleView = logoImageView; } } } } 

Hope this helps someone!

Answer 9

Do it fast using the storyboard and @IBDesignable :

 @IBDesignable class AttributedNavigationBar: UINavigationBar { @IBInspectable var imageTitle: UIImage? = nil { didSet { guard let imageTitle = imageTitle else { topItem?.titleView = nil return } let imageView = UIImageView(image: imageTitle) imageView.frame = CGRect(x: 0, y: 0, width: 40, height: 30) imageView.contentMode = .scaleAspectFit topItem?.titleView = imageView } } } 

Then in the attribute pointer just select the image:

and wait a second for the result:

So, setting the view where it should be ... in the storyboard.

Answer 10

Just use

 [navController.navigationBar insertSubview:myImage atIndex:0] ; 

where myImage is of type UIImageView and navController is of type UINavigationController

Answer 11

I modified the UINavigationBar + CustomImage code to work correctly without memory leak.

 - (void)setBackgroundImage:(UIImage *)image { if (! image) return; UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; imageView.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height); [self addSubview:imageView]; [imageView release]; } - (void) clearBackgroundImage { // This runs on a separate thread, so give it it own pool NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init]; NSArray *mySubviews = self.subviews; // Move in reverse direction as not to upset the order of elements in the array for (int i = [mySubviews count] - 1; i >= 0; i--) { if ([[mySubviews objectAtIndex:i] isMemberOfClass:[UIImageView class]]) { [[mySubviews objectAtIndex:i] removeFromSuperview]; } } [pool release]; } 

Answer 12

The following describes how you will do this in (Xamarin's) MonoTouch with C # .NET.

Create a UIViewConvrtoller that is in the NavigationController, then call this anytime:

 someNiceViewControllerYouMade.NavigationController.NavigationBar .InsertSubview(new UIImageView (MediaProvider.GetImage(ImageGeneral.navBar_667x44)),0); 

Note. MediaProvider is just a class that retrieves images.

This example shows that the view fills the full navigation bar and allows you to display text for the title of the elements.

Answer 13

If your buttons disappear when you move back and forth in navigation, this is fixed for me:

 NSArray *mySubviews = navigationBar.subviews; UIImageView *iv = nil; // Move in reverse direction as not to upset the order of elements in the array for (int i = [mySubviews count] - 1; i >= 0; i--) { if ([[mySubviews objectAtIndex:i] isMemberOfClass:[UIImageView class]]) { NSLog(@"found background at index %d",i); iv = [mySubviews objectAtIndex:i]; [[mySubviews objectAtIndex:i] removeFromSuperview]; [navigationBar insertSubview:iv atIndex:0]; } } 

Answer 14

ios5.0 introduced a bunch of features to customize the look of standard elements. If you do not want to use ImageView for the title, an alternative would be to customize the appearance of all UINavbars using a background image and a custom font / color.

 - (void) customiseMyNav { // Create resizable images UIImage *portraitImage = [[UIImage imageNamed:@"nav_bar_bg_portrait"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)]; UIImage *landscapeImage = [[UIImage imageNamed:@"nav_bar_bg_landscape"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)]; // Set the background image [[UINavigationBar appearance] setBackgroundImage:portraitImage forBarMetrics:UIBarMetricsDefault]; [[UINavigationBar appearance] setBackgroundImage:landscapeImage forBarMetrics:UIBarMetricsLandscapePhone]; // set the title appearance [[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys: [UIColor colorWithRed:50.0/255.0 green:150.0/255.0 blue:100/255.0 alpha:1.0], UITextAttributeTextColor, [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.6], UITextAttributeTextShadowColor, [NSValue valueWithUIOffset:UIOffsetMake(0, -1)], UITextAttributeTextShadowOffset, [UIFont fontWithName:@"Arial-Bold" size:0.0], UITextAttributeFont, nil]]; } 

Answer 15

In MonoTouch, you can use this:

  this.NavigationItem.TitleView = myImageView; 

Answer 16

Add an image to the naviagtionBar with SWIFT , which is scaled to fit and stitch to borders. You can call this function inside the viewDidLoad () function of the view controller.

 func setupNavigationBarWithTitleImage(titleImage: UIImage) { let imageView = UIImageView(image: titleImage) imageView.contentMode = .ScaleAspectFit imageView.clipsToBounds = true navigationItem.titleView = imageView }