iOS opaque UIView with a transparent section

Question

I'm trying to make a simple view that is opaque except for a circle of a given diameter in the center. It is meant to overlay the camera, as they don't want the entire screen showing, simply that you center your face in the circle and snap the picture.

It's a few simple lines of code to to the opposite - a clear view with an opaque circle in the center - but I cannot figure out how to do the opposite.

Any help or pointers appreciated....

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

It sounds like you just want a simple mask. You can do that using Ash's method.

UIImage *_maskingImage = [UIImage imageNamed:@"mask"];
CALayer *_maskingLayer = [CALayer layer];
_maskingLayer.frame = theView.bounds;
[_maskingLayer setContents:(id)[_maskingImage CGImage]];
[theView.layer setMask:_maskingLayer];

You'll need an image that is a circle that has a transparency gradient going from black on the edge to transparent on the center. Remember which file type you're using as not all support transparency (like jpeg).

Alternatively, you could just use a UIImageView and have an image that has the gradient in it instead.

edited May 23 '17 at 12:20

Community

1
1

answered Dec 18 '14 at 20:56

Jadar

1,643
1
13
25

yes, i can have someone do that up for me. was wondering how to do this in code though. as i mentioned, doing the opposite is just a few lines of code in a subclassed UIView, seems like this shouldn't be too difficult? – mickm Dec 18 '14 at 21:47
Honestly it's not that hard to just draw a circle gradient in GIMP and use that. This is mostly code, and it'll do what you want. It's by far the easiest way too. – Jadar Dec 18 '14 at 22:17

score 0 · Answer 2 · answered Dec 18 '14 at 21:01

What about using the mask property of the view layer ?

Try something like this (the 2 views should have the same size) :

#import <QuartzCore/QuartzCore.h>

UIView *blackCircleOnClearBackground;
UIView *cameraView;
cameraView.layer.mask = blackCircleOnClearBackground.layer;

iOS opaque UIView with a transparent section

2 Answers2