MDRadialProgress Examples

Posted by Marco Dinacci on 0 comments

I dropped by 50% the non-attribution licenses for my MDRadialProgress component until the end of next week, go get one !

MDRadialProgress is an Open Source iOS UIView that allows to represent progress in discrete steps. It is useful in those circumstances where you have a task or anything else that has a fixed number of steps and you want to represent the progress.

Last time I wrote about MDRadialProgress I promised some technical documentation, well here are some examples to make you started with this component:

Setup

First, let's prepare the view and create a frame that will contain the progress view:

self.view.backgroundColor = [UIColor whiteColor];	
CGRect frame = CGRectMake(self.view.center.x - 100, self.view.center.y - 100, 200, 200);
MDRadialProgressView *radialView = [self progressViewWithFrame:frame];
[self.view addSubview:radialView];

That's it, we just created a 200x200 frame and set its coordinates in order for our view to appear centered. We also added it to our main view. That wasn't too hard.


Basic View

Let's start with the most basic view you can possibly make. To the code you've written above, add:

radialView.progressTotal = 7;
radialView.progressCounter = 5;
progressTotal represents the total number of steps in the view. progressCounter keep track of the number of the steps completed. By default, completed progress is represented in green, uncompleted progress in light gray. You can also see that there's a divider between each slice, which has the same colour as the center color (in this case white) and that there's a number in the middle, which represents the completion percentage.


Changing colors

Let's say you want to change the colours, to make the component fits better into your UI.

radialView.theme.incompletedColor = [UIColor colorWithRed:0.15 green:0.3 blue:0.45 alpha:0.4];
radialView.theme.completedColor = [UIColor colorWithRed:0.15 green:0.3 blue:0.45 alpha:1.0];
As you can see, we're actually using the same colour, just with a different alpha value. You don't have to use the same color though. You may be asking yourself, what's the theme property all about ? We'll see that later, for the moment just know that you may want to have multiple radial views on the same screen sharing the same colours and settings. A theme encapsulate those settings.


Showing/hiding percentage and slice dividers

You may not want to show the percentage label in the middle of the view, fair enough, let's just hide it:

radialView.label.hidden = YES;

(This should be part of the theme too, it will probably change in the next release). Also, let's hide the slice dividers so that the progress look like a single uninterrupted arc.

radialView.theme.sliceDividerHidden = YES;


Hiding more stuff

Is the incompleted arc really worth showing ? That's up to you, but in case you want to hide it and show only the progress done, you can, just set its color to clearColor:

radialView.theme.incompletedColor = [UIColor clearColor];
The progress now looks smoother, with no interruptions.




Changing the center color

It might not be very pretty in this example, but you can change the center color yoo if you want:

radialView.theme.centerColor = [UIColor colorWithRed:0.45 green:0.3 blue:0.15 alpha:0.1];





Changing the starting point and direction

As you certainly noticed, the progress start drawing from 12'clock and proceeds in a clockwise direction. You can change both these settings very easily:

radialView.clockwise = NO;
radialView.startingSlice = 2;
The progressCounter in this picture was set to 3.




Changing divider color and thickness

Until now we haven't changed the "thickness" of the area where the progress is drawn. We also never changed the slice divider color.
This example shows you how to implement these customisations. Since I made a few changes since the original example, I'm showing all the code required to reproduce the picture above:

radialView.progressTotal = 7;
radialView.progressCounter = 3;
radialView.theme.thickness = 60;
radialView.theme.sliceDividerColor = [UIColor colorWithRed:0.80 green:0.80 blue:0.80 alpha:0.6];
radialView.theme.incompletedColor = [UIColor colorWithRed:0.15 green:0.3 blue:0.45 alpha:0.4];
radialView.theme.completedColor = [UIColor colorWithRed:0.15 green:0.3 blue:0.45 alpha:1.0];
radialView.label.hidden = YES;
As you can see, our progress view looks quite different this time.


Themes

The last feature I want to show is themes, which can be used when there are multiple views that must share the same settings. We'll first create a MDRadialProgressTheme object:

MDRadialProgressTheme *newTheme = [[MDRadialProgressTheme alloc] init];
newTheme.completedColor = [UIColor colorWithRed:90/255.0 green:212/255.0 blue:39/255.0 alpha:1.0];
newTheme.incompletedColor = [UIColor colorWithRed:164/255.0 green:231/255.0 blue:134/255.0 alpha:1.0];
newTheme.centerColor = [UIColor clearColor];
newTheme.centerColor = [UIColor colorWithRed:224/255.0 green:248/255.0 blue:216/255.0 alpha:1.0];
newTheme.sliceDividerHidden = YES;
newTheme.labelColor = [UIColor blackColor];
newTheme.labelShadowColor = [UIColor whiteColor];

Then, we'll create 4 radial views and assign the theme to each one of them in the constructor:


int x = 50, y = 50;
CGRect frame = CGRectMake(x, y, 80, 80);
MDRadialProgressView *radialView = [[MDRadialProgressView alloc] initWithFrame:frame andTheme:newTheme];
radialView.progressTotal = 4;
radialView.progressCounter = 1;
[self.view addSubview:radialView];

y += 120;

frame = CGRectMake(x, y, 80, 80);
MDRadialProgressView *radialView2 = [[MDRadialProgressView alloc] initWithFrame:frame andTheme:newTheme];
radialView2.progressTotal = 4;
radialView2.progressCounter = 2;
[self.view addSubview:radialView2];

y += 120;

frame = CGRectMake(x, y, 80, 80);
MDRadialProgressView *radialView3 = [[MDRadialProgressView alloc] initWithFrame:frame andTheme:newTheme];
radialView3.progressTotal = 4;
radialView3.progressCounter = 3;
[self.view addSubview:radialView3];

y += 120;

frame = CGRectMake(x, y, 80, 80);
MDRadialProgressView *radialView4 = [[MDRadialProgressView alloc] initWithFrame:frame andTheme:newTheme];
radialView4.progressTotal = 4;
radialView4.progressCounter = 4;
[self.view addSubview:radialView4];

Done ! Don't forget to grab the source on Github and buy a non-attribution license if you require one.