UIView

Create a UIView that fill with color, and leave an empty in center.

This can be accomplish by using CAShapeLayer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 1
UIBezierPath *overlayPath = [UIBezierPath bezierPathWithRect:self.view.bounds];

// 2
UIBezierPath *transparentPath = [UIBezierPath bezierPathWithRect:CGRectMake(60, 120, 200, 200)];
[overlayPath appendPath:transparentPath];
[overlayPath setUsesEvenOddFillRule:YES];

// 3
CAShapeLayer *fillLayer = [CAShapeLayer layer];
fillLayer.path = overlayPath.CGPath;
fillLayer.fillRule = kCAFillRuleEvenOdd;
fillLayer.fillColor = [UIColor colorWithRed:255/255.0 green:20/255.0 blue:147/255.0 alpha:1].CGColor;

// 4
[self.view.layer addSublayer:fillLayer];
  1. Initialize a bezier path filled with the whole UIView
  2. Create another bezier path to represent the rectangle inside. Then merge the inner rectangle to the outer rectangle.
    For usesEvenOddFillRule you can read more in apple doc
  3. Create a layer (CAShapeLayer is subclass of CALayer), set the path create just now to the layer, then fill it with a color (put whatever color that you like)
  4. Add the layer to the UIView layer (by default, all UIViews come with a layer)

References: