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!
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;
The best way is to override drawRect in UINavigationBar and use a custom image.
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
Related
I have a custom UIView which is supposed to be a round rectangle which, when you begin editing a UILabel inside, the round rectangle will grow its shape (CABasic animation on a CAShapeLayer mask path and outline path). So to be clear, the custom UIView is organized like this:
MyCustomView has a ClipView.
ClipView uses drawRect to draw the background of the round rectangle. (clipview == view that gets clipped)
Then, I call the following code to do the CAShapeLayer manipulation:
//0. CLIP
shapeLayer = [CAShapeLayer layer];
CGRect shapeRect = self.bounds;
[shapeLayer setBounds:shapeRect];
[shapeLayer setPosition:CGPointMake((shapeRect.size.width)/2.0f, (shapeRect.size.height)/2.0f)];
[shapeLayer setFillColor:[[UIColor colorWithRed:0 green:1 blue:0 alpha:1.0f] CGColor]];
[shapeLayer setStrokeColor:[[UIColor redColor] CGColor] ];
[shapeLayer setLineWidth:1];
[shapeLayer setLineJoin:kCALineJoinRound];
[shapeLayer setOpacity:1];
CGRect shapeLayerPathRect = CGRectMake(0, 0, self.bounds.size.width, 44.0f);
shapeLayer.path = [self roundRectPathForRectangle:shapeLayerPathRect andRadius:CORNER_RADIUS];
[[self.clipView layer] setMask:shapeLayer];
//1. draw the shaded outline of a round rectangle
outlineLayer = [self topDownShadowShapeLayer]; //setup for my CAShapeLayer, involving shadow stuff, line color, etc
outlineLayer.path = [self roundRectPathForRectangle:shapeLayerPathRect andRadius:CORNER_RADIUS];
[self.clipView.layer addSublayer:outlineLayer];
Although the animation the proceeds is the quickest approach (stretching both CAShapeLayers), the entire element (MyCustomView) causes everything to be a lot slower! For example, UIView animations that go on, also when MyCustomView is inside a ScrollView it is VERY jumpy.
I'm mostly concerned about the UIScrollView problem. Why is it so choppy for a UIScrollView to translate these layers around? Is there a good solution / what's another approach that can achieve the same effect?
I have a Master-Details project setup and running in XCode with no problems at all and everything works fine. However, when I attempt to round the top right and left corners of the NavigationBar it has a very strange effect. It basically, offsets the 'touch' response of the 'back' left button on the details view.
The button still works, but it seems that the iPhone can only pick up the user's touch when they click just below the NavigationBar and not the button itself.
The code I have is:
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
UIColor *color = [UIColor darkGrayColor];
UIImage *img = [UIImage imageNamed:#"nav-bar"];
[img drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
self.tintColor = color;
// Create mask to round corners
CGRect bounds = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
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;
// Apply mask to navigation bar
[self.layer addSublayer:maskLayer];
self.layer.mask = maskLayer;
// Apply logo to navigation bar
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"logo"]];
self.topItem.titleView = imageView;
}
Here is a screen shot of what I mean, button only responses when I touch where the arrow is pointing:
--- UPDATE ---
After some testing I've worked out the problem is with the 'self.layer.mask = maskLayer' line. I have refactored the code and tested in another project that just uses xib files and not story boards, and dont have any problems, but its still not working in the current project.
CGRect bounds = CGRectMake(0, 0, navigationController.navigationBar.bounds.size.width,
navigationController.navigationBar.bounds.size.height);
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;
// Apply mask to navigation bar
//navigationController.navigationBar.layer.mask = maskLayer;
[navigationController.navigationBar.layer addSublayer:maskLayer];
navigationController.navigationBar.layer.mask = maskLayer;
use self.bounds instead of self.frame. You probably want to draw relatively to your own coordinates system and not relatively to your own parent view.
Hi guys I've creates this box, basically the corner radius isn't working & the stroke doesn't show on the top side of the shape either. Is there anyway to get this working?
UIBezierPath* conPath = [UIBezierPath bezierPath];
[conPath moveToPoint:CGPointMake(conX, conY)];
[conPath addLineToPoint:CGPointMake(conX, conY+50)];
[conPath addLineToPoint:CGPointMake(conX+220, conY+50)];
[conPath addLineToPoint:CGPointMake(conX+220, conY)];
CAShapeLayer* conLayer = [CAShapeLayer layer];
conLayer.path = conPath.CGPath;
conLayer.cornerRadius = 5.0;
UIColor *bg = [UIColor colorWithWhite:1 alpha:0.7];
[conLayer setFillColor:bg.CGColor];
[conLayer setStrokeColor:[UIColor grayColor].CGColor];
[[self layer] addSublayer:conLayer];
I am using the following code to achieve the top right and left corner for my main UIView:
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.view.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(10.0, 10.0)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.view.bounds;
maskLayer.path = maskPath.CGPath;
[maskLayer setMasksToBounds:YES];
self.view.layer.mask = maskLayer;
But after that, all subviews like UIButtons contained in the UIView stop working. I think this could be a no brainer, but I just couldn't get the solution after much of the googling work.
Thanks in advance.
Cheers.
I am trying to mask an image so that I can give it only two rounded corners. With the code that I have it just adds the mask in white over the image, but doesn't seem to apply it. What do I need to do different to mask the image corners?
CAShapeLayer *maskLayer = [CAShapeLayer layer];
UIBezierPath *roundedPath = [UIBezierPath bezierPathWithRoundedRect:maskLayer.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(16.f, 16.f)];
maskLayer.fillColor = [[UIColor whiteColor] CGColor];
maskLayer.backgroundColor = [[UIColor clearColor] CGColor];
maskLayer.path = [roundedPath CGPath];
// Add mask
self.imageView.layer.mask = maskLayer;
Round two corners in UIView
As mentioned in the above linked question, you probably need to remove the view from the heirarchy before applying its mask.
[self.imageView removeFromSuperview];
self.imageView.layer.mask = maskLayer;
[self.view addSubview:self.imageView];
Also, your maskLayer has no bounds. You need to set it to the frame (or bounds) of the view you're trying to mask.
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = self.imageView.frame;