UINavigationBar with two rounded corners

Question

I have seen this answer

https://stackoverflow.com/a/9243472/563381

And while it works well visual as soon as you set the mask on the Navigation bar's layer it no longer responds to touches... So the back button that appears on the bar can't be clicked. Any solution to cause touches to go through a CALAyer? I didnt think CALayer's blocked touches or that a mask would ever block touches.

Giuseppe Garassino · Accepted Answer · 2012-04-05T16:52:57.563

1

Well, I really don't know why CALayer blocks touches and this sounds odd to me...

The way I round corners of UINavigationBar consists in putting 2 UIImageView (10x10 pixels) in the corners and add 2 images to them. These images work as a mask, without blocking touches. If you use antialiasing to draw your images, the look is perfect.

enter image description here

edited Apr 05 '12 at 16:52

answered Apr 05 '12 at 16:40

Giuseppe Garassino

2,272
1
27
47

I thought it very strange that setting a layer mask would have any effect on touches too. Are you doing this in the drawrect as a custom nav bar? or are you just adding them as subviews to the nav bar? – Ryan Poolos Apr 05 '12 at 17:27
The two UIImageViews are on top (front) of my NIB file. So they are not connected to my UINavigationBar, but "above" it. – Giuseppe Garassino Apr 05 '12 at 17:46
I added them as subviews and it worked alright. Only problem with that is its messy with two pngs that have to match the color to the navbar exactly which is proving difficult. Gave you a vote up but Its not the answer I'm looking for right now. I would really like to figure out why the mask isn't working right. To make things stranger I just started a brand new project and used the same masking code and it didn't block touches... I don't have any other navbar alterations in my main project the mask is the first and only... – Ryan Poolos Apr 05 '12 at 17:50
"two pngs that have to match the color to the navbar exactly" -> create a png with transparency: the round part should be scaled with alpha passing from 1 to 0. Once you create a corner that fit your idea you can turn it 90 degrees and use it again, and it will be OK for any UINavigationBar in any projects. – Giuseppe Garassino Apr 05 '12 at 17:59
Yea I just came to that conclusion haha. Just need the black rounded part. I guess if I make a category that adds the image to the view on draw it wouldn't be so messy either. – Ryan Poolos Apr 05 '12 at 18:14

score 0 · Answer 2 · answered Mar 07 '13 at 16:01

You should try to use this code:

self.navigationController.navigationBar.translucent = YES;

This wil turn on your back button.You can see your button, but its in another layer. That's why it will not work the touches..

UPDATE:

Use this line of code for test. This will work like a charm for you.

//Style UINavigationBar
UIView *background = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 44)];
background.backgroundColor = [UIColor blackColor];
[self.view addSubview:background];
self.navigationController.navigationBar.tintColor = [UIColor cyanColor];
self.navigationController.navigationBar.translucent = YES;
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;

//Back Btn
UIButton *btnback = [UIButton buttonWithType:UIButtonTypeCustom];
[btnback setFrame:CGRectMake(0, 0, 54, 29)];
[btnback setBackgroundImage:[UIImage imageNamed:@"back.png"] forState:UIControlStateNormal];
UILabel * btnlabel =  [[UILabel alloc]initWithFrame:CGRectMake(15, 0, 40, 23)];
btnlabel.backgroundColor = [UIColor clearColor];
btnlabel.textColor = [UIColor whiteColor];
btnlabel.font = [UIFont boldSystemFontOfSize:13];
btnlabel.text = @"back";
[btnback addSubview:btnlabel];
[btnback addTarget:self action:@selector(backHome:) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithCustomView:btnback];

UINavigationBar with two rounded corners

2 Answers2