How to add the borders to the UIBarButtonItem

Question

I want to have the following look of the UIBarButtonItem:

And I have this image.

(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.

Answer 1

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:

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.

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;
}