Custom back button in UINavigationController - iphone

For an application I'm developing, I need to display a custom back button in a navigation bar. I have the button asset as a PNG image, and I'm writing this code:
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
backButton.frame = CGRectMake(0, 0, 79, 29.0);
[backButton setImage:[UIImage imageNamed:#"button_back.png"] forState:UIControlStateNormal];
self.navigationItem.backBarButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:backButton] autorelease];
}
When I push this view controller, the custom button does not show up, and instead I get the standard back button with the title of this view controller inside.
Things I already tried:
Doubled check that the button backButton is created properly, by adding it to the view hierarchy. It displays properly.
In the same method, changed the title property of the navigationItem and confirmed that it changes (as expected) the content of my back button.
Can anyone spot what I'm doing wrong? Did anyone succeed in using a custom image as the back button on with a UINavigationController?

Starting with iOS 5, this is simple:
[[UIBarButtonItem appearance]
setBackButtonBackgroundImage:[UIImage imageNamed:#"back_button.png"]
forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
You can place that in your app delegate and it will set the background image to all back buttons in the app (for that control state and bar metrics, of course).

I'm reposting my solution from https://stackoverflow.com/a/16831482/171933:
I create a simple category on UIViewController:
UIViewController+ImageBackButton.h
#import <UIKit/UIKit.h>
#interface UIViewController (ImageBackButton)
- (void)setUpImageBackButton;
#end
UIViewController+ImageBackButton.m
#import "UIViewController+ImageBackButton.h"
#implementation UIViewController (ImageBackButton)
- (void)setUpImageBackButton
{
UIButton *backButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 34, 26)];
[backButton setBackgroundImage:[UIImage imageNamed:#"back_arrow.png"] forState:UIControlStateNormal];
UIBarButtonItem *barBackButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];
[backButton addTarget:self action:#selector(popCurrentViewController) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem = barBackButtonItem;
self.navigationItem.hidesBackButton = YES;
}
- (void)popCurrentViewController
{
[self.navigationController popViewControllerAnimated:YES];
}
#end
Now all you have to do is #import UIViewController+ImageBackButton.h in either all of your view controllers or in a custom base view controller class that your other view controllers inherit from and implement the viewWillAppear: method:
- (void)viewWillAppear:(BOOL)animated
{
[self setUpImageBackButton];
}
That's all. Now you have an image back button everywhere. Without a border. Enjoy!

The backBarButtonItem property works as intended, but it will always add its standard button shape and color based on the navigation bar tint color.
You can customize the text, but not replace the image.
One workaround, as Andrew Pouliot suggested, is to use leftBarButtonItem instead, but I stuck to the standard button instead.

Isn't the simplest solution just to design it from your storyboard with whatever image or colors you want, and just drag a new action to your controller?
Swift Code
#IBAction func backButton(sender: AnyObject) {
self.navigationController?.popViewControllerAnimated(true)
}

Confusingly backBarButtonItem is not what you're looking for.
It just controls the title on the back button for the next view controller. What you want is to set the leftBarButtonItem to your custom back button.

Johannes Fahrenkrug's Answer works, but the back image would appear at a very wired position.
Here I found a better way to position the image at the right place:
Make Sure You Have a back image with size 24x24(#1x) , I call it backImage
Execute the following code when your app Launch
UINavigationBar.appearance().barTintColor = nil
UINavigationBar.appearance().backIndicatorImage = backImage
UINavigationBar.appearance().backIndicatorTransitionMaskImage = backImage
UIBarButtonItem.appearance().setBackButtonTitlePositionAdjustment(UIOffsetMake(0, -60), forBarMetrics: .Default)

See this answer here: How to create backBarButtomItem with custom view for a UINavigationController
You just need to set the backBarButtonItem property on the navigationController before pushing the viewController. Setting the backBarButtonItem property in the viewController's viewDidLoad method (for example) doesn't work.

I do not think that ViewController itself should know anything about its back button
According to OOP this is the responsibility of containerViewController in which your view controller is inserted, for example UINavigationController.
Subclass your NavigationController and overload in it superClass method like this:
#implementation STONavigationController
- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated
{
[super pushViewController:viewController animated:animated];
if ([self.viewControllers indexOfObject:viewController] != NSNotFound &&
[self.viewControllers indexOfObject:viewController] > 0){
UIImage *img = [UIImage imageNamed:#"back-1"];
UIButton *backButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, img.size.width * 2, img.size.height * 2)];
[backButton setBackgroundImage:img forState:UIControlStateNormal];
UIBarButtonItem *barBackButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];
[backButton addTarget:self action:#selector(popCurrentViewController) forControlEvents:UIControlEventTouchUpInside];
viewController.navigationItem.leftBarButtonItem = barBackButtonItem;
viewController.navigationItem.hidesBackButton = YES;
}
}
- (void)popCurrentViewController
{
[self popViewControllerAnimated:YES];
}
#end

Simply create a UIBarButtonItem instead of an embedded UIButton in UIBarButtonItem. Works fine!
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"button_back.png"] style:UIBarButtonItemStyleBordered target:nil action:nil];
self.navigationItem.backBarButtonItem = backButton;

As #pgb suggested you can use leftBarButtonItem instead of back button item. And to remove the default back button item set it to nil like follows;
navigationController?.navigationBar.backIndicatorImage = nil
navigationController?.navigationBar.backIndicatorTransitionMaskImage = nil
let button = UIButton.init(type: .custom)
button.imageView?.contentMode = UIViewContentMode.scaleAspectFit
button.setImage(UIImage.init(named: "top_back"), for: UIControlState.normal)
button.frame = CGRect.init(x: 0, y: 0, width: 75, height: 50)
button.addTarget(self, action: #selector(handleBackButton), for: .touchUpInside)
let barButton = UIBarButtonItem.init(customView: button)
self.navigationItem.leftBarButtonItem = barButton

Related

set custom back bar button universally with no title

I want to set custom back bar button for all controllers in the app. I tried using this:
[[UIBarButtonItem appearance]
setBackButtonBackgroundImage:backButtonImage
forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
It sets the image. That's OK. But, what i really want to do is that, i just want a custom button for back bar button which does not contain any title etc. The code above works, but it adds automated titles and resizes the back bar button item. My need is to have a fixed frame, no-title back bar button item for all controllers in the app.
I've resolved it. Just make a category over UIViewController and import it in prefix.pch file. Then write a method: customViewWillAppear: and swizzle it with viewWillAppear method:
+(void)load{
Method viewWillAppear = class_getInstanceMethod(self, #selector(customViewWillAppear:));
Method customViewWillAppear = class_getInstanceMethod(self, #selector(viewWillAppear:));
method_exchangeImplementations(viewWillAppear, customViewWillAppear);
}
Add the above method to that category class. Then implement your customViewWillAppear method like this:
-(void)customViewWillAppear:(BOOL)animated{
[self customViewWillAppear:animated];
if([self.navigationController.viewControllers indexOfObject:self] != 0 && !self.navigationItem.hidesBackButton){
UIBarButtonItem *cancelBarButton = nil;
UIButton* cancelButton = [UIButton buttonWithType:UIButtonTypeCustom];
[cancelButton addTarget:self action:#selector(popViewControllerWithAnimation) forControlEvents:UIControlEventTouchUpInside];
[cancelButton setBackgroundImage:[UIImage imageNamed:#"yourImage.png"] forState:UIControlStateNormal];
[cancelButton sizeButtonToFit];
cancelBarButton = [[UIBarButtonItem alloc] initWithCustomView:cancelButton];
NSMutableArray * leftButtons = [NSMutableArray arrayWithObject:cancelBarButton];
[leftButtons addObjectsFromArray:self.navigationItem.leftBarButtonItems];
[self.navigationItem setLeftBarButtonItem:nil];
[self.navigationItem setLeftBarButtonItems:leftButtons];
}
[self.navigationItem setHidesBackButton:YES];
}
-(void)popViewControllerWithAnimation{
[self.navigationController popViewControllerAnimated:YES];
}
Now, for every controller in your code, you have a custom back button. This took me a lot of time to implement and figure out. Hope it'll help you guys all too.
EDIT:
Please use the following code to support iOS7> back swipe feature;
UIImage *image = [UIImage imageForName:#"some_image"];
navBar.backIndicatorImage = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
navBar.backIndicatorTransitionMaskImage = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
Create a base view controller and add the following code;
- (void)viewDidLoad
{
[super viewDidLoad];
self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:#"" style:UIBarButtonItemStylePlain target:nil action:nil];
}
I've had a similar problem before and I've searched everywhere for a solution.
The only one I've found, which works for your problem was to implement in EVERY view controller a UILeftBarButton which does the popping.
You can change the background image the way you're doing, but if you set the text to nil or empty text (""), you're button just won't show up.
You also can't change the View of the UIBackBarButton, only it's text (so no custom button).
What i did, was set the backbutton title label alpha to zero, using appearance proxy.
My code in ViewDidLoad:
// Set back button image
if ([[self.navigationController viewControllers] objectAtIndex:0] != self) {
UIButton *btnBack = [UIButton buttonWithType:UIButtonTypeCustom];
btnBack.frame = CGRectMake(0,0,38,30);
[btnBack setBackgroundImage:[UIImage imageNamed:#"NavigationBarBackButton"] forState:UIControlStateNormal];
[btnBack addTarget:self.navigationController action:#selector(popViewControllerAnimated:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *leftBtn = [[UIBarButtonItem alloc] initWithCustomView:btnBack];
[self.navigationItem setLeftBarButtonItem:leftBtn];
}
You could write a category like this,
//
// UINavigationItem+BarAditions.h
//
// Created by Satheeshwaran on on 7/5/13.
//
#import <Foundation/Foundation.h>
#interface UINavigationItem (PersonaAddition)
- (void)setCustomBackButton;
#end
//
// UINavigationItem+BarAditions.m
//
// Created by Satheeshwaran on on 7/5/13.
//
#import "UINavigationItem+PersonaAddition.h"
#implementation UINavigationItem (PersonaAddition)
- (void)setCustomBackButton
{
//customize ur back button here.
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
backButton.frame=CGRectMake(0, 0, 60, 30);
[backButton addTarget:target action:#selector(didPressLeftItem:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *barItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];
self.leftBarButtonItem = barItem;
}
and import this category in all ur files and call the setCustomBackButton in all ur classes. This works fine for me, even in iOS 7.
In ViewDidLoad of all ur classes.
- (void)viewDidLoad
{
[super viewDidLoad];
[self.navigationItem setCustomBackButton];
}
try this code:
UIButton *tempbtn = [[UIButton alloc] init];
[tempbtn setImage:[UIImage imageNamed:#"testbtn.png"] forState:UIControlStateNormal];
UIBarButtonItem *temp = [[UIBarButtonItem alloc] initWithCustomView:tempbtn];
self.navigationItem.rightBarButtonItem = temp;

Use Image for backBarButtonItem with NO TEXT

I'm simply trying to set the backBarButtonItem for my navigation controller to this image
instead of the Apple default arrow button whose title is the same as the previous view controller's title. The closest I've gotten so far is the above image stretched horizontally with the title still appearing overlaid. To get that, I used this code in my AppDelegate.
UIImage *backButtonImage = [UIImage imageNamed:#"back-button.png"];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage
forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
How can I get rid of the title (and prevent the button from being stretched)?
When you use appearance, you are setting the background image of the back bar button items of your app. The fact that they have a background image has nothing to do with whether or not there is a title displayed on them. To use a custom bar button item instead of the default back item, look at this question.
In your case, you may want to not use appearance at all and instead create a bar button item as in the link above but use -initWithImage:style:target:action: instead of -initWithTitle:style:target:action:
you can set custom Image of BarbuttonItem like :-
- (void)viewDidLoad
{
UIImage* imageRight = [UIImage imageNamed:#"Home_btn.png"];
CGRect frameimgRight = CGRectMake(100, 100, 50, 30);
RightBtn = [[UIButton alloc] initWithFrame:frameimgRight];
[RightBtn setBackgroundImage:imageRight forState:UIControlStateNormal];
[RightBtn addTarget:self action:#selector(ActionhomeBtn)
forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *btnRight = [[UIBarButtonItem alloc]initWithCustomView:RightBtn];
self.navigationItem.leftBarButtonItem = btnRight;
[super viewDidLoad];
}
Look like:-
Hope its halp's you
I know this method works, and should be called in ViewDidLoad:
UIBarButtonItem *backButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"back-button.png"] style:UIBarButtonItemStyleBordered target:nil action:#selector(methodName)];
which then has to be assigned to the nav bar:
item.rightBarButtonItem = backButtonItem;
and then pushed:
[self.navBar pushNavigationItem:item animated:NO];

Navigation Back Button does not show,how to add back button to UINavigationItem

I add UINavigationBar via Library to view. I also add UINavigationItem to this NavigationBar.
In viewController.m,I added the following code but back button doesn't show.
self.navigationItem.title = #"List";
self.navigationItem.backBarButtonItem.title = #"Back";
Try this:
self.navigationItem.leftItemsSupplementBackButton = YES;
or
navigationItem.leftItemsSupplementBackButton = true
If you customize your navigation controller with UIBarButtonItems the framework removes the back button by default, since it assumes you are customizing the Navigation bar. Use that line to add the back button in again.
self.navigationItem.backBarButtonItem will be shown only after your have pushed another one view to navigation stack, controlled by self.navigationController, if no left button on navigation bar is displayed.
From Apple docs:
When this item is the back item of the navigation bar—when it is the next item below the top item—it may be represented as a back button on the navigation bar. Use this property to specify the back button. The target and action of the back bar button item you set should be nil. The default value is a bar button item displaying the navigation item’s title.
Try this code,
**To hide your default back button use this,**
self.navigationItem.hidesBackButton = YES;
UIImage* image = [UIImage imageNamed:#"back.png"];
CGRect frame = CGRectMake(0, 0, image.size.width, image.size.height);
UIButton* backbtn = [[UIButton alloc] initWithFrame:frame];
[backbtn setBackgroundImage:image forState:UIControlStateNormal];
[backbtn setShowsTouchWhenHighlighted:YES];
[backbtn addTarget:self action:#selector(goBack) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem* backButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backbtn];
[self.navigationItem setLeftBarButtonItem:backButtonItem];
[backButtonItem release];
[backbtn release];
Action Event for back button:
-(IBAction)goBack{
//ur code here
}
Try this code may be it's help to u
UIButton *moreButton1 = [UIButton buttonWithType:UIButtonTypeCustom];
[moreButton1 setImage:[UIImage imageNamed:#"left_arrow.png"] forState:UIControlStateNormal];
//[moreButton setImage:[UIImage imageNamed:#"Button_OtherInfo_Active.png"] forState:UIControlStateHighlighted];
[moreButton1 addTarget:self action:#selector(backClick) forControlEvents:UIControlEventTouchUpInside];
[moreButton1 setFrame:CGRectMake(0, 0, 50,30)];
self.navigationItem.leftBarButtonItem=[[UIBarButtonItem alloc] initWithCustomView:moreButton1];
put this code in viewDidLoad
-(void)backClick
{
[self.navigationController popViewControllerAnimated:YES];
}
This is a bit old, but in case someone is looking for an answer...
The back button shows up automatically, but the current view (not the one being pushed) needs to have a title. eg:
- (void)viewDidLoad
{
self.title = #"Home";
[super viewDidLoad];
}
Then, when you push a view onto the view stack with
[self.navigationController pushViewController:aViewController animated:YES];
the back button shows up. No need to mess with UINavigationItem or UINavigationBar. Use those to customize the navigation bar. Take a look at the example project called NavBar, part of xcode.

Image on Navigation Bar Back Button

In our application I use Left and right button on navigation bar.
I want a image on back (left)button.If i use segment for that then
necessary to define a action for back button.
Please advice me for any method.
Yeah, if you use a Bar Button item you can go to Bar Button Item Attributes in Interface Builder and there should an Image option you can select.
The easiest way we found to replace the back button with our own goes like this.
Add a back button in the nib file outside your view. customize it as you wish.
connect it as an IBOutlet. Let's call it btnBack.
in ViewDidLoad do this:
UIBarButtonItem *back = [[UIBarButtonItem alloc] initWithCustomView:btnBack];
[self.navigationItem setLeftBarButtonItem:back animated:YES];
connect an action to your backBtn like this:
- (IBAction)Back:(id)sender {
[self.navigationController popViewControllerAnimated:YES];
}
And thats it you got yourself a customized back button :)
You can do it by subclassing UINavigationBar, then create a method like this :
+ (UIBarButtonItem *)barButtonWithImage:(NSString *)imageName target:(id)target action:(SEL)action {
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
UIImage *titleImage = [UIImage imageNamed:imageName];
[button setImage:titleImage forState:UIControlStateNormal];
[button sizeToFit];
UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:button];
return item;
}
And then add it to your navigation bar like this :
[self.navigationItem setLeftBarButtonItem:[TFNavigationBar barButtonWithImage:#"rp_settings.png" target:self action:#selector(showSettings)]];
p.s: I prefer to use singletons, that's why that it is.
If you want to simply replace your back button with an image through out your app..
[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:#"back_button"]];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:#"back_button"]];
Or for specific navigation bars specify your navBar instead of '[UINavigationBar appearance]'. This works perfectly.

How can I show a custom image in navigation bar back button instead of default buttons which are shown by nav bar itself

On navigating to any view in an app which has navigation controller implemented, it shows a back button to go to the previous view. Is there a way I can use custom image instead of the default one?
Yes you can.
You can control how the standard back button will look when another view controller is pushed on top of a given view controller by setting its navigation item's back bar button item (you can customize the title or use an image):
UIBarButtonItem *btn = [[UIBarButtonItem alloc] initWithTitle:#"Back" style:UIBarButtonItemStyleBordered target:nil action:nil];
self.navigationItem.backBarButtonItem = btn;
[btn release];
UIBarButtonItem *btn = [[UIBarButtonItem alloc] initWithImage:yourImage style:UIBarButtonItemStyleBordered target:nil action:nil];
self.navigationItem.backBarButtonItem = btn;
[btn release];
Note: you configure this in a "parent" view controller that may have other view controller(s) pushed on top of it. The configuration is done in the "parent" and the appearance of the back button is changed when some view controller is on top. Tapping the back button brings you back as expected.
You can also create your own UIBarButtonItem and set it as the leftButtonItem on the navigation bar on the current view controller:
UIBarButtonItem *btn = [[UIBarButtonItem alloc] initWithImage:yourImage style:UIBarButtonItemStyleBordered target:self action:#selector(yourMethod:)];
self.navigationItem.leftBarButtonItem = btn;
[btn release];
Note: in this case, the back / left bar button item is changed for the current view controller (when it is on top). You must implement the yourMethod: method. If you simply want the button to go back, you have to handle popping the view controller yourself by calling [self.navigationController popViewControllerAnimated:YES];.
I found that none of the solutions actually solved the BACK UIBarButton and also provided its hidden behavior if the view controller is root.
-(void)popViewControllerWithAnimation {
[self.navigationController popViewControllerAnimated:YES];
}
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
if([self.navigationController.viewControllers objectAtIndex:0] != self)
{
UIButton *backButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 26, 26)];
[backButton setImage:[UIImage imageNamed:#"back"] forState:UIControlStateNormal];
[backButton setShowsTouchWhenHighlighted:TRUE];
[backButton addTarget:self action:#selector(popViewControllerWithAnimation) forControlEvents:UIControlEventTouchDown];
UIBarButtonItem *barBackItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];
self.navigationItem.hidesBackButton = TRUE;
self.navigationItem.leftBarButtonItem = barBackItem;
}
}
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).
The right way is to make a category.
#interface UINavigationBar (MyNavigationBar)
-(void)drawRect:(CGRect)rect;
#end
#implementation UINavigationBar (MyNavigationBar)
-(void)drawRect:(CGRect)rect {
UIImage *image = [UIImage imageNamed:#"....."];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];