iOS 8 Visual Effects Crash Course

This tutorial will give you a crash course on giving your iOS 8 apps some added polish with UIBlurEffect, UIVibrancyEffect and UIVisualEffectView. The app we’ll be building to walk through these visual effects pays homage to one of my favorite creative professionals, Tim Burton. Take a look above! Visit this Binpress Github repo for the full source code.

Adding visual effects may seem like a lot work, but thanks to iOS 8… it’s a lot easier. Using UIVisualEffectView, along with UIBlurEffect and UIVibrancyEffect, your apps can now include dynamic blurring effects with a very small amount of code.

Blur Effect

There are three types of blur effect styles available: 1) Light (UIBlurEffectStyleLight) 2) Extra Light (UIBlurEffectStyleExtraLight) 3) Dark (UIBlurEffectStyleDark)

Creating a UIBlurEffect and a UIVisualEffectView only requires a few lines of code:

1. // Blur Effect

2. UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

3. UIVisualEffectView *bluredEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

4. [bluredEffectView setFrame:self.selectedDetailsView.bounds];

5.  
6. [self.selectedDetailsView addSubview:bluredEffectView];

The first step is to create the blur effect using the desired style. Then, that effect is used to create the visual effect view. Finally, the effect view is added to the view hierarchy. Then it dynamically blurs the content beneath it.

Vibrancy Effect

Using a vibrancy effect, you can control how legible content appears over the blurred effect. Just like the blur effect, it only requires a few lines of code to implement:

1. // Vibrancy Effect

2. UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];

3. UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];

4. [vibrancyEffectView setFrame:self.selectedDetailsView.bounds];

5.  
6. // Add Label to Vibrancy View

7. [vibrancyEffectView.contentView addSubview:self.movieTitle];

8. [vibrancyEffectView.contentView addSubview:self.movieReleaseDate];

9.  
10. // Add Vibrancy View to Blur View

11. [bluredEffectView.contentView addSubview:vibrancyEffectView];

Keep in mind that views added to the contentView of the UIVisualEffectView will have this effect applied to them. Also, when creating a vibrancy effect, be sure to use the same blur effect that was used during the creation of the visual effect view. Failure to do so could result in unwanted visual effects.

Sample App

Taking a look at the sample app, you can see that MainViewController.m, has a method named btnChangeBlurEffect_tap:. This method gets called anytime the user changes the currently selected blur effect (which can be done using the wrench icon on the top-right of the header bar).

Likewise, the btnChangeVibrancyEffect_tap: method changes the vibrancy setting. This action is also available from the wrench icon on the top-right.

Another important method is setupEffectsForSelectionViewAndShowSelectionViewController. In this method, the currently selected blur and vibrancy is applied to the visual effect view.

1. - (void)setupEffectsForSelectionViewAndShowSelectionViewController

2. {

3.     // This sets up and displays the side panel selection view.

4.  
5.     [_bluredEffectView removeFromSuperview];

6.     [_label removeFromSuperview];

7.  
8.     if (_blurEffect)

9.     {

10.         self.selectionViewPrimary.backgroundColor = [UIColor clearColor];

11.  
12.         // Blur Effect

13.         _bluredEffectView = [[UIVisualEffectView alloc] initWithEffect:_blurEffect];

14.         _bluredEffectView.tag = 111;

15.         [_bluredEffectView setFrame:self.selectionViewPrimary.bounds];

16.         [self.selectionViewPrimary addSubview:_bluredEffectView];

17.  
18.         if (_showWithVibrancy)

19.         {

20.             // Vibrancy Effect

21.             UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:_blurEffect];

22.             UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];

23.             [vibrancyEffectView setFrame:self.selectionViewPrimary.bounds];

24.  
25.             // Add Label to Vibrancy View

26.             [vibrancyEffectView.contentView addSubview:_label];

27.  
28.             // Add Vibrancy View to Blur View

29.             [_bluredEffectView.contentView addSubview:vibrancyEffectView];

30.         }

31.         else

32.         {

33.             [self.selectionViewSecondary addSubview:_label];

34.         }

35.  
36.     }

37.     else

38.     {

39.         self.selectionViewPrimary.backgroundColor = [UIColor darkGrayColor];

40.         [self.selectionViewSecondary addSubview:_label];

41.     }

42.  
43.     [self.selectionViewPrimary addSubview:self.selectionViewSecondary];

44.  
45.     [self showSelectionView];

46. }

The last important piece of code in MainViewController.m is the bit in the prepareForSegue: sender: method. In this method, you are creating a screen shot and using that screen shot as your background image for the details view you are about to present.

1. -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender

2. {

3.     [super prepareForSegue:segue sender:sender];

4.  
5.     MoreDetailsViewController *detailViewController = segue.destinationViewController;

6.  
7.     detailViewController.transitioningDelegate = self;

8.     detailViewController.modalPresentationStyle = UIModalPresentationOverCurrentContext;

9.     detailViewController.view.backgroundColor = [UIColor clearColor];

10.  
11.     // There is a bug! this is a work around

12.     self.selectionViewPrimary.frame = CGRectMake(-113, 0, self.selectionViewPrimary.frame.size.width, self.selectionViewPrimary.frame.size.height);

13.  
14.     UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0);

15.     [self.view drawViewHierarchyInRect:self.view.bounds afterScreenUpdates:YES];

16.  
17.     UIImage *copied = UIGraphicsGetImageFromCurrentImageContext();

18.     UIGraphicsEndImageContext();

19.  
20.     detailViewController.imageFromPreviousScreen = copied;

21. }

Finally, in MoreDetailsViewController.m, there is a setupView method. In this method you are creating another set of effects.

1. - (void)setupView

2. {

3.     self.selectedDetailsView.backgroundColor = [UIColor clearColor];

4.  
5.     self.movieTitle = [[UILabel alloc] initWithFrame:CGRectMake(0, 75, self.selectedDetailsView.frame.size.width, 19)];

6.     self.movieTitle.textColor = [UIColor lightTextColor];

7.     self.movieTitle.textAlignment = NSTextAlignmentCenter;

8.  
9.     self.movieReleaseDate = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, self.selectedDetailsView.frame.size.width, 19)];

10.     self.movieReleaseDate.textColor = [UIColor lightTextColor];

11.     self.movieReleaseDate.textAlignment = NSTextAlignmentCenter;

12.  
13.     self.movieDetails = [[UITextView alloc] initWithFrame:CGRectMake(0, 165, self.selectedDetailsView.frame.size.width, 345)];

14.     self.movieDetails.textColor = [UIColor lightTextColor];

15.     self.movieDetails.backgroundColor = [UIColor clearColor];

16.     self.movieDetails.font = [UIFont fontWithName:@"Helvetica" size:12];

17.     self.movieDetails.textContainerInset = UIEdgeInsetsMake(0, 12, 0, 12);

18.     self.movieDetails.editable = NO;

19.  
20.     // Blur Effect

21.     UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

22.     UIVisualEffectView *bluredEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

23.     [bluredEffectView setFrame:self.selectedDetailsView.bounds];

24.  
25.     [self.selectedDetailsView addSubview:bluredEffectView];

26.  
27.     // Vibrancy Effect

28.     UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];

29.     UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];

30.     [vibrancyEffectView setFrame:self.selectedDetailsView.bounds];

31.  
32.     // Add Label to Vibrancy View

33.     [vibrancyEffectView.contentView addSubview:self.movieTitle];

34.     [vibrancyEffectView.contentView addSubview:self.movieReleaseDate];

35.     [vibrancyEffectView.contentView addSubview:self.movieDetails];

36.  
37.     // Add Vibrancy View to Blur View

38.     [bluredEffectView.contentView addSubview:vibrancyEffectView];

39.  
40.     long selectedItem = [[NSUserDefaults standardUserDefaults] integerForKey:@"_selectedItem"];

41.     [self setupSelectedDetails:selectedItem];

42. }

That’s it! That’s all there is to getting your app to look fantastic. For a more in-depth look at UIVisualEffectView, be sure to review the Apple Developer Documentation.

The full source code for this tutorial is available here.

Author: Tammy Coron