Create custom activity indicator for your iPhone App

Published on September 1, 2009 by Andreas in I talk code and iPhone OS. 8 Comments Tags: , , .

Have you ever dreamed of your own custom activity indicator within your iPhone App? The class UIImageView provides a very useful and simple way to implement such a thing. The only thing you have to do is to:

  • Provide a number of images that reflect your indicator animation.
  • Create a new UIImageView instance and set images and animation duration.
  • Position your custom activity indicator within your current view.

To demonstrate the whole process I quickly created some images (I am sure you will style them better than me) which will serve for our animation.

status1status2status3.. I think you got it … status8 createscustom status indicator

So the images are prepared and now we can go to the next step and create the animation of our custom activity indicator somewhere i.e. in your current view controller. The code you need should look like the following.

//Create the first status image and the indicator view
UIImage *statusImage = [UIImage imageNamed:@"status1.png"];
UIImageView *activityImageView = [[UIImageView alloc] 
				initWithImage:statusImage];
 
 
//Add more images which will be used for the animation
activityImageView.animationImages = [NSArray arrayWithObjects:
			[UIImage imageNamed:@"status1.png"],
			[UIImage imageNamed:@"status2.png"],
			[UIImage imageNamed:@"status3.png"],
			[UIImage imageNamed:@"status4.png"],
			[UIImage imageNamed:@"status5.png"],
			[UIImage imageNamed:@"status6.png"],
			[UIImage imageNamed:@"status7.png"],
			[UIImage imageNamed:@"status8.png"],
			nil];
 
 
//Set the duration of the animation (play with it
//until it looks nice for you)
activityImageView.animationDuration = 0.8;
 
 
//Position the activity image view somewhere in 
//the middle of your current view
activityImageView.frame = CGRectMake(
			self.view.frame.size.width/2
				-statusImage.size.width/2, 
			self.view.frame.size.height/2
				-statusImage.size.height/2, 
			statusImage.size.width, 
			statusImage.size.height);
 
//Start the animation
[activityImageView startAnimating];
 
 
//Add your custom activity indicator to your current view
[self.view addSubview:activityImageView];

As I mentioned within a code annotation, try to play arround with the duration of the animation so it fits for you. Basically thats all you have to do. For more information look at the documentation of UIImageView. There you will find some more useful methods like stopAnimating or isAnimating and you are also able to add images for an animation if the view is highlighted with the property highlightedAnimationImages.

So far thats all I wanna say and I hope it will help you somehow or other,
Andreas

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

8 Responses to “Create custom activity indicator for your iPhone App”

Feed for this Entry Trackback Address

Leave a Reply