Last time I wrote about MDRadialProgress I promised some technical documentation, well here are some examples to make you started with this component:
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.
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;
progressTotalrepresents the total number of steps in the view.
progressCounterkeep 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.
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];
themeproperty 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
radialView.theme.incompletedColor = [UIColor clearColor];
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;
progressCounterin 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;
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 *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];