How to implement Visual Effect Views in Interface Builder? How to implement Visual Effect Views in Interface Builder? ios ios

How to implement Visual Effect Views in Interface Builder?


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!
iPhone 6 screenshot
And this is how it looks in Interface Builder:

enter image description here