iOS 7 Views - Activity Indicator

An activity indicator is a spinning wheel that indicates a task is being processed. if an action takes an unknown amount of time to process you should display an activity indicator to let the user know your app is not frozen. In this tutorial we will start and stop the spinning animation of the activity indicator.

Update: Sep 15, 2014. The rewritten tutorial in Swift for iOS 8 and Xcode 6 is available here.

Open Xcode and create a new Single View Application. For product name, use iOS7ActivityIndicatorTutorial and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices.

First, let's create the user interface. Go to the Storyboard and select the main view. Go to the Attributes inspector and Add 2 buttons to the main view and Give them a title of start and stop. Next, drag a Activty Indicator to the center of the view. Select the Activity Indicator and go to the Attributes Inspector. Give the Activity Indicator a style of Large White and a color if yellow. This color will override the style attribute. Also select the "Hides when stopped" option.

Open the Assistant Editor and open ViewController.m. Ctrl + drag from the Activity Indicator to the @interface section and create the following outlet.

Ctrl + drag form the start button to the @interface section and create the following IBAction method.

Ctrl + drag form the stop button to the @interface section and create the following IBAction method.

The interface section of ViewController.m should now look like this

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIActivityIndicatorView *activityIndicatorView;

- (IBAction)startSpinning:(UIButton *)sender;
- (IBAction)stopSpinning:(UIButton *)sender;


In the implementation section two stub IBAction methods are created, let's implement these methods.

- (IBAction)startSpinning:(UIButton *)sender {
[self.activityIndicatorView startAnimating];

- (IBAction)stopSpinning:(UIButton *)sender {
[self.activityIndicatorView stopAnimating];

The methods will start and stop the animation of the spinning wheel. When the animation is stopped the activity indicator is automatically hidden from the view. Build and run the project and press the buttons to start and stop the animation.

You can download the source code of the iOS7ActivityIndicatorTutorial at the ioscreator repository on github.