UINavigationController title can be some Image?

Question

Is it possible to set some image as title of Navigation bar?

I think NYTimes application used a Navigation bar and title is look like image file.(the reason why it's seems NavigationBar is becuase they use right button to search)

Cheers.

Answer 1

You can use an ImageView for the UINavigationItem.titleView property, something like:

self.navigationItem.titleView = myImageView;

Answer 2

I have created a custom category for 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 invoke it from my UINavigationController

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

Answer 3

I modified the UINavigationBar+CustomImage.m to have the title 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 4

I find that a transparent .png at about 35px in height has worked well.

- (void)awakeFromNib {

//put logo image in the navigationBar

self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo.png"]];

}

Answer 5

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

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

Answer 6

I modified the code to put the image on top but its not working the barButtons are appearing on the top of the image, ie. they still appear central aligned and it looks pathetic :(

- (void) setBackgroundImage:(UIImage*)image {
if (image == NULL) return;
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = CGRectMake(0,0,320,88);
[self addSubview:imageView];
[imageView release];

}

self.navigationItem.prompt = @"";
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"logo_new.png"]];