cylindrical look Gradient in UIView

Question

I want to draw bar with a cylindrical look and with shadow effect(As shown in the below image). Can some one help to define Linear Gradient for below look and feel.

Code:

-(void)drawRect:(CGRect)rect {
    //UIview Back color is red or green
    CGGradientRef   glossGradient;
    CGColorSpaceRef rgbColorspace;
    CGContextRef    currentContext  = UIGraphicsGetCurrentContext();
    size_t          num_locations   = 4;
    CGFloat locations[4]            = { 0.0,0.7,0.9,1.0 };

    CGFloat components[16]          = { 0.0, 0.0, 0.0, 0.01,
                                        0.0, 0.0, 0.0, 0.1,
                                        0.0, 0.0, 0.0, 0.2,
                                        0.0, 0.0, 0.0, 0.5 
                                      };


    rgbColorspace        = CGColorSpaceCreateDeviceRGB();
    glossGradient        = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);

    CGRect currentBounds = self.bounds;
    CGPoint topCenter    = CGPointMake(CGRectGetMidX(currentBounds), 0.0f);
    CGPoint midCenter    = CGPointMake(CGRectGetMidX(currentBounds), currentBounds.size.height);

    CGContextDrawLinearGradient(currentContext, glossGradient, topCenter, midCenter, 0);
    CGGradientRelease(glossGradient);
    CGColorSpaceRelease(rgbColorspace); 
}

Answer 1

Here's a general purpose gradient maker:

    CGGradientRef makeGradient2(NSArray *colors, CGFloat *stops)
    {
        size_t nc = 4;
        NSInteger colorSize = nc * sizeof(CGFloat);
        CGFloat *theComponents = malloc( [colors count] * colorSize );
        CGFloat *compPtr = theComponents;

        for (int i=0; i < colors.count; i++){
            UIColor *color = [colors objectAtIndex:i];
            CGColorRef cgColor = [color CGColor];
            const CGFloat *components = CGColorGetComponents(cgColor);

            memmove(compPtr, components, colorSize);
            compPtr += nc;
        }
        CGColorSpaceRef cs = CGColorSpaceCreateDeviceRGB();
        CGGradientRef gradient = CGGradientCreateWithColorComponents (cs, theComponents, stops, colors.count);
        CGColorSpaceRelease(cs);
        free(theComponents);

        return gradient;
    }

call it like (this creates a three part gray gradient with lightest in the middle)

    CGFloat stops[] = { 0.0, 0.5, 1.0};
    gradient = makeGradient2([NSArray arrayWithObjects:
                               [UIColor colorWithRed:.2 green:.2 blue:.2 alpha:1.0],
                               [UIColor colorWithRed:.5 green:.5 blue:.5 alpha:1.0],
                               [UIColor colorWithRed:.2 green:.2 blue:.2 alpha:1.0],
                               nil], stops);

and then you can draw with it like (for a left to right gradient):

    CGContextDrawLinearGradient(gc, gradient, CGPointMake(0.0, 0.0), CGPointMake(rect.size.width, 0.0), 0);