July 18

Custom UINavigationController Back Button

Posted by Jeff . Filed under Tutorials | 18 Comments

A common thing in client apps i write is custom back images, mostly because the apps have a custom UINavigationBar image, so its good to have them themed together. You can see what this looks like for this tutorial:

Ok so in your View Controller, thats shown after something in your navigation view is shown, add this code in the viewDidLoad method:

- (void)viewDidLoad {
    [super viewDidLoad];
	
	// Set the custom back button
	UIImage *buttonImage = [UIImage imageNamed:@"back_button.png"];
	
	//create the button and assign the image
	UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
	[button setImage:buttonImage forState:UIControlStateNormal];
	
	//set the frame of the button to the size of the image (see note below)
	button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
	
	[button addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];
	
	//create a UIBarButtonItem with the button as a custom view
	UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
	self.navigationItem.leftBarButtonItem = customBarItem;

 // Cleanup
 [customBarItem release];
}

Here we load the image we want for the back button in the navigation bar, create a custom UIButton and set the image to the button and then specify that the button is the left button item. I also add a selector to catch clicks, so we know when the user presses back. It calls the back method which quite simply:

-(void)back {	
	// Tell the controller to go back
	[self.navigationController popViewControllerAnimated:YES];
}

And thats it! You can get the project source here – CustomBackButton

This entry was posted on Sunday, July 18th, 2010 at 11:57 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

18 Responses to “Custom UINavigationController Back Button”

  1. Chris on October 14th, 2010 at 1:13 pm

    Perfect! Thank you for posting this code; works as advertised and solves my problem.

  2. Peter on November 28th, 2010 at 5:38 pm

    Thanks a lot for this snippet!
    Just a very small thing, ‘customBarItem’ needs to be released to avoid memory leak.

  3. Jeff on November 28th, 2010 at 6:46 pm

    Thanks Peter, yes of course every-time you call ‘alloc’ you need to have a corresponding release/autorelease if the object is getting retained somewhere else.

  4. Raed on May 10th, 2011 at 9:39 am

    Thanks Jeff,
    what about the navigation bar background image ?

  5. Jeff on May 12th, 2011 at 11:06 am

    Raed, Perhaps look at this thread

  6. Andrew on August 1st, 2011 at 7:36 pm

    Thanks for the tutorial! i was looking forever for something like this

  7. damnated on August 19th, 2011 at 10:11 am

    Did not work in the viewDidLoad method, but did in the view controller’s init method. It’s all good.

  8. tt on October 21st, 2011 at 2:31 am

    thanks Jeff!

  9. twitter how to get followers on October 26th, 2011 at 6:43 pm

    twitter how to get followers…

    [...]Custom UINavigationController Back Button | Applausible Blog[...]…

  10. Felix on November 25th, 2011 at 7:43 pm

    Thank you very much for this Tutorial! You helped me out a lot!

  11. seihee on December 12th, 2011 at 5:34 am

    Perfect! it is very useful tutorial :)
    thank you guy!

  12. Filip on December 29th, 2011 at 10:00 pm

    It almost works like a back button. With the exception of the transition animation (after the button is tapped and current view is popped off the navigation to the right).

    Legitimate back button animation – fade out and move to the right (at the same speed as title label moves to the right)
    Fake back button animation – fade out (no movement).

    Once you notice it once, this inconsistency becomes quite annoying.

  13. Juanjo on April 27th, 2012 at 5:04 am

    Perfect :-)

  14. Berniece on May 21st, 2012 at 5:13 am

    You have heard about viral marketing, right? I discovered some software that can automate the whole process. It takes the very best of all automated viral marketing strategies (and then some) and packages them into one, stupidity simple to use push button software that harnesses the power or word of mouth marketing. This really is some entirely new technology. Go right on ahead and check it out.. http://tinyurl.com/6sfb37g

  15. iris on September 13th, 2012 at 1:57 pm

    where does the back method go?

  16. kenn on October 26th, 2012 at 6:19 am

    Thanks posting this example!

  17. Automation on January 4th, 2013 at 10:21 pm

    Hi there, I discovered your web site via Google while searching for a related topic, your web site got here up, it looks great. I’ve added to favourites|added to my bookmarks.

  18. cr on January 13th, 2013 at 8:52 am

    To fix Legitimate back button animation:
    add [button setImage:buttonImage forState:UIControlStateHighlighted]; in viewDidLoad

Leave a Reply