Stroke masked CALayer in iOS

Question

I'm trying to create a label (or any other view for that matter) with one rounded corner and a stroke/border. I can achieve the former using the following code:

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.label.bounds
                                      byRoundingCorners:UIRectCornerBottomRight
                                            cornerRadii:CGSizeMake(16.0f, 16.0f)];

CAShapeLayer *shape = [CAShapeLayer layer];
shape.frame = self.label.bounds;
shape.path = maskPath.CGPath;

self.label.layer.mask = shape;

Which works great for the rounded corner, but using the following code doesn't apply the stroke the way I want. Instead producing a black (or whatever the backgroundColor of self.label is set to) square border.

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.label.bounds
                                      byRoundingCorners:UIRectCornerBottomRight
                                            cornerRadii:CGSizeMake(16.0f, 16.0f)];

CAShapeLayer *shape = [CAShapeLayer layer];
shape.frame = self.label.bounds;
shape.path = maskPath.CGPath;

// Add stroke
shape.borderWidth = 1.0f;
shape.borderColor = [UIColor whiteColor].CGColor;

self.label.backgroundColor = [UIColor blackColor];
self.label.layer.mask = shape;

Any suggestions on how I can apply an arbitrary coloured stroke that follows the masked path?

Answer 1

You're on the right track with the shape layer. But you should have two different layers. First the mask layer as in your first example which masks your view (cuts off areas you don't want to be visible)

Then you add the shape layer too, but not as mask layer. Also, make sure to not use borderWidth and borderColor, but stroke.

//
// Create your mask first
//
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.label.bounds
                                      byRoundingCorners:UIRectCornerBottomRight
                                            cornerRadii:CGSizeMake(16.0f, 16.0f)];

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

//
// And then create the outline layer
//
CAShapeLayer *shape = [CAShapeLayer layer];
shape.frame = self.label.bounds;
shape.path = maskPath.CGPath;
shape.lineWidth = 3.0f;
shape.strokeColor = [UIColor whiteColor].CGColor;
shape.fillColor = [UIColor clearColor].CGColor;
[self.label.layer addSublayer:shape];

Be aware that your stroke layer path should be inside (smaller than) the the path of the mask. Otherwise, the stroked path will be masked away by the mask layer. I've set the lineWith to 3 which makes it so you can see half of the width (1.5 px), and the other half will be outside the mask.