For a blurred UIVibrancyEffect to work, do we have to add it as a separate view to a UIBlurEffect's contentView?

Question

I'm trying to use UIVibrancyEffect to add a blurred vibrant overlay similar to Control Center in iOS 7/8. I tried just creating a UIVisualEffectView with the UIVibrancyEffect then adding that to my view, but the result isn't blurred, just made vibrant.

In order to get it to blur it seems I have to add the vibrant effect view to the content view of a blur effect view:

UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
effectView.translatesAutoresizingMaskIntoConstraints = NO;

// Add the blur effect to an image view.
[self.imageView addSubview:effectView];

[self.imageView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[v]|" options:0 metrics:nil views: @{ @"v" : effectView }]];
[self.imageView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[v]|" options:0 metrics:nil views: @{ @"v" : effectView }]];

UIVibrancyEffect *vibrance = [UIVibrancyEffect effectForBlurEffect:blurEffect];
UIVisualEffectView *effectView2 = [[UIVisualEffectView alloc] initWithEffect:vibrance];
effectView2.translatesAutoresizingMaskIntoConstraints = NO;

// Add the vibrance effect to our blur effect view 
[effectView.contentView addSubview:effectView2];

[effectView.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[v]|" options:0 metrics:nil views: @{ @"v" : effectView2 }]];
[effectView.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[v]|" options:0 metrics:nil views: @{ @"v" : effectView2 }]];

self.test = [[UILabel alloc] initWithFrame:CGRectZero];
self.test.translatesAutoresizingMaskIntoConstraints = NO;
self.test.text = @"TEST";
self.test.textColor = [UIColor whiteColor];
self.test.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:30];
self.test.textAlignment = NSTextAlignmentCenter;

// Add label to the vibrance content view.
[effectView2.contentView addSubview:self.test];
[effectView2.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.test attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:effectView2.contentView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0]];
[effectView2.contentView addConstraint:[NSLayoutConstraint constraintWithItem:self.test attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:effectView2.contentView attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0]];

(Credit to Justin Williams)

Is this the case? If so, why do I have to pass the blur effect when instantiating the UIVibrancyEffect? Are we able to have unblurred vibrant views? If so I can't seem to get that working, nor do I see why you're passing a blur.

Answer 1

Taking the questions in your last paragraph in order: Yes; because that's what it's for; no.

The sole purpose of a vibrancy effect is to act in harmony with an underlying blur effect, so that's why you must initialize the vibrancy effect with the blur effect of the blurred visual effect view that will be layered behind it. See WWDC 2014 video 221, plus the UIVisualEffectView.h header, for lots more information.