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.

score 7 · Answer 1 · answered Mar 21 '16 at 23:01

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

To remove "Back" button title globally in swift... see http://stackoverflow.com/a/33707584/6059628 — Katherine Jenkins, May 14 '16 at 09:15

score 3 · Accepted Answer · edited Oct 06 '15 at 10:35

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 06 '15 at 10:35

elp

8,021
7
61
120

answered Nov 14 '14 at 21:36

Puran

984
6
15

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. – steventnorris Nov 14 '14 at 21:52
yeah, but you can do that anyway in the left bar button handler [self.navigationController popToRootViewController] – Puran Nov 15 '14 at 02:36

Custom Back Button With Image

2 Answers2

Linked