Mastering blur and vibrancy with iOS 8

By Hugo Hache, on 09.18.2014

With iOS 7, Apple introduced blur in some native elements (UINavigation, UITabBar, UIAlertView). However developers could only mimick this effect outside those. Starting with iOS 8, native blur is available, and we will delve into UIVisualEffectView to master it.

Original image credits: Marac Andrev Kolodzinski/Caters News/Zuma

Blur

Having a view with a blurred background is now trivial with UIVisualEffectView. Simply use the initWithEffect: initializer and be careful to add the subviews to the contentView.

UIBlurEffect * effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView * viewWithBlurredBackground =
  [[UIVisualEffectView alloc] initWithEffect:effect];

Vibrancy

Along with blur, Apple introduced the notion of vibrancy. It is used to highlight an element inside a blurred view. Vibrancy does not fit in the classical model of layers drawn on top of each others to produce a final result. A UIVisualEffectView with a UIVibrancyEffect, no matter its position in the view hierarchy as long as it’s included in the contentView of its parent blurred UIVisualEffectView, will temper the blur to highlight the subviews in its contentView.

If you’re not certain how it looks like, just open your notification center and highlight one of its cells.

Working with the previous example, if you want to demo vibrancy you’ll do:

UIVisualEffectView * viewInducingVibrancy =
  [[UIVisualEffectView alloc] initWithEffect:effect]; // must be the same effect as the blur view
[viewWithBlurredBackground.contentView addSubview:viewInducingVibrancy];
UILabel * vibrantLabel = [UILabel new];
// Set the text and the position of your label
[viewInducingVibrancy.contentView addSubview:vibrantLabel];

Original image credits: Zanza

Tuning vibrancy to create beautiful Today widgets

As mentioned earlier, the notification center is one of the most emblematic vibrancy use in iOS. Achieving a seemless integration of your widget cells highlighted state does require 2 tricks:

UIVibrancyEffect * effect = [UIVibrancyEffect notificationCenterVibrancyEffect];
UIVisualEffectView * selectedBackgroundView = [[UIVisualEffectView alloc] initWithEffect:effect];
selectedBackgroundView.autoresizingMask =
  UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
selectedBackgroundView.frame = self.contentView.bounds;
UIView * view = [[UIView alloc] initWithFrame:selectedBackgroundView.bounds];
view.backgroundColor = [UIColor colorWithWhite:1.0f alpha:0.5f];
view.autoresizingMask =
  UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
[selectedBackgroundView.contentView addSubview:view];
self.selectedBackgroundView = selectedBackgroundView;

And if you’d like to know more about Today widgets, we warmly invite you to take a look at our dedicated blogpost.