Custom UINavigationBar with image and back button

Vladimir Boychentsov — Tue, 09 Feb 2010 19:10:16 +0000

Many people could not find this solution! It’s really very simple solution and it does not contain any private methods and functions. It’s based on the drawRect method and the simple manipulation with the title. If the title is specified, then the text of title displays, but if not, then displays the image.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

@implementation UINavigationBar (UINavigationBarCustomDraw)

- (void) drawRect:(CGRect)rect {

[self setTintColor:[UIColor colorWithRed:0.5f
green: 0.5f
blue:0
alpha:1]];

if ([self.topItem.title length] > 0 && ![self.topItem.title isEqualToString:@"Back to ..."]) {
[[UIImage imageNamed:@"Header_1px.png"] drawInRect:rect];

CGRect frame = CGRectMake(0, 0, 320, 44);
UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];
[label setBackgroundColor:[UIColor clearColor]];
label.font = [UIFont boldSystemFontOfSize: 20.0];
label.shadowColor = [UIColor colorWithWhite:0.0 alpha:1];
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor whiteColor];
label.text = self.topItem.title;
self.topItem.titleView = label;

} else {
[[UIImage imageNamed:@"Header.png"] drawInRect:rect];
self.topItem.titleView = [[[UIView alloc] init] autorelease];
}
}

@end

source

Customizing UINavigationBar

Vladimir Boychentsov — Wed, 09 Dec 2009 09:22:43 +0000

Change color for UINavigationBar

1	[[controller navigationBar] setTintColor:[UIColor colorWithRed:0.36 green:0.09 blue:0.39 alpha:1.00]];

Set custom title for UINavigationBar

1
2
3
4
5
6
7
8
9

CGRect frame = CGRectMake(0, 0, 400, 44);
UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:20.0];
label.shadowColor = [UIColor colorWithWhite:0.0 alpha:0];
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor blackColor];
label.text = navBar.topItem.title;
navBar.topItem.titleView = label;

Notes of a Developer » UINavigationBar

Custom UINavigationBar with image and back button

Customizing UINavigationBar