CODEWITHSUNDEEP
iosuinavigationbaruibarbuttonitem
SimplyKiwi
SimplyKiwi

Reputation: 12444

Programmatically draw back button with arrow?

Usually when you use a UINavigationController you get a back button that has an arrow on the left side of it. The thing is I am not using a UINavigationController so thats why I am asking. Anyway here is a picture:

enter image description here

So far I have a regular UIBarButtonItem which currently is just square without that arrow on the left side of it.

Is there a way to make a button that has an arrow on the left side like that and add it to my UINavigationBar? I have also looked around and it seems that UIButton type 101 is undocumented and will cause a rejection. I need a solution that will be accepted!

Upvotes: 3

Views: 4061

Answers (3)

Alexey
Alexey

Reputation: 7247

enter image description here

First of all you have to find an image of the back button. I used a nice app called Extractor that extracts all the graphics from iPhone. In iOS7 I managed to retrieve the image called UINavigationBarBackIndicatorDefault and it was in black colour, since I needed a red tint I change the colour to red using Gimp.

Then I created a view that contains an imageView with that arrow, a label with the custom text and on top of the view I have a button with an action. Then I added a simple animation (fading and translation).

The following code simulates the behaviour of the back button including animation.

-(void)viewWillAppear:(BOOL)animated{
        UIImageView *imageView=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"UINavigationBarBackIndicatorDefault"]];
        [imageView setTintColor:[UIColor redColor]];
        UILabel *label=[[UILabel alloc] init];
        [label setTextColor:[UIColor redColor]];
        [label setText:@"Blog"];
        [label sizeToFit];

        int space=6;
        label.frame=CGRectMake(imageView.frame.origin.x+imageView.frame.size.width+space, label.frame.origin.y, label.frame.size.width, label.frame.size.height);
        UIView *view=[[UIView alloc] initWithFrame:CGRectMake(0, 0, label.frame.size.width+imageView.frame.size.width+space, imageView.frame.size.height)];

        view.bounds=CGRectMake(view.bounds.origin.x+8, view.bounds.origin.y-1, view.bounds.size.width, view.bounds.size.height);
        [view addSubview:imageView];
        [view addSubview:label];

        UIButton *button=[[UIButton alloc] initWithFrame:view.frame];
        [button addTarget:self action:@selector(handleBack:) forControlEvents:UIControlEventTouchUpInside];
        [view addSubview:button];

        [UIView animateWithDuration:0.33 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
            label.alpha = 0.0;
            CGRect orig=label.frame;
            label.frame=CGRectMake(label.frame.origin.x+25, label.frame.origin.y, label.frame.size.width, label.frame.size.height);
            label.alpha = 1.0;
            label.frame=orig;
        } completion:nil];

        UIBarButtonItem *backButton =[[UIBarButtonItem alloc] initWithCustomView:view];
}

- (void) handleBack:(id)sender{
}

Upvotes: 1

era
era

Reputation: 535

Btw. if you want to create a button exactly like the back button in navigation controller, take a look at this code..

@implementation UIButton (CustomBackButton)

- (UIButton*)configureForBackButtonWithTitle:(NSString*)title target:(id)target action:(SEL)action
{
// Make the text 6 pixels from above, 8 pixels from the right, and 12 pixels from the left of button's frame.
CGFloat padTRL[3] = {6, 8, 12};

// Text must be put in its own UIView, s.t. it can be positioned to mimic system buttons
UILabel* label = [[UILabel alloc] init];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:12];
label.textColor = [UIColor whiteColor];
label.shadowColor = [UIColor darkGrayColor];
label.shadowOffset = CGSizeMake(0, -1);
label.text = title;
[label sizeToFit];

UIImage* norm = [[UIImage imageNamed:@"backBarButton.png"] stretchableImageWithLeftCapWidth:13 topCapHeight:0];
UIImage* click = [[UIImage imageNamed:@"backBarButtonHover.png"] stretchableImageWithLeftCapWidth:13 topCapHeight:0];
[self setBackgroundImage:norm forState:UIControlStateNormal];
[self setBackgroundImage:click forState:UIControlStateHighlighted];
[self addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];

// Calculate dimensionss
CGSize labelSize = label.frame.size;
CGFloat controlWidth = labelSize.width+padTRL[1]+padTRL[2];
controlWidth = controlWidth>=norm.size.width?controlWidth:norm.size.width;

// Assemble and size the views
self.frame = CGRectMake(0, 0, controlWidth, 30);
[self addSubview:label];
label.frame = CGRectMake(padTRL[2], padTRL[0], labelSize.width, labelSize.height);
return self
}
@end

and you do not need to use the whole image. just the pointy part would do.. it stretches the image according to the length of the title..

Upvotes: 2

woz
woz

Reputation: 10994

You can give the button a background image that makes it look like the native angled button:

testButton = [[UIButton alloc] initWithFrame:CGRectMake(80, 30, 160, 44)];
[testButton setTitle:@"Test Button" forState:UIControlStateNormal];
UIImage *buttonImage = [[UIImage imageNamed:@"angledButton"]  resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 16)];
[testButton addTarget:self action:@selector(buttonPressed:) forControlEvents: UIControlEventTouchUpInside];
[testButton setBackgroundImage:buttonImage forState:UIControlStateNormal];

You might need to tweak that, but it's in the right direction I believe.

Upvotes: 3

Related Questions