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

自从最初的问题以来，事情显然发生了变化，但我能够通过在 Visual Effect View 本身的“User Defined Runtime Attributes”中选择“Clip to Bounds”并设置“layer.cornerRadius”来实现这一点。

Answer 4

要绘制圆形，CornerRadius 在您的示例中必须等于 width/2，width = 30，然后 CornerRadius = 30/2 = 15；

Answer 5

This works for me

@IBOutlet weak var blurView: UIVisualEffectView!

And in viewDidLoad()

blurView.layer.cornerRadius = 10;
blurView.clipsToBounds  =  true

You can change the corner radius according to your preference.

Answer 6

Well, so there is a possibility to apply rounded corners just like on normal UIView. However the UIVisualEffectView won't look good, because the area nearby curved 'sides' of the circle isn't blurred properly. Because it looks buggy and ugly I disadvise to round UIVisualEffectView .