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.

croX · Answer 1 · 2015-03-23T23:17:46.503

36

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.

edited Mar 23 '15 at 23:17

answered Mar 01 '15 at 20:03

croX

1,725
1
19
23

2

Already tried this, gives same result as setting mask - there is no blur. – Nat Mar 01 '15 at 20:17
But your view is round? Only the blur is missing? – croX Mar 02 '15 at 11:47
Yes. In this case the view is round but blur is missing. If I setClipsToBounds:NO, then view is not round but I can see blur. – Nat Mar 02 '15 at 12:17
@surfrider did you try to embed it into a uiview, as described in the edit part? – croX Jul 10 '15 at 08:22
@croX yes, i mean this method. In any case i have either blur or round corners. – surfrider Jul 10 '15 at 08:36
@croX if you have a working code with it, you can share it. – surfrider Jul 10 '15 at 08:41
Work for me but also I was need to set round corners on the view where effect view was added. – Pavel Dec 18 '15 at 20:43

SN81 · Answer 2 · 2016-04-15T13:03:40.797

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

Create a view and set its background to "Clear Color" in the Attribute editor (it MUST be clear color not default.
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).
Drag a Visual Effects View with blur on top of the View in step 3.
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.

This helped me, although nowadays (or, at least in my case) it was enough just to Clip to Bounds and set layer.cornerRadius on the Visual Effect View itself. — Oded, Nov 03 '19 at 15:23
@Oded answers helps me. Just add a cornerRadius and set `clipsToBounds = true` for view, that contains a UIVisualEffectView. Not need adding something to blur view, only view that it contains — Koder 228, Jun 26 '22 at 12:52

score 5 · Accepted Answer · answered Nov 03 '19 at 15:22

5

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.

answered Nov 03 '19 at 15:22

Oded

954
12
16

Right. It was already said in the comments below other answers, that nowadays it works properly by just setting the `cornerRadius`. The other part is specific for Interface Builder so applies just for those who use that tool. I will accept this answer - time did change and now it's as easy as in this answer, so people don't search for it. – Nat Nov 04 '19 at 09:53

score 0 · Answer 4 · answered Mar 20 '17 at 16:48

0

to draw circle the CornerRadius must be equal width/2 in your example width = 30 then the CornerRadius = 30/2 = 15;

answered Mar 20 '17 at 16:48

Obadah Shatnawi

79
1
5

That was just an example for SOF requirements and have nothing to do with the question. Anyway good you've noticed, updated question. – Nat Mar 20 '17 at 17:58

score 0 · Answer 5 · answered Dec 31 '19 at 07:18

0

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.

answered Dec 31 '19 at 07:18

Arjun

1,477
1
13
23

score -2 · Answer 6 · answered Mar 13 '15 at 09:13

-2

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.

answered Mar 13 '15 at 09:13

Nat

12,032
9
56
103

You might want to check out this related blog post on how to make edges look better: https://medium.com/@imho_ios/avoid-artifacts-on-uiblureffect-edges-c30e737c21fb#.sz26mo1sv – Jay Feb 14 '17 at 11:33

Round UIVisualEffectView

6 Answers6