iOS Circular Progress Bar

iOS Circular Progress Bar

Released 4 years ago , Last update 3 years ago

Simple and easy control to present percentage based information and progression.

The iOS Circular Progress Bar is a great tool to present percentage based information in an elegant and simple way. The default appearance conforms to the flat design and the center space can be personalized with custom views.

Features

  • Customizable center view.
  • Customizable width for line and border.
  • Customizable text label.
  • Customizable background image for filled and unfilled bars.
4.3
  • 5 5
  • 4 0
  • 3 0
  • 2 0
  • 1 1
6 Reviews Read Reviews

Pricing

14 day 14-day money-back guarantee

$4.99

Developer License

  • Perpetual license

  • Unlimited projects

  • Can distribute code and binary products

  • Commercial use

  • 6 months support

Need custom services for this product? Get a quote

Documentation

Properties:

/*
 Defines the duration of the animations.
 */
@property (nonatomic) NSTimeInterval animationDuration;

/*
 Defines weather the animations are enabled.
 */
@property (nonatomic) BOOL animationEnabled;

/*
 Defines the view should animate when is first drawn
 */
@property (nonatomic) BOOL animatesBegining;

//-------------------
/*
 Controlers that contain labels that can show numbers automatically (like the value of an item)
 can use this property to set the number of decimal places shown.
 */
@property (nonatomic) NSInteger decimalPlaces;


/*
 Sets the percentage of the view.
 */
@property (nonatomic) CGFloat percentage;

/*
 Sets the percentage of the view.
 */
@property (nonatomic) CGFloat initialPercentage;

/*
 Defines the border percentage for both filled and unfilled portions.
 */
@property (nonatomic) CGFloat borderPercentage;

/*
 The label of the text in the center of the doughnut.
 */
@property (nonatomic, retain) UILabel *textLabel;

/*
 The color for the filled portion of the doughnut.
 */
@property (nonatomic, retain) UIColor *fillColor;

/*
 The color for the unfilled portion of the doughnut.
 */
@property (nonatomic, retain) UIColor *unfillColor;

/*
 Defines the percentage of the rounded image will overlap the progress
 bars. Useful when using images with shadows.
 */
@property (nonatomic) CGFloat roundedImageOverlapPercentage;

/*
 The color for the border of the filled portion of the doughnut.
 */
@property (nonatomic, retain) UIColor *borderColorForFilledArc;

/*
 The color for the border of the of the unfilled portion of the doughnut.
 */
@property (nonatomic, retain) UIColor *borderColorForUnfilledArc;

/*
 Defines the image for the filled portion of the arc. If this property is set
 the color for the filled portion is ignored.
 */
@property (nonatomic, retain) UIImage *imageForFilledArc;

/*
 Defines the image for the unfilled portion of the arc. If this property is set
 the color for the unfilled portion is ignored.
 */
@property (nonatomic, retain) UIImage *imageForUnfilledArc;

/*
 Defines the image for the rounded background of the doughnut
 */
@property (nonatomic, retain) UIImage *roundedBackgroundImage;

/*
 Defines the image for the rounded background of the doughnut to be used when the
 doughnut is pushed. This image will replace the roundedBackgroundImage while
 the doughnut is being pressed.
 */
@property (nonatomic, retain) UIImage *roundedBackgroundImageForPushedState;

/*
 Defines the first gradient color for the filled segment. The gradient goes from
 gradientColor1 to gradientColor2 and ocuppies 40 degrees of the head of the
 segment. The size of the gradient is calculated by a cos function and it is max
 at 180 degrees and 0 at 0 degrees and 360 degrees.
 The most common use is to set this color to be the same as the fillColor.
 */
@property (nonatomic, strong) UIColor *gradientColor1;

/*
 Defines the second gradient color for the filled segment. The most common use is
 to set this color to be the same as the unfled segment's color.
 */
@property (nonatomic, strong) UIColor *gradientColor2;


/*
 Defines if the control should build a gradient at the head of the filled segment
 */
@property (nonatomic) BOOL enableGradient;

/*
 The percentage of the border of the filled portion of the doughnut.
 If this property is set, it is used for this arc instead of the value set on the borderPercentage property
 1: the full width of the arc is filled with the border.
 0: no border
 */
@property (nonatomic) CGFloat borderPercentageForFilledArc;

/*
 The percentage of the border of the unfilled portion of the doughnut.
 If this property is set, it is used for this arc instead of the value set on the borderPercentage property
 1: the full width of the arc is filled with the border.
 0: no border
 */
@property (nonatomic) CGFloat borderPercentageForUnfilledArc;

/*
 Defines the data source of the percentage doughnut
 */
@property (nonatomic, assign) id<MCPercentageDoughnutViewDataSource>dataSource;

/*
 Defines the delegate of the percentage doughnut
 */
@property (nonatomic, assign) id<MCPercentageDoughnutViewDelegate>delegate;

/*
 Defines the percentage of the doughnut related to the ratios of the doughnut. The ratios
 is defined by the frame of the view.
 1: full doughnut, no central space
 0: no doughnut
 */
@property (nonatomic) CGFloat linePercentage;

/*
 Defines if the text label in the center should appear or not
 */
@property (nonatomic) BOOL showTextLabel;

/*
 Defines if the text label should adjust it's font size automatically based
 on the percentage frame.
 Default: YES
 */
@property (nonatomic) BOOL adjustsFontSizeAutomatically;

/*
 MCPercentageDoughnutViewTextStyleAutomaticShowsPercentage: ignores the value set for the label and
 automatically updates the label based on the value of the percentage property.
 MCPercentageDoughnutViewTextStyleUserDefined: shows the value stored on the textLabel.text property.
 */
@property (nonatomic) MCPercentageDoughnutViewTextStyle textStyle;

/*
 Defines the pacing of the animation. To create a CAMediaTimingFunction object:
 [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

 ----
 Possible function names:
 NSString * const kCAMediaTimingFunctionLinear;
 NSString * const kCAMediaTimingFunctionEaseIn;
 NSString * const kCAMediaTimingFunctionEaseOut;
 NSString * const kCAMediaTimingFunctionEaseInEaseOut;
 NSString * const kCAMediaTimingFunctionDefault;

 As described on the Apple documentation:
 https://developer.apple.com/library/mac/documentation/cocoa/reference/CAMediaTimingFunction_class/Introduction/Introduction.html

 ----
 The default value for this property is nil, which has the same effect as kCAMediaTimingFunctionDefault
 for this control.
 */
@property (nonatomic, strong) CAMediaTimingFunction *animationTimingFuncion;

Methods:

/*
 Causes the control to redraw it self, calling all the data source methods
 to apply the new data.
 */
- (void)reloadData;

/*
 Animates the control
 */
- (void)animate;

Data Source:

/*
 Defines a view to be used in the center of the doughnut instead of the textLabel.
 It`s frame is automatically resized to fit the maximum space available on the center. The corners
 of the view will always touch the doughnut`s border.
 */
- (UIView*)viewForCenterOfPercentageDoughnutView:(MCPercentageDoughnutView*)pecentageDoughnutView
                                  withCenterView:(UIView*)centerView;

Delegate:

/*
 Method called on the delegate method when the percentage doughnut view is touched.
 The touches are only considered on the central layer.
 */
- (void)didSelectPercentageDoughnutView:(MCPercentageDoughnutView*)percentageDoughnut;

Setup / installation

Installation

  1. Add all files from the src folder to your project
  2. Import as usual: #import "MCPercentageDoughnutView.h"
  3. Add QuartzCore.framework to your project

Setup

MCPercentageDoughnutView can be added to your view either from the Interface Builder or through code.

Interface Builder (Xcode 5):

  • Open the Storyboard or Xib file you want to add the pie chart to.
  • Drag a new UIView from the Object Library into your view controller.
  • Resize and position your new UIView as you wish (the pie chart will be drawn on the center of the new UIView).
  • Make sure the new UIView is selected and choose the Identity Inspector tab on Xcode's the Utilities view (on the right).
  • Change the class from UIView to MCPercentageDoughnutView.
  • On the view controller's header file create an IBOutlet property of the type MCPercentageDoughnutView and link it to the object you created on the Interface Builder.

Through Code:

CGRect frame = CGRectMake(x, y, width, height);
MCPercentageDoughnutView *percentageDoughnut = [[MCPercentageDoughnutView alloc] initWithFrame:frame];
[self.view addSubview:percentageDoughnut];

Example usage

self.percentageDoughnut.dataSource = self;
self.percentageDoughnut.linePercentage = 0.02;
self.percentageDoughnut.percentage = 0.5;
self.percentageDoughnut.animatesBegining = NO;
1 license From » $4.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

or Get a quote

for customization or integration services


Or enter your name and Email
  • MA Miskeen Ali 1 year ago
    How to add Swipe Gesture to percentageDoughnut view? i have tried many times not able to add. Kindly any clue please?
    • MA Miskeen Ali 1 year ago
      I can pay for that feature as well.
  • SL Suzanne Lai 2 years ago
    Hi- I bought this dial for our iOS app and I want to see if you sell an Android version or could refer me to someone who does.
  • TC Tim Carr License holderApplication License
    6 month support
    Purchased on Jul 31, 2015
    2 years ago
    Would it be possible for you to add a mode "unknown progress" ? Ie. you are downloading a file but don't know how big it is: you want to show the doughnut circling endlessly, until it is finished. All you'd need to do is have a line segment rotating around the doughnut. Can you add this? Already bought the control before i realized this wasn't there :S