CODEWITHSUNDEEP
iosinterface-builderuiblureffectuivisualeffectviewuivibrancyeffect
Jordan H
Jordan H

Reputation: 55675

How to implement Visual Effect Views in Interface Builder?

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.

enter image description here

Upvotes: 44

Views: 21639

Answers (1)

Jordan H
Jordan H

Reputation: 55675

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

Upvotes: 56

Related Questions