Styling the IGProgressView
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic provides an introduction to styling the IGProgressView™ control.

In this topic

This topic contains the following sections:


Introduction

Styling summary

Styling allows you to change the appearance of a control simply by manipulating a few properties. Use one of the properties listed in the table below or the exposed CAShapeLayer properties to style the IGProgressView. More information about the exposed shape layers can be found in the Advanced Styling section of this topic.

Property Name

Description

Preview

progressTintColor

The color used to fill the portion of the progress bar filled using the progress property. In the preview image, the progressTintColor is set to green.

progressTrackTintColor

The color used to fill the portion of the progress bar not filled using the progress property. In the preview image, the progressTrackTintColor is set to light gray.

radialContentView

The view placed into the center of the IGProgressViewStyleRadial and IGProgressViewStyleRadialIndeterminate progress styles. In the preview image, the radialContentView is set to a UILabel instance containing the current progress percentage.

radialInsertScale

The size of the IGProgressViewStyleRadial and IGProgressViewStyleRadialIndeterminate progress style’s insert. In the preview image, the radialInsertScale is set to 0.45, which is 45% of the width the insert can extend.

radialInsertTintColor

The color shown for the insert portion of the IGProgressViewStyleRadial and IGProgressViewStyleRadialIndeterminate progress styles. In the preview image, the radialInsertTintColor is set to light gray.

standardCornerRadius

The radius used when drawing rounded corners for the IGProgressViewStyleStandard and IGProgressViewStyleStandardIndeterminate progress styles. In the preview image, the standardCornerRadius is set to 0.0.



Advanced Styling

Advanced styling summary

The IGProgressView exposes 3 properties that are of the type CAShapeLayer.

  • progressShapeLayer
  • progressTrackShapeLayer
  • radialInsertShapeLayer

The control uses the progressShapeLayer and progressTrackShapeLayer to create each progress type and uses the radialInsertShapeLayer for rendering the circle shape found in the IGProgressViewStyleRadial and IGProgressViewStyleRadialIndeterminate progress types. The most common CAShapeLayers’ styling properties are shown below; please consult with the Apple CAShapeLayer Class Reference documentation to learn more about these and other properties.

  • fillColor – The fill color is the background color
  • lineWidth –The width of the stroke bordering the CAShapeLayer
  • strokeColor – The color of the stroke

Related Content

Topics

The following topic provides additional information related to this topic.

Topic

Purpose

The topics in this group cover enabling, configuring, and using the IGProgressView control’s supported features.