Fill Circular Ring with gradient color according to percentage.

Question

Looking for a solution of my problem where I have to fill a color in ring. I am able to fill a color in ring with my code but there is some problem I am facing With this code I am not able to find How do I fill desire amount of color in circle i.e. 20%, 40%, 70% etc. When I give gradient color its not as shown in the image. Code I am using: ``` int radius = 130; CAShapeLayer *arc = [CAShapeLayer layer]; arc.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100,0) radius:radius startAngle:39.8 endAngle:19.9 clockwise:YES].CGPath; arc.position = CGPointMake(CGRectGetMidX(self.frame)-radius, CGRectGetMidY(self.frame)-radius); arc.fillColor = [UIColor clearColor].CGColor; arc.strokeColor = [UIColor redColor].CGColor; arc.lineWidth = 25; CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; drawAnimation.duration = 5.0; // "animate over 10 seconds or so.." drawAnimation.repeatCount = 1.0; // Animate only once.. drawAnimation.removedOnCompletion = NO…

Accepted Answer

To fill an amount of the circle with color, you have to draw an outline on top of the filled layer and clip only the filled layer.

In order to make the gradient follow the circle, you will have to divide it into multiple gradients that are piecewise linear. since the graphic you have provided already has some segments with outlines, we can use these outlines to hide any imperfections from joining different gradients.

I made an example how this could work, if you want to have more control of the colors, you can set them for every segment in `CircleGradientLayer`. Control the drawn progress by setting the `progress` property of `CircleProgressView`.

Drawing the outlines could be done easier with two circles and some lines if you see my answer here: https://stackoverflow.com/a/24580817/3659846 but while writing this code, copy&pasting was faster ;)

nothing special in the .h files just insert what the compiler wants to have, I'm posting only the .m here:

CircleProgressView

```
@implementation CircleProgressView{
    CircleGradientLayer *_gradientLayer;
    CircleOutlineLayer *_outlineLayer;
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor clearColor];

int numSegments = 7;
        CGFloat circleRadius = 130;
        CGFloat circleWidth = 30;

NSDictionary *circleData = @{
                                    @"numberOfSegments":@(numSegments),
                                    @"circleRadius":@(circleRadius),
                                    @"circleWidth":@(circleWidth)
                                    };

_gradientLayer = [CircleGradientLayer layer];
        _gradientLayer.contentsScale = 2;
        _gradientLayer.frame = self.bounds;
        [_gradientLayer setCircleData:circleData];
        [_gradientLayer setNeedsDisplay];
        [self.layer addSublayer:_gradientLayer];

_outlineLayer = [CircleOutlineLayer layer];
        _outlineLayer.frame = self.bounds;
        _outlineLayer.contentsScale = 2;
        [_outlineLayer setCircleData:circleData];
        [_outlineLayer setNeedsDisplay];
        [self.layer addSublayer:_outlineLayer];

self.progress = 1;
    }
    return self;
}

- (void)setProgress:(CGFloat)progress{
    _progress = MAX(0, MIN(1, progress));
    _gradientLayer.progress = progress;
}

@end
```

CircleGradientLayer

```
@implementation CircleGradientLayer{
    int _numSegments;
    CGFloat _circleRadius;
    CGFloat _circleWidth;

CAShapeLayer *_maskLayer;
}

+(id)layer{
    CircleGradientLayer *layer = [[CircleGradientLayer alloc] init];
    return layer;
}

-(void)setCircleData:(NSDictionary*)data{
    _numSegments = [data[@"numberOfSegments"] intValue];
    _circleRadius = [data[@"circleRadius"] doubleValue];
    _circleWidth = [data[@"circleWidth"] doubleValue];

[self createMask];
}

- (void)createMask{
    _maskLayer = [CAShapeLayer layer];
    _maskLayer.frame = self.bounds;

CGFloat angleStep = 2*M_PI/(_numSegments+1);
    CGFloat startAngle = angleStep/2 + M_PI_2;
    CGFloat endAngle = startAngle+_numSegments*angleStep+0.005; //add a bit that the outline is not clipped

_maskLayer.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds)) radius:_circleRadius startAngle:startAngle endAngle:endAngle clockwise:YES].CGPath;
    _maskLayer.fillColor = [UIColor clearColor].CGColor;
    _maskLayer.strokeColor = [UIColor redColor].CGColor;
    _maskLayer.lineWidth = 2*_circleWidth+2; //stroke is centered -> *2 to cover all

self.mask = _maskLayer;
}

- (void)setProgress:(CGFloat)progress{
    _progress = MAX(0, MIN(1, progress));
    _maskLayer.strokeEnd = _progress;
}

-(void)drawInContext:(CGContextRef)ctx{
   // would get better gradient joints by not using antialias, but since they are hidden, it is not needed to adjust it     
   // CGContextSetAllowsAntialiasing(ctx, NO);

UIGraphicsPushContext(ctx);

//some values to adjust the circle
    UIColor *startColor = [UIColor colorWithRed:1 green:0 blue:21/255. alpha:1];
    UIColor *endColor = [UIColor colorWithRed:0 green:180/255. blue:35/255. alpha:1];

CGPoint centerPoint = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));

//calculate startAngle and the increment between segements
    CGFloat angleStep = 2*M_PI/(_numSegments+1);
    CGFloat startAngle = angleStep/2 + M_PI_2;

//convert colors to hsv
    CGFloat startHue,startSat,startBrightness,startAlpha;
    CGFloat endHue,endSat,endBrightness,endAlpha;
    [startColor getHue:&startHue saturation:&startSat brightness:&startBrightness alpha:&startAlpha];
    [endColor getHue:&endHue saturation:&endSat brightness:&endBrightness alpha:&endAlpha];
    if(endHue<startHue)
        endHue+=1;

//draw the segments
    for(int i=0;i<_numSegments;i++){
        //calcualte segment startColor
        CGFloat hue = startHue+((endHue-startHue…

Fill Circular Ring with gradient color according to percentage.

Solution

Problem