Interface Builder and Blur With Vibrancy

- - posted in blur, interface-builder, ios

alt text iOS lock screen passcode is a good example of vibrancy (the circle around the digits).

Making blur effect with vibrancy in interface builder is easy using: “Visual Effect Views With and Vibrancy”:

alt text

After dragging to interface builder the view hierarchy should be like this:

alt text

(i renamed the views to reflect what they actually are).

Here is an example i made: alt text

Pros

  • using interface builder we all so love and hate.

Caveats

  • Views have to be seperated from their original hierarchy. In the example above the labels should have background view (one vibrant and one regular) but to make the vibrant background I had to place the background view inside the vibrant view, this means also re-creating the layout constraints for the background view. - If you think there is a better way around this please comment or email me.

Example code here: blur-with-ib.