Remove back arrow in iOS7

Question

enter image description here

I want to incorporate a custom back button - I'm able to get the above result using

self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back-btn"] style:UIBarButtonItemStylePlain target:nil action:nil];

but how do you remove the native blue button?

score 13 · Answer 1 · edited Nov 22 '14 at 08:00

13

Use the below code to hide the back arrow:

self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back-btn"]
                                                                         style:UIBarButtonItemStylePlain
                                                                        target:nil
                                                                        action:nil];

if ([UINavigationBar instancesRespondToSelector:@selector(setBackIndicatorImage:)]) {
    [[UINavigationBar appearance] setBackIndicatorImage:[[UIImage alloc] init]];
    [[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[[UIImage alloc] init]];
}

edited Nov 22 '14 at 08:00

Chris Nolet

8,714
7
67
92

answered Dec 12 '13 at 04:50

manujmv

6,450
1
22
35

That removes all the arrows, but adds the "Back" text. – daihovey Dec 12 '13 at 05:04
if you added the backbarbuttonitem, then it will not show any "Back" text – manujmv Dec 12 '13 at 05:10

score 9 · Answer 2 · answered Nov 14 '14 at 22:06

In iOS7+ you can use navigationBar's backIndicatorImage and backIndicatorTransitionMaskImage to achieve the custom arrow that you want. Swift code below:

self.navigationController?.navigationBar.backIndicatorImage = UIImage(named:"button-backArrow18x15")
self.navigationController?.navigationBar.backIndicatorTransitionMaskImage = UIImage(named:"button-backArrowMask18x15")

If you want to hide the "back" text you can set the title of the previous view to be an single space " " or use a custom UIBarButtonItem that doesn't have a title.

You probably need to use `UIImage(named: "back-arrow")?.withRenderingMode(.alwaysOriginal)` to render the original image. — Honghao Z, Jul 20 '17 at 17:55

Bhumeshwer katre · Answer 3 · 2013-12-12T05:31:13.750

4

You can hide backbutton

 self.navigationItem.hidesBackButton=YES;

To create custom leftbarbutton you can use this:

UIButton* someButton = [UIButton buttonWithType:UIButtonTypeCustom];
[someButton setFrame:frame];
[someButton setBackgroundImage:@"youArroImageName" forState:UIControlStateNormal];
[someButton addTarget:self action:@selector(backButtonAction:) forControlEvents:UIControlEventTouchUpInside];
[someButton setShowsTouchWhenHighlighted:YES];
UIBarButtonItem* someBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:someButton];
[self.navigationItem setLeftBarButtonItem:someBarButtonItem];

edited Dec 12 '13 at 05:31

answered Dec 12 '13 at 04:40

Bhumeshwer katre

4,671
2
19
29

That hides it completely, I want to show the custom white arrow. – daihovey Dec 12 '13 at 05:02
For that you have to create Custon LeftBarButton item. And set as left bar button item. – Bhumeshwer katre Dec 12 '13 at 05:05
I addded added code as well to create custom leftebarbuttonitem. – Bhumeshwer katre Dec 12 '13 at 05:09

Dhaval Bhadania · Answer 4 · 2013-12-12T05:10:14.063

Check this one:

    UIImage *faceImage = [UIImage imageNamed:@"back_arrow.png"];
    UIButton *face = [UIButton buttonWithType:UIButtonTypeCustom];
    face.bounds = CGRectMake( 10, 0, faceImage.size.width, faceImage.size.height );
    [face addTarget:self action:@selector(handleBack:) forControlEvents:UIControlEventTouchUpInside];
    [face setImage:faceImage forState:UIControlStateNormal];
    UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithCustomView:face];
    self.navigationItem.leftBarButtonItem = backButton;
    [self.navigationItem setHidesBackButton:YES animated:YES];
    [self.navigationItem setBackBarButtonItem:nil];


  -(IBAction)handleBack:(id)sender
  {
     //    [self dismissViewControllerAnimated:YES completion:nil];
     [self.navigationController popViewControllerAnimated:YES];
  }

@daidai i taken as customizeview so you can set it frame or bound also but in your code we didn't set it. — Dhaval Bhadania, Dec 12 '13 at 05:15

score 3 · Accepted Answer · answered Dec 12 '13 at 05:13

3

Thanks to all the answerers - found a simpler way of doing it...

self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back-btn"] style:UIBarButtonItemStylePlain target:self action:@selector(backButtonAction:)];
self.navigationItem.leftBarButtonItem.tintColor = [UIColor whiteColor];

[self.navigationItem setHidesBackButton:YES animated:NO];
[self.navigationItem setBackBarButtonItem:nil];

-(void) backButtonAction:(id)sender
{
    [self.navigationController popViewControllerAnimated:YES];
}

answered Dec 12 '13 at 05:13

daihovey

3,485
13
66
110

6

It's worth noting you'll lose your pop swipe gesture with this method – Jayson Lane Aug 22 '14 at 16:09
It's also worth noting that this is doing something completely different. You are setting the back button from the top controller, rather than the controller where it is actually going back to. You would have to do this for any controller that was on top... – Daniel K Jun 08 '16 at 19:52

score 2 · Answer 6 · answered May 09 '18 at 16:59

2

Swift 4 (if you just want to hide it)

let mask = UIImage()
navigationController?.navigationBar.backIndicatorImage = mask
navigationController?.navigationBar.backIndicatorTransitionMaskImage = mask

answered May 09 '18 at 16:59

Aggressor

13,323
24
103
182

That does work great as long as iOS13+ `UINavigationBarAppearance` is not used for styling, which immediately reverts the workaround. Unfortunately I haven't found a way around that and I did try various approaches. – Kamil.S Aug 03 '22 at 09:13

score 0 · Answer 7 · answered Dec 12 '13 at 05:06

Why can't you try with the Custom UIButton :

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    [btn setFrame:CGRectMake(0.0f, 0.0f, 25.0f, 40.0f)];
    [btn addTarget:self action:@selector(buttonEN:) forControlEvents:UIControlEventTouchUpInside];
    [btn setImage:[UIImage imageNamed:@"back-btn"] forState:UIControlStateNormal];
    UIBarButtonItem *backBtn = [[UIBarButtonItem alloc] initWithCustomView:btn];
    self.navigationItem.backBarButtonItem = backBtn;

score 0 · Answer 8 · edited May 23 '17 at 12:17

I just faced the exact same problem, here's what I ended up doing:

// First set the back button text to an empty string
viewController.navigationItem.backBarButtonItem = 
     [[UIBarButtonItem alloc] initWithTitle:@"" 
          style:UIBarButtonItemStylePlain 
          target:nil 
          action:nil];

// Set the back-indicator image to the custom image (scaled to 20x20)
UIImage *img = [MyUtils imageWithImage:[UIImage imageNamed:@"back"] scaledToSize:CGSizeMake(20, 20)];
[[UINavigationBar appearance] setBackIndicatorImage:img];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:img];

// Set the tint color to WHITE
[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];

Here's the image-scaling method:

+ (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {
    UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
    [image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

Credit for the scaling method above goes to Paul Lynch on this SO question: (The simplest way to resize an UIImage?)

Remove back arrow in iOS7

8 Answers8

Linked

Related