Adding a spotlight overlay in iOS and Swift

mask.PNG

Often there's a need to provide an overlay to your view with a spotlight to highlight a particular area. These are commonly used in the context of map views or tutorials.

First create your overlay UIView and set the background colour:

_overlay = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height))
 _overlay.backgroundColor = UIColor(red: 0/255, green: 0/255, blue: 0/255, alpha: 0.5)
 view.addSubview(_overlay)

Create your circle:

let path = CGMutablePath()
path.addArc(center: CGPoint(x: view.frame.size.width / 2, y: view.frame.size.height / 2), radius: 80, startAngle: 0.0, endAngle: 2 * 3.14, clockwise: false)
path.addRect(CGRect(x: 0, y: 0, width: _overlay.frame.width, height: _overlay.frame.height))
Create your mask layer and set the path:
let maskLayer = CAShapeLayer()
maskLayer.backgroundColor = UIColor.black.cgColor
maskLayer.path = path;
maskLayer.fillRule = kCAFillRuleEvenOdd

Add the mask layer to the overlay:

_overlay.layer.mask = maskLayer
_overlay.clipsToBounds = true

And that is it! Full code on GitHub at https://github.com/pricimus/Mask-iOS