Masking views

Apart from cornerRadius, we can easily mask any view with any shape and path using UIBezierPath and CAShapeLayer. This provides us much more flexibility in laying out our subviews and making them as odd as possible.

Rounding corners

Any view's corners can be rounded like so;

view.layer.cornerRadius = 8.0

But, what if we wanted to round only two corners and let the other corners be squared? At this point UIBezierPath and CAShapeLayer come to the rescue!

First we need to create the path of our mask with the desired corners rounded.

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

Then we create the shape layer object with an adjusted frame to be set as mask layer of our view.

CAShapeLayer *maskLayer = [CAShapeLayer new];
maskLayer.frame = self.titleLabel.bounds;

At this point, the only thing we need to do is to set the path of our mask layer.

maskLayer.path = maskPath.CGPath;

Being a Core Animation framework class, CAShapeLayer’s path takes a CGPath.

Now we have our mask to be applied. The only task left is to apply it! It’s done so:

self.view.layer.mask = maskLayer;

We have a brand new view whose top left and top right corners are rounded with a radius of 8.0.

Star

We want our image view to be masked with a star. First create the star shaped bezier path, like so:

I used PaintCode to create this bezier path. You can find the paint code drawing file here.

UIBezierPath* starPath = UIBezierPath.bezierPath;
[starPath moveToPoint: CGPointMake(128, 0)];
[starPath addLineToPoint: CGPointMake(156.58, 88.66)];
[starPath addLineToPoint: CGPointMake(249.74, 88.45)];
[starPath addLineToPoint: CGPointMake(174.24, 143.03)];
[starPath addLineToPoint: CGPointMake(203.24, 231.55)];
[starPath addLineToPoint: CGPointMake(128, 176.62)];
[starPath addLineToPoint: CGPointMake(52.76, 231.55)];
[starPath addLineToPoint: CGPointMake(81.76, 143.03)];
[starPath addLineToPoint: CGPointMake(6.26, 88.45)];
[starPath addLineToPoint: CGPointMake(99.42, 88.66)];
[starPath closePath];

Also, I assumed that imageView is 256x256 points in size.

Then, create the layer and set its path:

CAShapeLayer *starShape = [CAShapeLayer new];
starShape.frame = imageView.bounds;
starShape.path = starPath.CGPath;

And finally set imageView’s mask layer:

imageView.layer.mask = starShape;

The result is:

You can find the gist here.