iosfreak
iosfreak

Reputation: 5238

Custom UINavigationBar's backButton?

I am making a iPhone app that allows the user to go back in a UINavigationBar. However, the way it looks now is horrendous. I am trying to customize it with my own image (minus the default UIBarButtonItem background). My image includes my custom background, but you can still see part of the button on the left and the right.

UIBarButtonItem *cancelButton = [[[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_button_normal.png"] style:UIBarButtonItemStylePlain target:self   action:@selector(cancel:)] autorelease];
self.navigationItem.leftBarButtonItem = cancelButton;  

Is there a way to remove that space? Is there a possibility I can use a UIButton so I can customize it completely? I did something in interface builder where i dragged a UIButton into the UINavigationBar's rightButton and it works perfectly. Is there anyway I can do it programmatically?

Thanks!

Here's how it looks:

UINavigationBar

EDIT #1:

UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button addTarget:self action:@selector(cancel:) forControlEvents:UIControlEventTouchDown];
[button setTitle:@"Show View" forState:UIControlStateNormal];
[button setBackgroundImage:[UIImage imageNamed:@"back_button_normal.png"] forState:UIControlStateNormal];

UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];
[self.navigationItem setLeftBarButtonItem:barButtonItem];

Here's how I make my background for the UINavigationBar (places in my RootViewController):

@implementation UINavigationBar (UINavigationBarCustomDraw)

- (void) drawRect:(CGRect)rect {

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

if ([self.topItem.title length] > 0 && ![self.topItem.title isEqualToString:@"Back to ..."]) {
    [[UIImage imageNamed:@"UINavigationBar_background.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:@"login_button.png"] drawInRect:rect];
    self.topItem.titleView = [[[UIView alloc] init] autorelease];
}
}

@end

Upvotes: 6

Views: 13904

Answers (3)

akashivskyy
akashivskyy

Reputation: 45170

If you want to add UIButton to navigation bar via obj-c, your code should look like this:

UIButton *button = /* initialize your button */

UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];
[self.navigationItem setLeftBarButtonItem:barButtonItem];

Upvotes: 11

James Gwee
James Gwee

Reputation: 341

Combined the two answers and added the Back Button Functionality

// Custom Navigation Bar Back Button

// Create Button
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; 
button.frame = CGRectMake(0,0,54,32); // width=54, height=32

// Set Button Image
NSString *backButtonURL = [[NSBundle mainBundle]pathForResource:@"back" ofType:@"png"];
UIImage *backButtonImage = [UIImage imageWithContentsOfFile:backButtonURL];
[button setBackgroundImage:backButtonImage forState:UIControlStateNormal];

// Important: Set Button Action to go back
[button addTarget:self.navigationController action:@selector(popViewControllerAnimated:) forControlEvents:UIControlEventTouchUpInside];

Upvotes: 14

Jano
Jano

Reputation: 63667

The problem is you are using UIButtonTypeRoundedRect instead UIButtonTypeCustom. You may also want to use:

UIImage *image = [UIImage imageNamed:@"back_button_normal.png"]
button.frame = CGRectMake(0, 0, image.size.width, image.size.height);

Upvotes: 2

Related Questions