Question

I have a custom button that I want to make top-left border of it look like normal round rectangle.

I found code that makes all corners round:

_myButton.layer.cornerRadius = 8;
_myButton.layer.borderWidth = 0.5;
_myButton.layer.borderColor = [UIColor grayColor].CGColor;
_myButton.clipsToBounds = YES;

enter image description here

How can I fix the code to make it round just in the top-left side?


Edit:

_myButton.layer.borderWidth = 2;
_myButton.layer.borderColor = [UIColor blackColor].CGColor;

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:_myButton.bounds
                                                    byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
                                                        cornerRadii:CGSizeMake(7.0, 7.0)];

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];

maskLayer.frame = _myButton.bounds;
maskLayer.path = maskPath.CGPath;
_myButton.layer.mask = maskLayer;
[maskLayer release];

This code does not work. The whole button disappears.

Was it helpful?

Solution

You almost got it, but, after building your CAShapeLayer, use it to add itself as a sublayer of your button's layer, not as an alpha mask to hide some parts of your button (in that case the corners).

UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(10,300,300,40);
[button setTitle:@"Hey" forState:(UIControlStateNormal)];
[button setTitleColor:[UIColor blueColor] forState:(UIControlStateNormal)];

UIBezierPath *shapePath = [UIBezierPath bezierPathWithRoundedRect:button.bounds
                                                byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
                                                      cornerRadii:CGSizeMake(7.0, 7.0)];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = button.bounds;
shapeLayer.path = shapePath.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor blackColor].CGColor;
shapeLayer.lineWidth = 2;
[button.layer addSublayer:shapeLayer];

[self.view addSubview:button];

OTHER TIPS

CAShapeLayer * positiveCorner = [CAShapeLayer layer];
positiveCorner.path = [UIBezierPath bezierPathWithRoundedRect: self.button.bounds
                                            byRoundingCorners: UIRectCornerTopRight | UIRectCornerBottomRight
                                                  cornerRadii: (CGSize){5, 5}].CGPath;

self.button.layer.mask = positiveCorner;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top