UINavigationBar Rounded Two Corners

Question

I want to round the top right and top left of the UINavigationBar.

I know that there are functions for changing the views corner radius, but is it possible to do something similar to the standard UINavigationBar?

If you don't know what I'm talking about, check out this:

Thanks!

it's possible to change view corner radiuss, but it will affect all corners! — Guntis Treulands, Apr 13 '12 at 19:34

score 44 · Answer 1 · answered Feb 11 '12 at 19:43

44

the following code works for me (tested on iOS5). The following code rounds the top left/right corners of the main navigation bar. Additionally, it adds a shadow to it:

CALayer *capa = [self.navigationController navigationBar].layer;
[capa setShadowColor: [[UIColor blackColor] CGColor]];
[capa setShadowOpacity:0.85f];
[capa setShadowOffset: CGSizeMake(0.0f, 1.5f)];
[capa setShadowRadius:2.0f];  
[capa setShouldRasterize:YES];


//Round
CGRect bounds = capa.bounds;
bounds.size.height += 10.0f;    //I'm reserving enough room for the shadow
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:bounds 
                                               byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight)
                                                     cornerRadii:CGSizeMake(10.0, 10.0)];

CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = bounds;
maskLayer.path = maskPath.CGPath;

[capa addSublayer:maskLayer];
capa.mask = maskLayer;

answered Feb 11 '12 at 19:43

Joze

668
7
13

@Joze it works like a charm, but my UIButton back stop working...Why? – Juan Munhoes Junior Mar 07 '13 at 15:40
Hi Juan. Maybe the button.frame.origin.y is being masked. Try to change the y coordinate (maybe +2 pixels) and try it. Maybe that's the problem – Joze Mar 13 '13 at 10:33
1

Fantastic answer! This really makes the navigation bar look great. A quick issue that I ran into for others reading: If you get a mach-o linker error, you have to link the quartzcore library in your project settings. Thanks again @Joze! – jonstaff Mar 20 '13 at 22:38
1

Like @jonstaff said, link to the quartzcore.framework file in your project settings, but also put: #import in the .m file wherever you're trying to use this code. – Apollo Jul 15 '13 at 16:08
i wonder why its not working with UIRectCornerBottomLeft | UIRectCornerBottomRight – Syed Ismail Ahamed Feb 14 '17 at 08:57

score 10 · Accepted Answer · answered Nov 20 '10 at 22:44

10

The best way is to override drawRect in UINavigationBar and use a custom image.

answered Nov 20 '10 at 22:44

Kolin Krewinkel

1,376
11
12

-drawRect: doesn't get called in iOS 5 - see http://stackoverflow.com/questions/5575821/custom-nav-bar-styling-ios/6389991#6389991 – Christian Schnorr Apr 20 '12 at 20:33
Thanks for updating this. I should hope everyone nowadays is informed of the UIAppearance protocol though. – Kolin Krewinkel Jul 09 '12 at 03:41

score 0 · Answer 3 · answered Nov 20 '10 at 22:45

0

You might find this helpful. Maybe you could also do some kind of masking with CoreAnim/Image? I'm not very knowledgeable about the Core* family...

http://foobarpig.com/iphone/uinavigationbar-with-solid-color-or-image-background.html

answered Nov 20 '10 at 22:45

Dylan Lukes

935
7
10

UINavigationBar Rounded Two Corners

3 Answers3

Linked