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.