Implement drawing gradient arc with CAShapeLayer - ios

Question

Referring to the accepted answer found here I'm trying to implement this and running into an issue with the path of the CAShapeLayerThe code I have is as follows:
-(void)drawGradientArc{
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
CAShapeLayer *circleLayer = [CAShapeLayer new];
circleLayer.lineWidth = 25;
circleLayer.fillColor = [UIColor clearColor].CGColor;
circleLayer.strokeColor = [UIColor redColor].CGColor;
CGFloat radius = 150;
[bezierPath addArcWithCenter:self.view.center radius:radius startAngle:0 endAngle:M_PI clockwise:YES];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.startPoint = CGPointMake(0,0);
gradientLayer.endPoint = CGPointMake(1,0);
NSMutableArray *colors = [NSMutableArray array];
for (int i = 0; i < 10; i++) {
[colors addObject:(id)[[UIColor colorWithHue:(0.1 * i) saturation:1 brightness:.8 alpha:1] CGColor]];
}
gradientLayer.colors = colors;
[gradientLayer setMask:circleLayer];
circleLayer.path = bezierPath.CGPath;
[self.view.layer addSublayer:circleLayer];
}
This will draw the half circle arc correctly but the path for the gradients is not being set correctly and I was unable to piece together how exactly to configure the code to get this to work using a gradient. There is a CGPathCreateCopyByStrokingPath that I think I may also need to call to set the path properly for the gradient but was not quite sure how. Any help on how to structure the code to get this working would be appreciated. I've also included an image of the gradient that I'm trying to reproduce. a CAShapeLayer and CAGradientLayerapproach would be ideal.

Answer 1

Problem 1: Your layers have no frames. Add this:
gradientLayer.frame = self.view.layer.bounds;
circleLayer.frame = gradientLayer.bounds;
Problem 2: You are adding the wrong layer to your view's layer. Where you have:
[self.view.layer addSublayer:circleLayer];
say this instead:
[self.view.layer addSublayer:gradientLayer];
Result: