Animated Images in iPhone

Animated Gif - Animated Images - iPhone Style

Ah, the animated gif, a throwback to the early days of web development and simple animation. In this post I’ll show you how to use a UIImageView to create a similar effect that you get with an animated gif.

Below I’ve inserted the animated gif that I’ll use as a template for the iPhone app we’ll write in this post.

                                            

Animated gifs are nothing more than a series of images, encapsulated within one gif file, that are displayed in sequence. Within an animated gif one can specify the duration that each image  is displayed, which offers a wide range effects that you can achieve.

Animated Images on the iPhone
To achieve a similar effect in an iPhone app, we create a UIImageView and set theanimationImages property to point to an array of images. Not unlike the animated gif, we now have a series of images in which we can control the amount of time to complete one cycle of the images, as well as the repeat count of how many times to cycle through the animation.

To keep the example short, I’ll use only one class, the application delegate. Here is how I’ve defined the delegate class:

@interface animationAppDelegate : NSObject <UIApplicationDelegate>
{
  UIImageView   *animatedImages;
  NSMutableArray *imageArray;
  UIWindow *window;
}

Not much here, the UIImageView, an array to hold the images and the UIWindow for the output.

The code for the implementation of the app delegate follows:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

#import "animationAppDelegate.h"   #define IMAGE_COUNT 36 #define IMAGE_WIDTH 240 #define IMAGE_HEIGHT 180 #define STATUS_BAR_HEIGHT 20 #define SCREEN_HEIGHT 460 #define SCREEN_WIDTH 320   @implementation animationAppDelegate   @synthesize window;   - (void)stopAnimation { [animatedImages stopAnimating]; }   - (void)applicationDidFinishLaunching:(UIApplication *)application { window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];   // Array to hold jpg images imageArray = [[NSMutableArray alloc] initWithCapacity:IMAGE_COUNT];   // Build array of images, cycling through image names for (int i = 0; i < IMAGE_COUNT; i++) [imageArray addObject:[UIImage imageNamed: [NSString stringWithFormat:@"Frame_%d.jpg", i]]];   // Animated images - centered on screen animatedImages = [[UIImageView alloc] initWithFrame:CGRectMake( (SCREEN_WIDTH / 2) - (IMAGE_WIDTH / 2), (SCREEN_HEIGHT / 2) - (IMAGE_HEIGHT / 2) + STATUS_BAR_HEIGHT, IMAGE_WIDTH, IMAGE_HEIGHT)]; animatedImages.animationImages = [NSArray arrayWithArray:imageArray];   // One cycle through all the images takes 1 seconds animatedImages.animationDuration = 1.0;   // Repeat forever animatedImages.animationRepeatCount = 0;   // Add subview and make window visible [window addSubview:animatedImages]; [window makeKeyAndVisible];   // Start it up animatedImages.startAnimating;   // Wait 5 seconds, then stop animation [self performSelector:@selector(stopAnimation) withObject:nil afterDelay:5];   }   - (void)dealloc { [imageArray release]; [animatedImages release]; [window release]; [super dealloc]; }   @end

How it Works
On lines 3 – 5 we define the attributes for the images in the animation. There are a total of 36 images, each is 240 x 180 pixels. On line 22 the array is defined which will hold the images and lines 25 – 27 the images are added to the array. You can decipher from the code that the images I am using have file names in the format: Frame_1.jpg, Frame_2.jpg, Frame_3.jpg, etc.

On lines 30 – 34 we allocate an UIImageView object and configure the frame so the image is centered on the device display. Line 35 sets the animationImages property to the array of images created above.

Line 38 sets the duration for one cycle through all the images. We specify the images are to cycle indefinitely by setting the animationRepeatCount to -1 on line 41.

                                

Porting Animated Gif to iPhone
Not unlike I did for the example above, if you have an animated gif that you would like to use within an iPhone app, it’s as simple as extracting/saving each image inside a gif and using a sequential naming convention. I opened the original gif file and manually saved each frame in the image to a jpg file. There are a number of tools that will do the extraction/saving/renaming for you (search for gif extractor).

With all the images saved as separate file, swap the image attributes in the #define section and update the code on line 27 to match the filename you used for saving each file.

Xcode Project Source Code
Download the Animation Xcode project.

TabBar Controller in iPhone SDK

Tab Bar Controller Tutorial

In this tutorial, you will learn how to create applications with a Tab Bar Controller. Tab Bar Controllers can be seen in iPhone/iPod Touch applications like the Clock.In this tutorial, you will learn how to create applications with a Tab Bar Controller. Tab Bar Controllers can be seen in iPhone/iPod Touch applications like the Clock.

Create a new project by selecting Window-Based Application. Open the Interface Builder by double clicking the MainWindow.xib file and add a Tab Bar Controller from the Library. What you see is a Tab Bar Controller with two Bar Items created for us.

A Tab Bar Item acts as a button by which we switch among different views. As we can see a Tab Bar Item can have a title and a image associated to it. Double click Item 1 and in the attributes builder we can set the title and image for the tab bar item.

To add a image to the project is very simple, select Xcode and click on Project -> Add to Project and select a image. You will see that the image is seen in Xcode.

Organizing Files
It is however not a good practice to store files anywhere. To overcome this problem we can either add a folder to the project or simple create a group to store our images. Create a group does not create a folder in the file system but creates a logical view in Xcode.

Note: This tutorial will not be setting any images to the Tab Bar Items.

Adding a view is very simple, drag and drop the view from the library to the place holder where it says View (above the tab bar items). You can add another view by clicking View Two Tab Bar Item.

Select View One and add a text field and a label. Select the text field and set its placeholder to say “Enter Name”, Type is Name Phone Pad and Return Key as Done. Make sure that “Clear Context Before Drawing” is checked for the text field and the label.

Select View Two and add a label and change its text to View Two.

Now all we have to do is add the tab bar controller to the window. To do this, we need to create a connection from the tab bar controller to the Tab Bar Controller App Delegate. Create an instance variable of type UITabBarController and mark it with IBOutlet so it shows up in the Interface Builder.

In the applicationDidFinishLaunching method, we need to add the tab bar controller as a sub view to the existing window. Your method should look like the following below.

Now open Interface Builder and Select Tab Bar Controller App Delegate and open the connections inspector. Create a connection from the tabBarController variable to the Tab Bar Controller. In Xcode click on Build and Go to see the application running. Clicking on View One and View Two will change the view, notice that we did not have to write this functionality but the Tab Bar Controller makes it possible.

In most iPhone application there is no done/save button and we still need to close the text editor when the user is done typing.

To do this we need to create a connection between the controls defined on view one and the objects created in our application delegate.

Since we declared our instance variables/properties in the delegate file, the objects in the Interface Builder will be present in the TabBarController App Delegate file and not in the File’s Owner proxy object. Create appropriate connections and also make a connection from the text field delegate to the TabBarControllerTutorial App Delegate. Implement the textFieldShouldReturn method and one line in there to update the label.

Now you know how to create an application with a TabBarController. Click here to download the source code. 

iPhone App with UINavigation Controller and UIViewController

iPhone Programming Tutorial – Transitioning Between Views

In this tutorial you will learn:

1. Add a New View
2. Add a View Controller
3. SetUp the Transition to the View
4. Connect the View to the Code
5. Add a back Button 

The first thing we are going to do is change our “Hello World” text to say something that sounds more like navigation. Go ahead and open RootViewController.m. Location the cellForRowAtIndexPath method (it’s the one that you edited to display “Hello World” in the table cell.

Change the line: [cell setText:@"Hello World"] ; to [cell setText:@"Next View"];

Add A New View

We will now add the view that we will be transitioning to. Click onRootViewController.xib and this should open up Interface Builder. We don’t actually need to edit this file. Once inside Interface Builder click on File -> Newand select View.

It will add a blank View to your project. For now, we will keep it simple. Go ahead and drag a new Label on to the View. Double click on the label and change the text to whatever you want. I set mine to View 2 (I know, not very imaginative).

                           

Let’s save the view. Click File -> Save. Call it View2. Make sure that you save it inside your Hello World project’s directory. It may want to save it somewhere else by default.

Next, you will see a screen asking you if you want to add the View to your project. Check the box next to Hello World and click Add.

Close Interface Builder. Drag the View2.xib file into the Resources folder, if it didn’t appear there by default (this will help maintain organization).

Add A View Controller

Now we need to create a ViewController class. This class will be used to connect the view that we just created to our code. Inside of Xcode click File -> New File…Select UIViewController subclass and click Next.

Name it View2ViewController and make sure “Also create “View2ViewController.h” “ is checked. Click Finish to continue. This will add the new ViewController to your project.

For organization sake, drag your View2ViewController.h and .m files into theClasses folder if they didn’t appear there to begin with.

Set Up The Transition To The New View

Open up RootViewController.h and add the following code:

This code should be pretty self explanatory, but I will explain it anyway. The import statement #import “View2ViewController.h” gets the header file of theViewController that we created and allows us to create new instances of it.

Next, we declare a variable called view2ViewController which is of the typeView2ViewController. One thing that I want to point out is the first part starts with a capitol “V” which is the type of object that we are declaring. The second part starts with a lower case “v“. This is our variable name that we will use to reference our ViewController object. Finally, we make our variable a property to set additional information.

Now, open up RootViewController.m and add the following code underneath@implementation RootViewController. This creates default “getter” and “setter” methods for our view2ViewController property.

Next find the function didSelectRowAtIndexPath. It may be commented out. If it is, go ahead and uncomment it. This method gets called (automatically) every time a table cell gets tapped. Notice that it takes an indexPath. This will be useful later on when I show you how to populate a UITableView with an NSArray. We will ignore it for now.

Add the following code to the method.

First we check to see if self.view2ViewController is null. This will happen the first time the user presses on the table cell. After this, the viewController gets stored in memory to optimize performance. Next we create a new instance of aView2ViewController and set it to our view2ViewController. Remember to pay attention to a capitol “V” verses a lowercase “v”. After we set this viewController to our viewController, it should be released. Remember, objective-c does not have a garbage collector, so we need to clear all of our unused objects from memory.

Finally, the last line of code is what actually transitions our view to the newly created view. The navigationController object is a stack that contains viewControllers.The view at the top of the stack is the one that gets rendered. So all we are doing is pushing a viewController onto this stack. There last part animated:YES, tells the compiler that we want an animated transition to the next view.

Connect The View To Code

Before this code will execute, we must connect the code that we just wrote to the view we just created. Double click on View2.xib to open it up in Interface Builder. We need to associate our View2ViewController class object with the view so click on the File’s Owner object and then click Tools -> Identity Inspector.

Click the dropdown next to class and select View2ViewController.

Next click anywhere on your view to select it. Click Tools -> Connections Inspector. Click in the circle next to New Referencing Outlet, drag it to theFile’s Owner object and release it. The word view will popup. Go ahead and click on it.

Close Interface Builder. You can now click Build and Go. When you click on the words “Next View”, you will see the screen transition to your new view. There is still one thing missing. There is no back button in the NavigationController at the top. Apple actually adds this for us, but we need to set a title on our main view.

Adding The Back Button

Close the iPhone Simulator and open RootViewController.m. In theviewDidLoad method (gets called when the view is first loaded) add the following code.

Since RootViewController extends Apple’s class UITableViewController, it comes with a title property. You can set this to anything you want. I have set it to the string “Hello”. Now click Build and Go and you are done. Here are a few screenshots.

                      

When you click on “Next View” it should transition to:

                     

Notice the back button at the top with the text “Hello”. If you press it, your view will be popped from the NavigationController stack and the previous view will be shown. If you have any problems/questions/comments post them in the comments. I’m pretty good about answering them as it emails me when you do so and I receive them on my iPhone. If you have any problems, you can download the source code here