Episode #146

Vibrancy and Blur

11 minutes
Published on November 26, 2014

This video is only available to subscribers. Get access to this video and 572 others.

In this episode I revisit the blur technique we covered in episode 104 and re-implement it using iOS 8's Visual Effect view with UIBlurEffect and UIVibrancyEffect.

Episode Links

Since we can use iOS 8's Visual Effect View, we can now remove our custom toolbar code, the blurred background image code, and associated animations.

Creating the Blurred Background

UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blur];
visualEffectView.frame = panelRect;
self.panel = visualEffectView;
self.panel.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth;

Making the text Vibrant

UIVibrancyEffect *vibrancy = [UIVibrancyEffect effectForBlurEffect:blur];
UIVisualEffectView *vibrancyContainer = [[UIVisualEffectView alloc] initWithEffect:vibrancy];
vibrancyContainer.frame = CGRectInset(self.panel.bounds, 40, 20);

UILabel *label = [[UILabel alloc] initWithFrame:vibrancyContainer.bounds];
label.backgroundColor = [UIColor clearColor];
label.text = @"Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...";
label.numberOfLines = 8;
label.font = [UIFont fontWithName:@"Avenir Next" size:14];
[vibrancyContainer.contentView addSubview:label];

[self.panel addSubview:vibrancyContainer];