How can I draw nested radial gradients on iOS?

Question

I'm developing an iOS 5.0+ app with latest SDK.

I want to do something similar to

I want to know how to nest radial gradients.

This is my code now:

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context
{
    _innerColor = [UIColor yellowColor];
    _outerColor = [UIColor redColor];

    CGContextSetAllowsAntialiasing(context, true);
    CGContextSetShouldAntialias(context, true);
    
    CGFloat graWidth = layer.frame.size.width / 2;
    CGFloat graHeight = layer.frame.size.height / 2;

    CGFloat firstGlossLocation = 0.0f;
    CGFloat outterPercent = 0.0f;
    
    if (_isUnSelected)
    {
        firstGlossLocation = 0.7f;
        outterPercent = graWidth * 0.0f;
    }
    else
    {
        firstGlossLocation = 0.0f;
        outterPercent = graWidth * 0.25f;
    }
    
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    
    CGFloat iRed = 0.0, iGreen = 0.0, iBlue = 0.0, iAlpha =0.0;
    [_innerColor getRed:&iRed green:&iGreen blue:&iBlue alpha:&iAlpha];
    
    CGFloat oRed = 0.0, oGreen = 0.0, oBlue = 0.0, oAlpha =0.0;
    [_outerColor getRed:&oRed green:&oGreen blue:&oBlue alpha:&oAlpha];
    
    CGFloat gradientColors[] = {
        oRed, oGreen, oBlue, oAlpha,
        iRed, iGreen, iBlue, iAlpha
    };
    
    // We have to change first value when user taps over the Guage.
    // The second one must one to fill the entire Gauge.
    CGFloat glossLocations[] = {firstGlossLocation, 1};
    CGGradientRef ballGradient = CGGradientCreateWithColorComponents(colorSpace, gradientColors, glossLocations, 2);
    
    CGContextAddEllipseInRect(context, CGRectMake(0, 0, graWidth*2, graHeight*2));
    CGContextClip(context);
    
    CGPoint startPoint = CGPointMake(graWidth, graHeight);
    CGPoint endPoint = CGPointMake(graWidth, graHeight);
    CGContextDrawRadialGradient(context, ballGradient, startPoint, 0, endPoint, graWidth - outterPercent, kCGGradientDrawsAfterEndLocation);
    CGContextDrawPath(context, kCGPathStroke);
}

I want to draw a second gradient when _isUnSelected is NO.

Do you know how can I draw a second nested gradient?

Answer 1

You do not need a "second nested gradient" in order to draw the gradient shown in your illustration. That is one gradient. A gradient can have multiple colors at multiple locations, and that is what we are seeing in that illustration. It appears to have four colors/points.

So, when the drawing needs to change, just replace the first gradient (your simple two-point gradient) with the second gradient (with four colors/points) and vice versa.