How to make a transparent cut on UIVisualEffectView?

Question

In my app , I made a see through UIView by subclassing simple UIView's. However, If I try to do the same using UIVisualEffectView, I am not able to do it.

Here is what I am able to do using normal UIView:

When I use the UIVisualEffectView in place of green UIView,I cannot see the see through UIView , even though see through UIView is added to the UIVisualEffectView as subview.

Code:

- (void)drawRect:(CGRect)rect { //this is same for the UIVIew and for the UIVisualEffectView
    [super drawRect:rect];

    CGContextRef context = UIGraphicsGetCurrentContext();
    // Clear any existing drawing on this view
    // Remove this if the hole never changes on redraws of the UIView
    CGContextClearRect(context, self.bounds);

    // Create a path around the entire view
    UIBezierPath *clipPath = [UIBezierPath bezierPathWithRect:self.bounds];

    // Your transparent window. This is for reference, but set this either as a property of the class or some other way
    CGRect transparentFrame;
    // Add the transparent window
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:transparentFrame cornerRadius:5.0f];
    [clipPath appendPath:path];

    // NOTE: If you want to add more holes, simply create another UIBezierPath and call [clipPath appendPath:anotherPath];

    // This sets the algorithm used to determine what gets filled and what doesn't
    clipPath.usesEvenOddFillRule = YES;
    // Add the clipping to the graphics context
    [clipPath addClip];

    // set your color
    UIColor *tintColor = [UIColor greenColor]; 

    // (optional) set transparency alpha
    CGContextSetAlpha(context, 0.7f);
    // tell the color to be a fill color
    [tintColor setFill];
    // fill the path
    [clipPath fill];
}

Question: Why this didn't work with UIVisualEffectView ?

Answer 1

Add following global variables in your ViewController.h file-

CAShapeLayer *fillLayer;
UIVisualEffectView *overlayView;

Add following methods in your ViewController.m file-

-(void)addOverlay:(CGRect)rect{

    float x = rect.origin.x;
    float y = rect.origin.y;
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height) cornerRadius:0];
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x, y, rect.size.width, rect.size.height) cornerRadius:5];

    [path appendPath:circlePath];
    [path setUsesEvenOddFillRule:YES];

    [self removeOverlay];
    overlayView = [[UIVisualEffectView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height+64)];
    overlayView.backgroundColor = [UIColor clearColor];
    [self.view addSubview:overlayView];

    fillLayer = [CAShapeLayer layer];
    fillLayer.path = path.CGPath;

    fillLayer.fillRule = kCAFillRuleEvenOdd;

    fillLayer.fillColor = [UIColor colorWithRed:78/255.0 green:103/255.0 blue:135/255.0 alpha:1.0].CGColor;
    fillLayer.opacity = 0.85;
    [[UIApplication sharedApplication].keyWindow.layer addSublayer:fillLayer];

}

-(void)removeOverlay{
    [overlayView removeFromSuperview];
    [fillLayer removeFromSuperlayer];
}

and call it as -

[self addOverlay:rect];