Custom Activity Indicator

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.

post_indicator_status1 post_indicator_status2 post_indicator_status3 post_indicator_status8 = post_indicator_status_finish

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 around 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 .

2 responses to “Custom Activity Indicator”

  1. […] I worked out an example for you, which adds a small UIButton image and a button to the custom Indicator overlay and shows this overlay on the image cheap mlb jerseys picker. In my example I didn’t add […]

Leave a Reply

Your email address will not be published. Required fields are marked *