How to add the borders to the UIBarButtonItem

Question

I want to have the following look of the UIBarButtonItem:

enter image description here

(save it because it has the same color as StackOverflow background so you're unable to see it right here)

How can I add the borders like in the first image to the UIBarButtonItem? Is it possible without drawing it by myself?

Thanks in advance.

When i was in the same situation i use segment control with the image to show boarder. — Jageen, Dec 12 '14 at 11:04
@Jageen Is there any more elegant solution to do it? I am unable to create segmented control with one element btw — FrozenHeart, Dec 12 '14 at 11:09
Check this answer https://stackoverflow.com/a/61143130/6108739 — Vladyslav Panchenko, Apr 10 '20 at 15:06

Kampai · Accepted Answer · 2014-12-12T12:46:07.260

One more solution is that create UIButton object and play with it's layer property.

I have done some basic setup which looks like blue image as shown in question:

enter image description here

Add below code in viewDidLoad() method, also include <QuartzCore/QuartzCore.h> framework.

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setFrame:CGRectMake(0, 0, 50, 40)];
[button setImage:[UIImage imageNamed:@"settings.png"] forState:UIControlStateNormal];
button.layer.borderWidth = 1.0f;
button.layer.borderColor = [UIColor lightGrayColor].CGColor;
button.layer.cornerRadius = 5.0f;

button.layer.shadowColor = [UIColor lightGrayColor].CGColor;
button.layer.shadowRadius = 4.0f;
button.layer.shadowOpacity = .9;
button.layer.shadowOffset = CGSizeZero;
button.layer.masksToBounds = NO;


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

self.navigationItem.leftBarButtonItem = leftItem;

Add more gradient effects

I did found one git help YIInnerShadowView have a look, it's very useful.

I have use these classes to make gradient and shadow looks like blue image. Able to get much similarity with that image. You can have do more customisation on these classes to get desire accuracy.

enter image description here

Add this library to project, import #import "YIInnerShadowView.h" and add code to viewDidLoad()

YIInnerShadowView *innerView = [[YIInnerShadowView alloc] initWithFrame:CGRectMake(0, 0, 50, 40)];
innerView.shadowRadius = 1.5;
innerView.cornerRadius = 5;
innerView.shadowMask = YIInnerShadowMaskAll;

innerView.layer.borderColor = [UIColor colorWithRed:0.3843 green:0.6235 blue:0.8156 alpha:1.0].CGColor;
innerView.layer.borderWidth = 1.0;

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setFrame:CGRectMake(0, 0, 50, 40)];
[button setImage:[UIImage imageNamed:@"settings.png"] forState:UIControlStateNormal];
[innerView addSubview:button];

UIBarButtonItem *leftItem = [[UIBarButtonItem alloc] initWithCustomView:innerView];
self.navigationItem.leftBarButtonItem = leftItem;

Also have done little modification in YIInnerShadowLayer.m class:

- (id)init
{
    self = [super init];
    if (self) {

        self.masksToBounds = YES;
        self.needsDisplayOnBoundsChange = YES;
        self.shouldRasterize = YES;

        // Standard shadow stuff
        [self setShadowColor:[[UIColor colorWithWhite:0 alpha:1] CGColor]];
        [self setShadowOffset:CGSizeMake(0.0f, 1.0f)];
        [self setShadowOpacity:1.0f];
        [self setShadowRadius:5];

        // Causes the inner region in this example to NOT be filled.
        [self setFillRule:kCAFillRuleEvenOdd];

        self.shadowMask = YIInnerShadowMaskAll;

    }
    return self;
}

Not sure. But looking at `UIBarButtonItem` properties in Nib, it's not gives us more customisation for it. So it is better to go with programatically. — Kampai, Dec 12 '14 at 11:27
This one is the right way to do it. I am afraid you cannot do it via Interface Builder. You just simply have to put it in you `-(void)viewDidLoad` just after `[super viewDidLoad];` & you are good to go. Just add `#import ` in the file you are using this solution. — Anon, Dec 12 '14 at 11:29
Am I able to do it via Interface Builder? why not? User runtime defined attributes? — Injectios, Dec 12 '14 at 11:42
Thanks for the answer, but unfortunately it gives the different result -- http://i.imgur.com/agIcTOK.png As you see, there's no shadow and it doesn't look like in the first image — FrozenHeart, Dec 12 '14 at 11:52
Here you need to add gradient to button for exactly same visual effect. Let me try and i'll keep you update. — Kampai, Dec 12 '14 at 11:55
@FrozenHeart I tried as much as possible to make it similar with your one. Check edited answer. — Kampai, Dec 12 '14 at 12:47
Thanks a lot! Can you give me your Skype, btw? I want to share my new questions on StackOverflow with you — FrozenHeart, Dec 12 '14 at 13:28
Check this answer https://stackoverflow.com/a/61143130/6108739 — Vladyslav Panchenko, Apr 10 '20 at 15:06

How to add the borders to the UIBarButtonItem

1 Answers1

Add more gradient effects