iOS Developer Library

Developer

iOS 7 Design Resources UIKit User Interface Catalog

Download PDF

Progress Views

A progress view is used to illustrate the progress of a task over time in an app. You use a progress view to let the user know how long until an operation completes, such as a download. The Mail app uses progress views in several different situations, including when it’s downloading new messages or sending an outgoing message.

image: ../Art/uiprogressview_intro_2x.png

Purpose. Progress views allow users to:

  • Receive feedback on a loading operation.

  • See an estimate of how much time is left until a task finishes.

Implementation. Progress views are implemented in the UIProgressView class and discussed in the UIProgressView Class Reference.

Configuration. Configure progress views in Interface Builder, in the Progress View section of the Attributes Inspector. A few configurations cannot be made through the Attributes Inspector, so you must make them programmatically. You can set other configurations programmatically, too, if you prefer.

image: ../Art/uiprogressview_attributes_inspector_plain_2x.png

Content of Progress Views

You can set the initial progress as a float between 0 and 1 by using the Progress (progress) field in the Attributes Inspector. You can also do this programmatically using the setProgress:animated: method without animation. This is typically done in the viewDidLoad method of the view controller.

image: ../Art/uiprogressview_attributes_inspector_main_2x.png

If the progress view is visible, use animation when you update the progress.

Behavior of Progress Views

You cannot configure the behavior of progress views.

Appearance of Progress Views

You can customize the appearance of a progress view by setting the properties depicted below.

image: ../Art/uiprogressview_callouts.png

To customize the appearance of all progress views in your app, use the appearance proxy (for example, [UIProgressView appearance]). For more information about appearance proxies, see Appearance Proxies.

Style

image: ../Art/uiprogressview_attributes_inspector_main_2x.png

With progress views, you have two style options: default and bar. You can specify either value by using the Style (progressViewStyle) field. There is no difference in functionality, only in appearance. The Default style has blue-tinted progress and a gray track; the Bar style is a thinner version of the default.

image: ../Art/uiprogressview2_callouts_2x.png

Tint Color

You can adjust the tint of two parts of the progress view: the track and the progress. The track tint applies to the area of the track that is not filled, while the progress tint applies to the portion of the progress bar that is filled. Use the Track Tint (trackTintColor) and Progress Tint (progressTintColor) fields to set custom colors for the track and progress. You can adjust the tint for either style of the progress view.

image: ../Art/uiprogressview_attributes_inspector_main_2x.png

Using Auto Layout with Progress Views

You can create Auto Layout constraints between a progress view and other user interface elements. You can create any type of constraint for a progress view besides a baseline constraint.

To keep a progress view centered and adjust its width according to device orientation or screen size, you can use Auto Layout to pin it to its superview. Using the Auto Layout Pin menu, create Leading Space to Superview and Trailing Space to Superview constraints and set their values equal to each other. Doing this ensures that the endpoints of your progress view are a specified distance from the edges of its superview. With these constraints, the progress view stays centered and its width adjusts automatically for different device orientations and screen sizes.

For general information about using Auto Layout with iOS views, see Using Auto Layout with Views.

Making Progress Views Accessible

Progress views are accessible by default. The default accessibility traits for a progress view are Updates Frequently and User Interaction Enabled. The Updates Frequently accessibility trait means that the progress view doesn't send update notifications when its state changes. This trait tells an assistive app that it should poll for changes in the progress view when necessary.

For general information about making iOS views accessible, see Making Views Accessible.

Internationalizing Progress Views

Progress views have no special properties related to internationalization. However, if you use a progress view with a label, make sure you provide localized strings for the label.

For more information, see Internationalization Programming Topics.

Elements Similar to a Progress View

The following element provides similar functionality to a progress view:

Activity Indicator View. For an indeterminate progress indicator—or, informally, a “spinner”—use an activity indicator view. For more information, see Activity Indicators.