Wednesday, October 27, 2010

UINavigationBar Back Button with images



Your Ad Here


This is a topic that I have noticed on numerous iPhone development forums and since I’ve had to address this in multiple apps that I’ve worked on in the past, I thought it would be a good topic to share some info on.  The default behavior of the navigation controller is to provide a back button with the title of the previous view controller.  This is fine and dandy if you have short titles and that’s the behavior your looking for but what if you wanted to create a home button similar to the Facebook app or for that matter, an image that acts like a button but doesn’t look like one.
We will start with the Facebook style Home button.  To reproduce the following:



In the view controller that you want to add the home button to, your going to need to add a cancel method to pop your view controller:

-(IBAction)cancel:(id)sender{
 [self.navigationController popViewControllerAnimated:YES];
}
Next you will need to add your custom home button with some sort of  image, in this case we are using an image called “home-button.png”:

- (void)viewDidLoad {
 [super viewDidLoad];

 // Add Home Button
 UIBarButtonItem *cancelButton = [[[UIBarButtonItem alloc]
       initWithImage:[UIImage imageNamed:@"home-button.png"]
       style:UIBarButtonItemStylePlain
       target:self
       action:@selector(cancel:)] autorelease];
 self.navigationItem.leftBarButtonItem = cancelButton;
}
And that’s it.  You’ll need this in each view controller that is on top of your home view controller.
Next we will recreate the following:



In this case, we are using an image as the leftbarbuttonitem. We do so by creating our cancel method in the view controller that you want to add the home or back image to.

-(IBAction)cancel:(id)sender{
 [self.navigationController popViewControllerAnimated:YES];
}
Next we will add the image “back-image.png” as our back button and size up the button:

- (void)viewDidLoad {
 [super viewDidLoad];

 // Add Back Bar Button
 UIButton *home = [UIButton buttonWithType:UIButtonTypeCustom];
 UIImage *homeImage = [[UIImage imageNamed:@"back-image.png"]
      stretchableImageWithLeftCapWidth:10 topCapHeight:10];
 [home setBackgroundImage:homeImage forState:UIControlStateNormal];
 [home addTarget:self action:@selector(cancel:)
    forControlEvents:UIControlEventTouchUpInside];
 home.frame = CGRectMake(0, 0, 99, 35);
 UIBarButtonItem *cancelButton = [[[UIBarButtonItem alloc]
      initWithCustomView:home] autorelease];
 self.navigationItem.leftBarButtonItem = cancelButton;
}
And that’s it!  One nice benefit to this is that you can perform  additional processing in the cancel method if needed prior to popping to  the previous controller.
One last item to add is if you just want to change the text of the back button so that it’s different than the previous view controller’s title:

UIBarButtonItem *backButton = [[UIBarButtonItem alloc]
                                      initWithTitle:@"Back"
                                      style:UIBarButtonItemStylePlain
                                      target:nil action:nil];
     self.navigationItem.backBarButtonItem = backButton;
     [backButton release];

5 comments:

  1. I am not getting any button... does this work with mapkit? I've got a map page that I want to add a back button to. I'm putting this in MapViewController.m and I put the -(IBAction) line directly above where the viewDidLoad line is... what am I doing wrong?

    ReplyDelete
  2. Yeah it will work with MapKit as well. Above process is not dependent to MapKit. It is dependent to your NavigationBar.

    You are doing something wrong with your navigationBar. Can you please elaborate more.

    ReplyDelete
  3. Sorry for the delay in responding... I added the above code to my MapViewController.m. I guess I need to first add a navigationBar... but I don't know how to do that. Do I need to add any type of framework? I'm pretty new to all of this.

    ReplyDelete
  4. You can add navigationBar like this

    UINavigationBar *navBar = [[UINavigationBar alloc] initWithFrame:
    CGRectMake(0,0,320,52)];

    navBar.autoresizingMask = UIViewAutoresizingFlexibleWidth;

    [self.view addSubview:navBar];

    [navBar release];

    Or else add UIToolBar

    ReplyDelete
  5. Sorry for the delay in responding... I added the above code to my MapViewController.m. I guess I need to first add a navigationBar... but I don't know how to do that. Do I need to add any type of framework? I'm pretty new to all of this.

    ReplyDelete

 
Submit Express Inc.Search Engine Optimization Services