How to implement Visual Effect Views in Interface Builder?

Question

How do you use Visual Effect Views with Blur and Vibrancy in Interface Builder?

I've dragged this item out into the View, then dragged a UILabel onto the last view in the hierarchy - the vibrant effect's contentView I assume. This results in a blurred view overtop but there is no label visible. Anywhere else I place the label in the hierarchy it does become visible but it's just solid black text.

Armageddon

Answer 1

Finally figured it out.

1. In a UIViewController change the view's background to blue
2. Drag a Visual Effect Views with Blur and Vibrancy object into the view, so it's added as a subview
3. In the first Visual Effect View, set up Auto Layout constraints to its containing View: Leading, Trailing, Top, and Bottom (to make the blur effect fill the screen)
4. Expand the View that is a subview of the first Visual Effect View to reveal a second Visual Effect View
5. Set up Auto Layout constraints for this Visual Effect View, again set all edges to its containing View to fill the screen - be sure to change the constants to 0
6. Expand the second Visual Effect View to reveal the final View
7. Drag a UILabel into the scene as a subview of the last View
8. Set up Auto Layout constraints for this label to its containing View - perhaps Leading and Top with constants of 15
9. Change the text color of the label to pure white with 0.5 alpha
10. Change the Style to Dark for both Visual Effect Views in the Attributes Inspector (just to show the effect better)
11. Run the app on a device that supports the full vibrant effect (iPhone 5+, iPad Air+)

Voila!

And this is how it looks in Interface Builder:

Armageddon

Sorry, did you mean alpha instead of opacity? If not, how did you change the opacity of the label? Thank you. – Static

If you want to present it view presentViewController, then make sure to set Presentation option to Over Current Context. See xmcgraw.com/a-smooth-introduction-to-uivisualeffectview – Danettedaney

If anybody wants to know, to remove the blur just set both visual effect views to vibrant. – Dogeatdog