UINavigationBar Back Button with images

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];