Custom back button on navigation bar

Question

In my application there are many UIViewControllers with UINavigationControllers. There must be a "back" button and a "home" UIButton on the UINavigationBar. All of this works fine.

But some of my UIViewControllers have long names, and sometimes there is too small place left for it. I'm trying to replace the original label of the "back" button (it shows the title of the previous view) with a custom "Back", but whatever I tried it didn't work:

// Title didn't change
[self.navigationItem.backBarButtonItem setTitle:@"Back"];

// Action didn't set, no response from button ( button didn't do anything )
[self.navigationItem.leftBarButtonItem
   setAction:self.navigationItem.backBarButtonItem.action];

And I need the "back" button to have a style like in this question: Draw custom Back button on iPhone Navigation Bar

Is the answer provided in the question you reference not sufficient? — eric.mitchell, Nov 22 '11 at 03:28
possible duplicate of [How to change the title of the UINavigationBar back button to "Back"](http://stackoverflow.com/questions/8046622/how-to-change-the-title-of-the-uinavigationbar-back-button-to-back) — jrturton, Nov 22 '11 at 06:39
before iOS 7 there is no official API to do what you want. Not sure about iOS 7. — nielsbot, Oct 19 '13 at 18:26

score 50 · Answer 1 · edited Apr 09 '16 at 08:57

50

Try the following. It will definitely work:

- (void)viewDidLoad {
    [super viewDidLoad];

    UIImage *buttonImage = [UIImage imageNamed:@"back.png"];
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setImage:buttonImage forState:UIControlStateNormal];
    button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
    [button addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];

    UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
    self.navigationItem.leftBarButtonItem = customBarItem;
    [customBarItem release];
}

- (void)back {
    [self.navigationController popViewControllerAnimated:YES];
}

Make sure you have an button image with the size of a navigation bar back button in your resource folder with name back.png.

Feel free if any other assistance is required.

edited Apr 09 '16 at 08:57

Peter Mortensen

30,738
21
105
131

answered Nov 22 '11 at 07:05

Anil Kothari

7,653
4
20
25

I find that you can make the custom back button indistinguishable from the stock iOS back button by also setting an image for the highlighted state, like this: [button setImage:highlightedButtonImage forState:UIControlStateHighlighted]; – Omri Gazitt Apr 15 '12 at 01:28
why can't I add a title to my custom back button with this code? `[button setTitle:@"Back" forState:UIControlStateNormal];` – ArVan Jul 10 '12 at 14:04
Navigation bar has button of type UIBarButton.You can create UIBarButton items with custom content or create standard system items depending on your needs. – Anil Kothari Jul 10 '12 at 14:24
Actually I am using your code above and there is this line `[button setImage:buttonImage forState:UIControlStateNormal];` I thought that I could add `[button setTitle:@"Back" forState:UIControlStateNormal];` right after, and that would work, but it didn't... – ArVan Jul 11 '12 at 08:02
1

The problem with this approach is that you are not customizing the back button, rather you are adding a "leftBarButtonItem" which is not the same thing. – quickthyme Oct 30 '15 at 18:01

Jagie · Answer 2 · 2014-02-24T10:25:20.480

Target: customizing all back button on UINavigationBar to an white icon

Steps: 1. in "didFinishLaunchingWithOptions" method of AppDelete：

UIImage *backBtnIcon = [UIImage imageNamed:@"navBackBtn"];

if (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"7.0")) {
    [UINavigationBar appearance].tintColor = [UIColor whiteColor];
    [UINavigationBar appearance].backIndicatorImage = backBtnIcon;
    [UINavigationBar appearance].backIndicatorTransitionMaskImage = backBtnIcon;
}else{

    UIImage *backButtonImage = [backBtnIcon resizableImageWithCapInsets:UIEdgeInsetsMake(0, backBtnIcon.size.width - 1, 0, 0)];
    [[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage  forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

    [[UIBarButtonItem appearance] setBackButtonTitlePositionAdjustment:UIOffsetMake(0, -backButtonImage.size.height*2) forBarMetrics:UIBarMetricsDefault];
}

2.in the "viewDidLoad" method of the common super ViewController class:

 if (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"7.0")) {
        UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithTitle:@""
                                                                     style:UIBarButtonItemStylePlain
                                                                    target:nil
                                                                    action:nil];
        [self.navigationItem setBackBarButtonItem:backItem];
    }else{
        //do nothing
    }

score 6 · Accepted Answer · edited Apr 18 '17 at 12:34

6

Try this

UIBarButtonItem *backBarBtnItem = [[UIBarButtonItem alloc] initWithTitle:@"Back" style:UIBarButtonItemStylePlain target:self action:@selector(popViewController)];
[self.navigationItem setBackBarButtonItem:backBarBtnItem];

- (void)popViewController
{
    [self.navigationController popViewControllerAnimated:YES];
}

edited Apr 18 '17 at 12:34

emotality

12,795
4
39
60

answered Nov 22 '11 at 06:40

Mihir Mehta

13,743
3
64
88

that didn't work. I can remove usual back button and add my own, but how to make it's shape like usual's? – SentineL Nov 22 '11 at 06:54
for that you need to add custom button having that shaped image i guess...[[UIBarButtonItem alloc] initWithCustomView:customButton]; – Mihir Mehta Nov 22 '11 at 06:59
that's a little barbarian's code, but i guess, there is no other solution... So, let us be a barbarian for a while :) Thanks for responce anyway. – SentineL Nov 22 '11 at 07:07

score 2 · Answer 4 · answered Oct 19 '13 at 18:08

If you're doing this all over the place like I am, you're better off implementing Anil's solution as a category:

@interface UIViewController (CustomBackButton)

- (void) setCustomBackButton;
- (void) back;

@end

@implementation UIViewController (CustomBackButton)

- (void) setCustomBackButton
{
    UIImage *buttonImage = [UIImage imageNamed:@"back.png"];
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setImage:buttonImage forState:UIControlStateNormal];
    button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
    [button addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];
    UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
    self.navigationItem.leftBarButtonItem = customBarItem;
}

- (void) back
{
    [self.navigationController popViewControllerAnimated:YES];
}

@end

score 1 · Answer 5 · edited Apr 08 '14 at 09:28

1

More simply:

UIBarButtonItem *barBtnItem = 
  [[UIBarButtonItem alloc]initWithTitle:@"Indietro"
                                  style:UIBarButtonItemStyleBordered
                                 target:self
                                 action:@selector(pop)];
[barBtnItem setTintColor:[UIColor whiteColor]];
self.navigationItem.leftBarButtonItem = barBtnItem;

edited Apr 08 '14 at 09:28

Alex Cio

6,014
5
44
74

answered Feb 06 '14 at 00:21

gdm

7,647
3
41
71

score 0 · Answer 6 · answered Jun 16 '14 at 07:40

Suppose you have two controllers - Controller1 and Controller2. Controller2 is pushed from Controller1. So before pushing the Controller2 on the navigationController from Controller1

Controller2 *controller2 = [[[Controller2 alloc]  init]autorelease];
self.navigationItem.hidesBackButton = YES;

Now, in the viewDidLoad: method of Controller2, add the following snippet

UIBarButtonItem *backBarButtonItem =[[[UIBarButtonItem alloc]initWithTitle:@"Back" style:UIBarButtonItemStyleBordered target:self action:@selector(goBackToAllPets:)]autorelease];
self.navigationItem.leftBarButtonItem = backBarButtonItem;

and in the backButtonClicked method, you can perform the checks you want to.

Custom back button on navigation bar

6 Answers6

Linked