Adding Animated Gif’s in iOS Applications using Xcode Storyboards

There is no out of the box support provided by Apple to add animated GIF’s to your iOS applications. There are many convoluted solutions available on the interwebs. After trying a few, I have come to rely on the super-easy to integrate solution by Flipboard Inc. (key development by Flipboard engineer Raphael Schaad, follow him on twitter)Their library makes it a piece of cake to add animated GIF’s to your iOS applications using storyboards in Xcode. Following this, your app will support animated GIF’s. This post will walk you step by step through the process of doing so.

Download code from Github: https://github.com/svram/AnimatedGIF-Xcode-Storyboards-iOS

1) This is what your app will look like if you follow all the steps (it’ll be smoother in the simulation, had to convert a .mov file to gif):

gifMovie
  • Open Xcode, create a new project  and choose the “Single View Application” template.
  • Enter Product, Organisation & Company names. Enter a class prefix and choose iPhone from the devices drop down menu.
  • Save the project to disk

2)  Download Flipboards FLAnimatedImage library from github:

https://github.com/Flipboard/FLAnimatedImage

(Just download the ZIP file to your disk)

3) Open Xcode and right-click the project in the project navigator and choose ‘New Group’. A new folder gets added to your project files. Name this folder ‘Library’.

Create new group in Xcode named 'Library'

Create new group in Xcode named ‘Library’

Create new group in Xcode named 'Library'

Create new group in Xcode named ‘Library’

4) Now open the folder where you saved the FLAnimatedImage library you downloaded in Step 2.

Locate the following four files and drag them to the ‘Library’ folder in Xcode that you created in Step 3.

FLAnimatedImage.h
 
FLAnimatedImage.m
 
FLAnimatedImageView.h
 
FLAnimatedImageView.m

It should be located in the folder hierarchy:

FLAnimatedImage-master -> FLAnimatedImageDemo -> FLAnimatedImage

When prompted, select the ‘Copy items into destination groups folder’ and click ok.

Drag and add the FLAnimatedImageView to the Library folder

Drag and add the FLAnimatedImageView to the Library folder

 

Drag and add the FLAnimatedImageView to the Library folder

Drag and add the FLAnimatedImageView to the Library folder

5) Open your ViewController.h and add the following import statements:

#import "FLAnimatedImage.h"
#import "FLAnimatedImageView.h"

6) Open the Main Storyboard file and add 3 UIImageView objects from the Object Library in the Utilities area on the right. Resize them so your storyboard looks like the one below.

 

Drag 3 UIImageView objects to the storyboard

Drag 3 UIImageView objects to the storyboard

 

Final storyboard orientation with 3 image views

Final storyboard orientation with 3 image views

 

7) Now click on one of the UIImageView objects that you added to the storyboard and under the Identity Inspector on the right, locate  the ‘Custom Class’ section. In the ‘Class’ text field enter ‘FLAnimatedImageView’.

Do this for all 3 UIImageView objects. The objects are of type FLAnimatedImageView which is a subclass of UIImageView.

Change the class of each of the image views to FLAnimatedImageView in the Identity Inspector in Xcode

Change the class of each of the image views to FLAnimatedImageView in the Identity Inspector in Xcode

8) Open the Assistance Editor in Xcode such that the Storyboard and your ViewController.h files are side by side.

Control drag from each of the image views in the storyboard to your ViewController.h file between the @interface and @end statements. Give your outlet a name and let it be of type FLAnimatedImageView. At the end of it, your ViewController.h file should look like this:

#import <UIKit/UIKit.h>
#import "FLAnimatedImageView.h"
#import "FLAnimatedImage.h"
 
@interface VBViewController : UIViewController
@property (strong, nonatomic) IBOutlet FLAnimatedImageView *lightningImageView;
@property (strong, nonatomic) IBOutlet FLAnimatedImageView *manWalkingImageView;
 
@property (strong, nonatomic) IBOutlet FLAnimatedImageView *pageLoadingImageView;
 
@end
Connect outlets from the FLAnimatedImageViews in the storyboard to the ViewController.h file

Connect outlets from the FLAnimatedImageViews in the storyboard to the ViewController.h file

9) With your view controller selected in the storyboard, we will add a navigation controller for aesthetics sake. In the menubar, go to Editor -> Embed In -> Navigation Controller.

Add a navigation controller in Xcode storyboard

Add a navigation controller in Xcode storyboard

10) Open your ViewController.m file and add code to the viewDidLoad: method to set the title of the navigation bar.

self.title = @"I Love GIF's";

Now, we will add 3 gifs to each of the image views programmatically. First download them to your disk here:

http://vikrambahl.com/wp-content/uploads/2014/07/manWalking.gif

http://vikrambahl.com/wp-content/uploads/2014/07/lightning.gif

The third GIF we will load via a URL.

Just right click and save it.

Once saved, add it to your project by dragging the images to your project folder in Xcode. When prompted, select Copy items into destination groups folder.

Adding GIF's to the project folder in Xcode

Adding GIF’s to the project folder in Xcode

11) Now we will load each of the three images with FLAnimatedImage instead of UIImage. Add the following code to your viewDidLoad: method in your ViewController.m file:

FLAnimatedImage *manWalkingImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:[NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"manWalking" ofType:@"gif"]]];
 
FLAnimatedImage *lightningImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:[NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"lightning" ofType:@"gif"]]];
 
FLAnimatedImage *loadingImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://vikrambahl.com/wp-content/uploads/2014/06/ajax_loader_blue_512.gif"]]];

Now,  assign the FLAnimatedImage types to each of the FLAnimatedImageViews via the animatedImage property:

self.lightningImageView.animatedImage = lightningImage;

And add the FLAnimatedImage view objects as subviews:

[self.view addSubview:self.lightningImageView];

Finally, your viewDidLoad: method should look like this:

- (void)viewDidLoad
 
{
 
[super viewDidLoad];
 
// Do any additional setup after loading the view, typically from a nib.
 
//Set the title of the naviagation bar
 
self.title = @"I Love GIF's";
 
//Add the gifs as FLAnimatedImage objects
 
FLAnimatedImage *manWalkingImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:[NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"manWalking" ofType:@"gif"]]];
 
FLAnimatedImage *lightningImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:[NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"lightning" ofType:@"gif"]]];
 
//Loading a gif from URL
 
FLAnimatedImage *loadingImage = [[FLAnimatedImage alloc] initWithAnimatedGIFData:[NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://vikrambahl.com/wp-content/uploads/2014/06/ajax_loader_blue_512.gif"]]];
 
//Assign the FLAnimatedImage types to each of the FLAnimatedImageViews via the animatedImage property
 
self.lightningImageView.animatedImage = lightningImage;
 
self.manWalkingImageView.animatedImage = manWalkingImage;
 
self.pageLoadingImageView.animatedImage = loadingImage;
 
//Add the FLAnimatedImage view objects as subviews
 
[self.view addSubview:self.lightningImageView];
 
[self.view addSubview:self.manWalkingImageView];
 
[self.view addSubview:self.pageLoadingImageView];
 
}

Now just run the program in the simulator and you should see your three GIFs loading perfectly.

2 Responses to Adding Animated Gif’s in iOS Applications using Xcode Storyboards

  1. Jorge August 10, 2015 at 1:57 am #

    Team,
    i got this error: can you help me what’s wrong here? i’m just starting iOS development.

    #import “ViewController.h”

    @interface ViewController() ->> Cannot find interfase for ‘ViewController’. Did you mean ‘UIViewControl’?

    @end

    @implementation ViewController: NSObject

    – (void)viewDidLoad {
    [super viewDidLoad]; ——> > No visible @interfase for ‘NSObject’ declares the selector ‘viewDidLoad’

    // Do any additional setup after loading the view, typically from a nib.
    }

    – (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning]; No visible @interfase for ‘NSObject’ declares the selector ‘viewDidLoad’

    // Dispose of any resources that can be recreated.
    }

    @end

Trackbacks/Pingbacks

  1. Inserting Gifs in IOS Apps – nil pickles - June 26, 2016

    […] FLAnimatedImage Github FLAnimatedImage Tutorial […]

Leave a Reply

Max level reaching...