CODEWITHSUNDEEP
iosobjective-cuibezierpath
user3219182
user3219182

Reputation: 69

Custom Circle Progress View IOS

I'm trying to create a circular progress view that updates with a timer. I am trying to get 4 sections with different colours. I've managed to update the circle with one colour but I'm having trouble figuring out how to split it into 4 quarter circles. 

@implementation CircularProgressBar
- (void)drawRect:(CGRect)rect
{

    UIBezierPath* bezierPath = [UIBezierPath bezierPath];

    // Create our arc, with the correct angles
    [bezierPath addArcWithCenter:CGPointMake(160, 180)
                          radius:120
                      startAngle:0
                        endAngle: DEGREES_TO_RADIANS(360)
                       clockwise:YES];

    // Set the display for the path, and stroke it
    bezierPath.lineWidth = 12;
    [[UIColor whiteColor] setStroke];
    [bezierPath stroke];

    UIBezierPath* progressPath = [UIBezierPath bezierPath];

    // Create our arc, with the correct angles
    [progressPath addArcWithCenter:CGPointMake(160, 180)
                          radius:120
                      startAngle:-M_PI_2
                        endAngle:-M_PI_2 + (2/M_PI) * self.progress
                       clockwise:YES];

    // Set the display for the path, and stroke it
    progressPath.lineWidth = 12;
    [[UIColor redColor] setStroke];
    [progressPath stroke];

    UIBezierPath* progressPath1 = [UIBezierPath bezierPath];

    // Create our arc, with the correct angles
    [progressPath1 addArcWithCenter:CGPointMake(160, 180)
                            radius:120
                        startAngle:-M_PI_2 + (2/M_PI)
                          endAngle:M_PI_2* self.progress1/
                         clockwise:YES];

    // Set the display for the path, and stroke it
    progressPath1.lineWidth = 12;


    [[UIColor grayColor] setStroke];
        [progressPath1 stroke];

}

-(void)setProgress:(CGFloat)progress {
    //update progress with timer  
    if (progress != _progress) {
        _progress = progress;
        if(progress > 1.1)
            _progress1=_progress;
        [self setNeedsDisplay];
    }

}

Timer Class

-(float) progress {
    return (float)self.count/450.0; 
}

timer is 1800 seconds. Divided by 4 is 450 seconds per section

Upvotes: 3

Views: 9566

Answers (2)

Alexis C.
Alexis C.

Reputation: 4918

I made a small library for this purpose, very flexible with tons of options : https://github.com/kirualex/KAProgressLabel

A simple configuration looks like this :

[self.pLabel setTrackWidth: 2.0];
[self.pLabel setProgressWidth: 4];
self.pLabel.fillColor = [[UIColor lightGrayColor] colorWithAlphaComponent:.3];
self.pLabel.trackColor = self.startSlider.tintColor;
self.pLabel.progressColor = [UIColor greenColor];

Upvotes: 4

AppleDelegate
AppleDelegate

Reputation: 4249

You can download useful and very easy to embedd types of progressview on the link http://code4app.net/category/progress

Upvotes: 2

Related Questions