How to make a custom UIBarButton for Left Bar Button for BackBarButton

Question

I am trying to customize UI of an application for iOS 7. I want exactly BackBarButton of iOS 7 but with different color for both arrow and title and different font for title. This is iOS 7 back button.

I tried to customize it with following code

    UIImage *backButtonImage = [UIImage imageNamed:@"back.png"];
    UIButton *customBackButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [customBackButton addTarget:self action:@selector(backButtonPressed) forControlEvents:UIControlEventTouchUpInside];
    [customBackButton setBackgroundImage:backButtonImage forState:UIControlStateNormal];
    [customBackButton setFrame:CGRectMake(0, 0, 30, 30)];       
    backButton = [[UIBarButtonItem alloc] initWithCustomView:customBackButton];
    [backButton setAction:@selector(backButtonPressed)];
    UIBarButtonItem * backButton = [[UIBarButtonItem alloc] initWithCustomView:customBackButton];

It seemed like this:

There is two problem with above Image.

First it is not aligned to left(iOS back button sticked to the left).

Second it doesn't have title of previous page.

I just added title attribute to custom button.

    [customBackButton setTitle:@"title" forState:UIControlStateNormal];

But it was like this:

How can I fix the problems(stick to left and title)?

Answer 1

I just found out how It is possible

I wrote following code and it perfectly worked!

UIBarButtonItem * backButton = [UIBarButtonItem new];
UIView * backButtonView = [UIView new];
[backButtonView setFrame:CGRectMake(0, 0, 90, 32)];

UIImageView *backButtonImage = [UIImageView new];
[backButtonImage setImage:[UIImage imageNamed:@"Setting/back.png"]];
[backButtonImage setFrame:CGRectMake(-15, 0, 30, 30)];

UILabel * backButtonLabel = [UILabel new];
[backButtonLabel setFrame:CGRectMake(8, 0, backButtonView.frame.size.width, 30)];
[backButtonLabel setBackgroundColor:[UIColor clearColor]];
[backButtonLabel setTextColor:[UIColor whiteColor]];
[backButtonLabel setTextAlignment:NSTextAlignmentLeft];
[backButtonLabel setFont:[UIFont fontWithName:@"HelveticaNeue" size:18]];
[backButtonLabel setText:title];

UIButton *customBackButton = [UIButton buttonWithType:UIButtonTypeCustom];
[customBackButton addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
[customBackButton setFrame:CGRectMake(0, 0, 90, 30)];

[backButtonView addSubview:customBackButton];
[backButtonView addSubview:backButtonImage];
[backButtonView addSubview:backButtonLabel];

backButton = [[UIBarButtonItem alloc] initWithCustomView:backButtonView];
[backButton setAction:action];
[self.navigationItem setLeftBarButtonItem:backButton animated:YES];

Answer 2

For this, you need to have a custom image with arrow & title. if you want to customise the title, you can just use below code>

self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"My Title" style:UIBarButtonItemStylePlain target:nil action:nil];

But if you want it to set for an image, you need an image with having the back button to the left of the image.

Image:

2x Image:

See the images in editor, you can notice that image size is 70x32 and the arrow is more towards left end. You can have image with text also & use it.

Hope that helps.