Round UIVisualEffectView

Question

I have a map. On the map, I'd like to draw small, blurred circle. I've implemented something like this:

UIVisualEffect *visualEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
self.visualEffectView = [[UIVisualEffectView alloc] initWithEffect:visualEffect];
[self addSubview:self.visualEffectView];

and then in layoutSubviews:

[self.visualEffectView setFrame:CGRectMake(0.f, 0.f, 20.f, 20.f];

Now the problem is making this view round. I've tried:

[self.visualEffectView.layer setCornerRadius:10.f];

However nothing happens. Another try was with (basing on SOF question):

CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = [UIBezierPath bezierPathWithOvalInRect:self.visualEffectView.bounds].CGPath;
self.visualEffectView.layer.mask = mask;

But in this case, the visualEffectView is round but doesn't blur :/. Is there any way to make it working?

BTW: I've tried FXBlurView, however it works very slowly, I can't accept my app to load only map + blur for ~1 minute on iPhone 5.

Answer 1

Tryout:

self.visualEffectView.clipsToBounds = YES;

Put this after you set the cornerRadius. This should be it. You can leave out the BezierPath stuff. Hope this helps :)

EDIT:

I just tried something similar in my own project. And a good way to keep the blur with round corners, is simply to put the visual effect view as a child of a new view with the same frame as your visual effect view. You can now just set the corner radius of this new parent UIView object and set its clipsToBounds property to YES. It then automatically gives its subviews the corner radius, as it clips to its bounds.

Give it a try, it works in my case.

Answer 2

I figured this out if anyone wants to know how to do it, no code needed:

1. Create a view and set its background to "Clear Color" in the Attribute editor (it MUST be clear color not default.

2. Drag another view on top of the first view, size it to the size you want your Visual Effect view to be, and in the Attribute editor set its background to "Clear Color", and check "Clip Subviews".

   Also on this view, go to the identity inspector and under "User Defined Runtime Attributes" add a new Key Path named "layer.cornerRadius", make it type "Number", and set its value to 9 or higher for a decent rounded edge. (There's a bug in Xcode which will change the Key Path back to the default once you change the Type, if this happens, just be sure to go back and re-type in layer.cornerRadius).

3. Drag a Visual Effects View with blur on top of the View in step 3.

4. Now run your program. You will have rounded edges, blur, and no artifacts.

Now, I created mine where it links using a segue, if you need this to work with a segue your segue has to be set to Modal and the presentation has to be set to OVER Full Screen (not just Full Screen).

Here is a link to a project file that demonstrates it. Note the hierarchy of the views in the second view controller: Project File on Dropbox

EDIT: My picture disappeared so I readded it.

Answer 3

Things have obviously changed since the original question, but I was able to achieve this just by selecting "Clip to Bounds" and setting "layer.cornerRadius" in "User Defined Runtime Attributes" on the Visual Effect View itself.