Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Customization of UINavigationBar and the back button

Tags:

ios

iphone

ipad

I followed the tutorial below to customize the UINavigationBar.

http://foobarpig.com/iphone/uinavigationbar-with-solid-color-or-image-background.html

I applied a background image in the UINavigationBar, however, I do not know how to customize the back button. At the moment, the default back button does not suits the look & feel of the customized UINavigationBar.

Please teach me how to change the background color or image of the default back button. Thank you.

enter image description here

like image 326
user403015 Avatar asked Aug 15 '11 15:08

user403015


People also ask

How do I customize my navigation bar?

From Settings, tap Display, and then tap Navigation bar. Make sure Buttons is selected, and then you can choose your desired button setup at the bottom of the screen. Note: This option will also affect the location you swipe when using Swipe gestures.

How do I add a back button to my storyboard?

Storyboard. You can also set this in the Storyboard. Select UINavigationBar and select the Attributes Inspector tab. Then you can change those two images under Back and Back Mask attributes.

How do I change the navigation bar on my Iphone?

A user changes the navigation bar's style, or UIBarStyle , by tapping the “Style” button to the left of the main page. This button opens an action sheet where users can change the background's appearance to default, black-opaque, or black- translucent.


2 Answers

I've written the following categories to customize the back button:

UIBarButtonItem+StyledButton.h

@interface UIBarButtonItem (StyledButton)
+ (UIBarButtonItem *)styledBackBarButtonItemWithTarget:(id)target selector:(SEL)selector;
+ (UIBarButtonItem *)styledCancelBarButtonItemWithTarget:(id)target selector:(SEL)selector;
+ (UIBarButtonItem *)styledSubmitBarButtonItemWithTitle:(NSString *)title target:(id)target selector:(SEL)selector;
@end

UIBarButtonItem+StyledButton.m

@implementation UIBarButtonItem (StyledButton)

+ (UIBarButtonItem *)styledBackBarButtonItemWithTarget:(id)target selector:(SEL)selector;
{
   UIImage *image = [UIImage imageNamed:@"button_back"];
   image = [image stretchableImageWithLeftCapWidth:20.0f topCapHeight:20.0f];

   NSString *title = NSLocalizedString(@"Back", nil);
   UIFont *font = [UIFont boldSystemFontOfSize:12.0f];

   UIButton *button = [UIButton styledButtonWithBackgroundImage:image font:font title:title target:target selector:selector];
   button.titleLabel.textColor = [UIColor blackColor];

   CGSize textSize = [title sizeWithFont:font];
   CGFloat margin = (button.frame.size.height - textSize.height) / 2;
   CGFloat marginRight = 7.0f;
   CGFloat marginLeft = button.frame.size.width - textSize.width - marginRight;
   [button setTitleEdgeInsets:UIEdgeInsetsMake(margin, marginLeft, margin, marginRight)]; 
   [button setTitleColor:[UIColor colorWithRed:53.0f/255.0f green:77.0f/255.0f blue:99.0f/255.0f alpha:1.0f] forState:UIControlStateNormal];   

   return [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];
}

+ (UIBarButtonItem *)styledCancelBarButtonItemWithTarget:(id)target selector:(SEL)selector;
{
   UIImage *image = [UIImage imageNamed:@"button_square"];
   image = [image stretchableImageWithLeftCapWidth:20.0f topCapHeight:20.0f];

   NSString *title = NSLocalizedString(@"Cancel", nil);
   UIFont *font = [UIFont boldSystemFontOfSize:12.0f];

   UIButton *button = [UIButton styledButtonWithBackgroundImage:image font:font title:title target:target selector:selector];   
   button.titleLabel.textColor = [UIColor blackColor];   
   [button setTitleColor:[UIColor colorWithRed:53.0f/255.0f green:77.0f/255.0f blue:99.0f/255.0f alpha:1.0f] forState:UIControlStateNormal];   

   return [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];
}

+ (UIBarButtonItem *)styledSubmitBarButtonItemWithTitle:(NSString *)title target:(id)target selector:(SEL)selector;
{
   UIImage *image = [UIImage imageNamed:@"button_submit"];
   image = [image stretchableImageWithLeftCapWidth:20.0f topCapHeight:20.0f];

   UIFont *font = [UIFont boldSystemFontOfSize:12.0f];

   UIButton *button = [UIButton styledButtonWithBackgroundImage:image font:font title:title target:target selector:selector];
   button.titleLabel.textColor = [UIColor whiteColor];
   [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];   

   return [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];
}

UIButton+StyledButton.h

@interface UIButton (UIButton_StyledButton)
+ (UIButton *)styledButtonWithBackgroundImage:(UIImage *)image font:(UIFont *)font title:(NSString *)title target:(id)target selector:(SEL)selector;
@end

UIButton+StyledButton.m

@implementation UIButton (UIButton_StyledButton)

+ (UIButton *)styledButtonWithBackgroundImage:(UIImage *)image font:(UIFont *)font title:(NSString *)title target:(id)target selector:(SEL)selector
{
   CGSize textSize = [title sizeWithFont:font];
   CGSize buttonSize = CGSizeMake(textSize.width + 20.0f, image.size.width);

   UIButton *button = [[[UIButton alloc] initWithFrame:CGRectMake(0.0f, 0.0f, buttonSize.width, buttonSize.height)] autorelease];
   [button addTarget:target action:selector forControlEvents:UIControlEventTouchUpInside];
   [button setBackgroundImage:image forState:UIControlStateNormal];
   [button setTitle:title forState:UIControlStateNormal];
   [button.titleLabel setFont:font];

   return button;
}

@end


It's easy to use, e.g.:
- (void)viewDidLoad
{
   [super viewDidLoad];

   self.navigationItem.leftBarButtonItem = [UIBarButtonItem styledBackBarButtonItemWithTarget:self selector:@selector(dismissModalViewController)];
   self.navigationItem.rightBarButtonItem = [UIBarButtonItem styledSubmitBarButtonItemWithTitle:NSLocalizedString(@"Done", nil) target:self selector:@selector(doneButtonTouched:)];
}


The above code is from a project that's still work-in-progress, so it could be cleaned up a bit, but it works as supposed to. Use images without text as buttons and make sure they're stretchable (i.e. don't make the images too small and be careful with gradients). The image of the back button in the following example is only 31 x 30 pixels, but it's stretched to make the text fit.

Some examples of the results:

Back button

enter image description here

Cancel / Done buttons

enter image description here

like image 91
Wolfgang Schreurs Avatar answered Sep 19 '22 17:09

Wolfgang Schreurs


I have used this code a few times:

- (void)viewDidLoad {
    [super viewDidLoad];

    // Set the custom back button
    UIImage *buttonImage = [UIImage imageNamed:@"back_button.png"];

    //create the button and assign the image
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setImage:buttonImage forState:UIControlStateNormal];

    //set the frame of the button to the size of the image (see note below)
    button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);

    [button addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];

    //create a UIBarButtonItem with the button as a custom view
    UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
    self.navigationItem.leftBarButtonItem = customBarItem;

 // Cleanup
 [customBarItem release];
}

-(void)back {
    // Tell the controller to go back
    [self.navigationController popViewControllerAnimated:YES];
}

From this website. Hope it helps!

like image 24
Nicolas S Avatar answered Sep 19 '22 17:09

Nicolas S