Progress view

Progress view is a linear progress indicator that implements Material Design animation and layout.

Design & API documentation

Related components

Contents

• Overview
• Installation
  • Installation with CocoaPods
  • Importing
• Usage
  • Typical use
• Differences From UIProgressView
• Accessibility
  • MDCProgressView

Overview

The MDCProgressView control is designed to be a drop-in replacement for UIProgressView. The API methods are the same as a UIProgressView, with the addition of a few key methods required to achieve the desired animation of the control.

Installation

Installation with CocoaPods

Add the following to your Podfile:

pod 'MaterialComponents/ProgressView'

Then, run the following command:

pod install

Importing

To import the component:

Swift

import MaterialComponents.MaterialProgressView

Objective-C

#import "MaterialProgressView.h"

Usage

Typical use

Add the progress view to your view hierarchy like you would with any other view.

NOTE: We recommend adding the progress view to the bottom of a view.

Step 1: Add the progress view to a view

Add the progress view to a view and set the desired progress and hidden state.

Swift

let progressView = MDCProgressView()
progressView.progress = 0

let progressViewHeight = CGFloat(2)
progressView.frame = CGRect(x: 0, y: view.bounds.height - progressViewHeight, width: view.bounds.width, height: progressViewHeight)
view.addSubview(progressView)

Objective-C

@property(nonatomic) MDCProgressView *progressView;
...

// Progress view configuration.
self.progressView = [[MDCProgressView alloc] initWithFrame:myframe];
self.progressView.progress = 0;  // You can also set a greater progress for actions already started.
[self.view addSubview:self.progressView];

Step 2: Change the progress and hidden state

Both the progress and the hidden state can be animated, with a completion block.

Swift

func startAndShowProgressView() {
  progressView.progress = 0
  progressView.setHidden(false, animated: true)
}

func completeAndHideProgressView() {
  progressView.setProgress(1, animated: true) { (finished) in
    self.progressView.setHidden(true, animated: true)
  }
}

Objective-C

- (void)startAndShowProgressView {
  self.progressView.progress = 0;
  [self.progressView setHidden:NO animated:YES completion:nil];
}

- (void)completeAndHideProgressView {
  __weak __typeof__(self) weakSelf = self;
  [self.progressView setProgress:1 animated:YES completion:^(BOOL finished){
    [weakSelf.progressView setHidden:YES animated:YES completion:nil];
  }];
}

Differences From UIProgressView

This progress view provides an animation effect when showing and hiding it: it grows up (resp. shrinks down). Additionally, all animated changes APIs take an optional completion block, to synchronize multistep animations.

Accessibility

MDCProgressView

-accessibilityValue

Like UIProgressView, MDCProgressView‘s accessibilityValue is based on the current value of the ProgressView’s progress property. Also like UIProgressView, this accessibilityValue takes the form of a whole number percentage. To ensure the same behavior between the two classes, the MDCProgressView class has a static UIProgressView that instances query for its accessibilityValue whenever they need to provide their own.

The ProgressView announces a new accessibilityValue whenever its progress changes if VoiceOver is on.