Question

I have this Objective-C code that I found somewhere. Honestly, I don’t understand a single thing that is going on down there. I’m not at all familiar with Core Graphics. The code below represents the image on the left. What I want is a similar color gradient to the image on the right (desired color has RGB of 12, 138, 255). Where on earth do I change this code to get the desired result?

- (void)drawRect:(CGRect)rect {

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGSize titleSize = [croppedTitle sizeWithFont:kTokenTitleFont];

    CGRect bounds = CGRectMake(0, 0, titleSize.width + 17, titleSize.height + 5);
    CGRect textBounds = bounds;
    textBounds.origin.x = (bounds.size.width - titleSize.width) / 2;
    textBounds.origin.y += 4;

    CGFloat arcValue = (bounds.size.height / 2) + 1;

    CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
    CGPoint endPoint = CGPointMake(1, self.bounds.size.height + 10);

    // Draw the outline.
    CGContextSaveGState(context);
    CGContextBeginPath(context);
    CGContextAddArc(context, arcValue, arcValue, arcValue, (M_PI / 2), (3 * M_PI / 2), NO);
    CGContextAddArc(context, bounds.size.width - arcValue, arcValue, arcValue, 3 * M_PI / 2, M_PI / 2, NO);
    CGContextClosePath(context);

    CGFloat red = 1;
    CGFloat green = 1;
    CGFloat blue = 1;
    CGFloat alpha = 1;
    [tintColor ti_getRed:&red green:&green blue:&blue alpha:&alpha];

    if (highlighted){
        // highlighted outline color
        CGContextSetFillColor(context, (CGFloat[8]){red, green, blue, 1});
        CGContextFillPath(context);
        CGContextRestoreGState(context);
    }
    else
    {
        CGContextClip(context);
        CGFloat locations[2] = {0, 0.95};
        // unhighlighted outline color
        CGFloat components[8] = {red + .2, green +.2, blue +.2, alpha, red, green, blue, alpha};
        CGGradientRef gradient = CGGradientCreateWithColorComponents(colorspace, components, locations, 2);
        CGContextDrawLinearGradient(context, gradient, CGPointZero, endPoint, 0);
        CGGradientRelease(gradient);
        CGContextRestoreGState(context);
    }

    // Draw a white background so we can use alpha to lighten the inner gradient
    CGContextSaveGState(context);
    CGContextBeginPath(context);
    CGContextAddArc(context, arcValue, arcValue, (bounds.size.height / 2), (M_PI / 2) , (3 * M_PI / 2), NO);
    CGContextAddArc(context, bounds.size.width - arcValue, arcValue, arcValue - 1, (3 * M_PI / 2), (M_PI / 2), NO);
    CGContextClosePath(context);
    CGContextSetFillColor(context, (CGFloat[8]){1, 1, 1, 1});
    CGContextFillPath(context);
    CGContextRestoreGState(context);

    // Draw the inner gradient.
    CGContextSaveGState(context);
    CGContextBeginPath(context);
    CGContextAddArc(context, arcValue, arcValue, (bounds.size.height / 2), (M_PI / 2) , (3 * M_PI / 2), NO);
    CGContextAddArc(context, bounds.size.width - arcValue, arcValue, arcValue - 1, (3 * M_PI / 2), (M_PI / 2), NO);
    CGContextClosePath(context);


    CGContextClip(context);

    CGFloat locations[2] = {0, highlighted ? 0.8 : 0.4};
    CGFloat highlightedComp[8] = {red, green, blue, .6, red, green, blue, 1};
    CGFloat nonHighlightedComp[8] = {red, green, blue, .2, red, green, blue, .4};


    CGGradientRef gradient = CGGradientCreateWithColorComponents (colorspace, highlighted ? highlightedComp : nonHighlightedComp, locations, 2);
    CGContextDrawLinearGradient(context, gradient, CGPointZero, endPoint, 0);
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorspace);

    [(highlighted ? [UIColor whiteColor] : [UIColor blackColor]) set];
    [croppedTitle drawInRect:textBounds withFont:kTokenTitleFont];

    CGContextRestoreGState(context);
}

- (BOOL)ti_getRed:(CGFloat *)red green:(CGFloat *)green blue:(CGFloat *)blue alpha:(CGFloat *)alpha {

    CGColorSpaceModel colorSpaceModel = CGColorSpaceGetModel(CGColorGetColorSpace(self.CGColor));
    const CGFloat * components = CGColorGetComponents(self.CGColor);

    if (colorSpaceModel == kCGColorSpaceModelMonochrome){

        if (red) *red = components[0];
        if (green) *green = components[0];
        if (blue) *blue = components[0];
        if (alpha) *alpha = components[1];
        return YES;
    }

    if (colorSpaceModel == kCGColorSpaceModelRGB){

        if (red) *red = components[0];
        if (green) *green = components[1];
        if (blue) *blue = components[2];
        if (alpha) *alpha = components[3];
        return YES;
    }

    return NO;
}

Answer 1

You can use the following code to draw a gradient. Put it inside your drawRect: function.

CGContextRef ref = UIGraphicsGetCurrentContext();

UIColor *lightGradientColor = [UIColor colorWithRed:0.8 green:0.8 blue:0.8 alpha:1.0];
UIColor *darkGradientColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:1.0];

CGFloat locations[2] = {0.0, 1.0};
CFArrayRef colors = (CFArrayRef) [NSArray arrayWithObjects:(id)lightGradientColor.CGColor,
                                  (id)darkGradientColor.CGColor, 
                                  nil];

CGColorSpaceRef colorSpc = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColors(colorSpc, colors, locations);

CGContextDrawLinearGradient(ref, gradient, CGPointMake(0.5, 0.0), CGPointMake(0.5, 100.0), kCGGradientDrawsAfterEndLocation); //Adjust second point according to your view height

CGColorSpaceRelease(colorSpc);
CGGradientRelease(gradient);