Ios – Add border in UIBarButtonItem

iosios7uibarbuttonitemuitoolbar

In my app, I have designed a view in the interface builder.
This view has a toolbar, with some UIBarButtonItem in.

My buttons can be custom images, or default button like share, add,…
Now with iOS7, buttons don't have anymore borders. So I'd like to add some.
enter image description here

Here is what i want to do : add borders like the white lines on my screenshot.
What I've tried is to add a UIButton to the toolbar. In my example, I've set my back button size (12×44). I add this button as a IBOutlet property of my view controller, and try to draw a border to it :

CALayer *cancelBorder = [CALayer layer];
[cancelBorder setFrame:CGRectMake(12, 0, 1, 44)];
[backBorder setBackgroundColor:[[UIColor whiteColor] CGColor]];
[backButton.layer addSublayer:cancelBorder];

But it doesn't work. Anyone has a solution?

Best Answer

Adding UIBarButtonItem to toolbar programmatically may solve your problem.

First, create custom button with images, borders, etc. As HereTrix said, you can add border to this button.

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(10, 0, 30, 30);
button.layer.borderColor = [UIColor blueColor].CGColor;
button.layer.borderWidth = 1.0f;
/* any other button customization */

Then, initialize UIBarButtonItem with that custom button and add this item to your toolbar.

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithCustomView:button];
self.toolBar.items = @[backButton];

Related Solutions

Iphone – Customize UIBarbuttonitem with Background Images

Taimur,

I ran into the same problem that you're hitting. Our designer had specified a custom look for the buttons in our app's navigation bar. Here is a utility method that I wrote to generate the UIBarButtonItems that we needed, you should be able to modify it to your needs:

+ (UIBarButtonItem *)createSquareBarButtonItemWithTitle:(NSString *)t target:(id)tgt action:(SEL)a
{
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    // Since the buttons can be any width we use a thin image with a stretchable center point
    UIImage *buttonImage = [[UIImage imageNamed:@"SquareButton.png"] stretchableImageWithLeftCapWidth:5 topCapHeight:0];
    UIImage *buttonPressedImage = [[UIImage imageNamed:@"SquareButton_pressed.png"] stretchableImageWithLeftCapWidth:5 topCapHeight:0];

    [[button titleLabel] setFont:[UIFont boldSystemFontOfSize:12.0]];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
    [button setTitleShadowColor:[UIColor colorWithWhite:1.0 alpha:0.7] forState:UIControlStateNormal];
    [button setTitleShadowColor:[UIColor clearColor] forState:UIControlStateHighlighted];
    [[button titleLabel] setShadowOffset:CGSizeMake(0.0, 1.0)];

    CGRect buttonFrame = [button frame];
    buttonFrame.size.width = [t sizeWithFont:[UIFont boldSystemFontOfSize:12.0]].width + 24.0;
    buttonFrame.size.height = buttonImage.size.height;
    [button setFrame:buttonFrame];

    [button setBackgroundImage:buttonImage forState:UIControlStateNormal];
    [button setBackgroundImage:buttonPressedImage forState:UIControlStateHighlighted];

    [button setTitle:t forState:UIControlStateNormal];

    [button addTarget:tgt action:a forControlEvents:UIControlEventTouchUpInside];

    UIBarButtonItem *buttonItem = [[UIBarButtonItem alloc] initWithCustomView:button];

    return [buttonItem autorelease];
}

Ios – How to show/hide a UIBarButtonItem

Save your button in a strong outlet (let's call it myButton) and do this to add/remove it:

// Get the reference to the current toolbar buttons
NSMutableArray *toolbarButtons = [self.toolbarItems mutableCopy];

// This is how you remove the button from the toolbar and animate it
[toolbarButtons removeObject:self.myButton];
[self setToolbarItems:toolbarButtons animated:YES];

// This is how you add the button to the toolbar and animate it
if (![toolbarButtons containsObject:self.myButton]) {
    // The following line adds the object to the end of the array.  
    // If you want to add the button somewhere else, use the `insertObject:atIndex:` 
    // method instead of the `addObject` method.
    [toolbarButtons addObject:self.myButton];
    [self setToolbarItems:toolbarButtons animated:YES];
}

Because it is stored in the outlet, you will keep a reference to it even when it isn't on the toolbar.

Best Answer

Related Solutions

Iphone – Customize UIBarbuttonitem with Background Images

Ios – How to show/hide a UIBarButtonItem

Related Topic