Vibrancy and Blur

Episode #146 | 11 minutes | published on November 26, 2014
Subscribers Only
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];
blog comments powered by Disqus