iosios8masktranslucency

How can UIVisualEffectView be used inside of a circle?

I'm making a custom control circle. Part of the circle may be transparent. It would make more visual sense and look better if it was translucent instead of transparent.

Because views are rectangular, and I only want the circle to be translucent, not the rest of the rectangle, this is a problem.

The UIVisualEffectView is behind the custom control.

enter image description here

(Without anything rendered inside of the circle for debugging purposes)

As you can see, the view is blurring things outside of the circle.

I don't know how to blur inside only the view, and the prerelease documentation is practically empty. My only thought is to create many 1x1 views to cover the circle, but this seems like it would not really work, and even if it did it would be a slow and ugly solution. How can I blur the content inside the view, without blurring anything outside it?

Solution

  • Set the circle view's layer mask to a filled circle:

    CircleControlView *circleView = yourCircleView();

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

    UPDATE

    Swift playground example:

    import UIKit
import XCPlayground
import QuartzCore

UIGraphicsBeginImageContext(CGSize(width: 100, height: 100))
let viewPath = UIBezierPath(ovalInRect:CGRect(x:1,y:1,width:98,height:98))
viewPath.lineWidth = 2
viewPath.stroke()
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

let view = UIView(frame:CGRect(x:0,y:0,width:100,height:100))
XCPShowView("view", view)

let label = UILabel(frame:view.bounds)
label.text = "This is the text in the background behind the circle."
label.numberOfLines = 0
view.addSubview(label)

let effectView = UIVisualEffectView(effect:UIBlurEffect(style:.ExtraLight))
effectView.frame = view.bounds
view.addSubview(effectView)

let circleView = UIImageView(image:image)
effectView.addSubview(circleView)

let maskPath = UIBezierPath(ovalInRect:circleView.bounds)
let mask = CAShapeLayer()
mask.path = maskPath.CGPath
effectView.layer.mask = mask

    Result:

    translucent circle