Custom Back Button With Image

Question

What I'd like to do is alter the height of the back button. However, as I understand it, the only option to alter is width. So, I thought I'd create a custom back button with my own, smaller, image. Now I've done this using the viewDidLoad method with the code below:

//Setup navigation bar
        navigationController?.navigationItem.backBarButtonItem = UIBarButtonItem(image:UIImage(named:"back_arrow.png"), style:UIBarButtonItemStyle.Plain, target:nil, action:nil)
        navigationController?.navigationItem.backBarButtonItem!.title = ""

However, the back button remains blue, large, and has the title 'Back'. How can I get this code to work properly? The debugger says it is running, but it is not changing anything.

teradyl · Accepted Answer · 2016-03-21 23:01:52Z

7

I'm going to show you how to do this in the entire app, not just one page.

To change the default image of the back button, put the following in your app delegate didFinishLaunchingWithOptions::

Swift:

let backArrowImage = UIImage(named: "customImage")
let renderedImage = backArrowImage?.imageWithRenderingMode(.AlwaysOriginal)
UINavigationBar.appearance().backIndicatorImage = renderedImage
UINavigationBar.appearance().backIndicatorTransitionMaskImage = renderedImage

Obj-c:"

UIImage *backArrowImage = [UIImage imageNamed:@"customImage"];
UIImage *renderedImage = [backArrowImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
[UINavigationBar appearance].backIndicatorImage = renderedImage;
[UINavigationBar appearance].backIndicatorTransitionMaskImage = renderedImage;

To remove the "Back" text from the button, add this category to your AppDelegate.m file (or your own category):

Not sure how to do this in Swift yet, so here's the Obj-c version:

@implementation UINavigationItem (LuxeCustomization)

/**
 Removes text from all default back buttons so only the arrow or custom image shows up
 */
-(UIBarButtonItem *)backBarButtonItem
{
    return [[UIBarButtonItem alloc] initWithTitle:@"" style:UIBarButtonItemStylePlain target:nil action:nil];
}

@end

answered Mar 21, 2016 at 23:01

teradyl

2,9161 gold badge31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Katherine Jenkins Over a year ago

To remove "Back" button title globally in swift... see stackoverflow.com/a/33707584/6059628

elp · Accepted Answer · 2015-10-06 10:35:21Z

3

For color you have to set the tint color on navBar, also you can set navigationItem.backBarButtonItem to nil and use leftbarButtonItem with custom button image.

edited Oct 6, 2015 at 10:35

elp

8,1037 gold badges65 silver badges124 bronze badges

answered Nov 14, 2014 at 21:36

Puran

9946 silver badges15 bronze badges

2 Comments

steventnorris Over a year ago

Then I lose the stock back functionality of the backBarButton. I just want to change the image of the back bar button, get rid of the title, and retain the back functionality.

Puran Over a year ago

yeah, but you can do that anyway in the left bar button handler [self.navigationController popToRootViewController]

Collectives™ on Stack Overflow

Custom Back Button With Image

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related