Question

I am using the following piece of code to create a gradient background for a UITableViewCell. While this works perfectly for a plain table cell, the gradient only appears at the left and right corners of the grouped table cell. It is as if the gradient is applied then, the cell is drawn on top of it.

Can someone suggest a modification to the code, that would work well with grouped table cell? Or is there a completely different way of doing this?

- (void)drawRect:(CGRect)rect {
CGContextRef c = UIGraphicsGetCurrentContext();

CGGradientRef myGradient;
CGColorSpaceRef myColorspace;

size_t num_locations = 2;
CGFloat locations[2] = {0.0, 1.0};
CGFloat components[8] = {0.8f, 0.8f, 0.8f, 1.0f, // Bottom Colour: Red, Green, Blue, Alpha.
    0.9f, 0.9f, 0.9f, 1.0}; // Top Colour: Red, Green, Blue, Alpha.

myColorspace = CGColorSpaceCreateDeviceRGB();
myGradient = CGGradientCreateWithColorComponents (myColorspace, components,
                                                  locations, num_locations);

CGColorSpaceRelease(myColorspace);

CGPoint startPoint, endPoint;
startPoint.x = 0.0;
startPoint.y = self.frame.size.height;
endPoint.x = 0.0;
endPoint.y = 0.0;
CGContextDrawLinearGradient (c, myGradient, startPoint, endPoint, 0);

const CGFloat topSepColor[] = { 0.8f, 0.8f, 0.8f, 1.0f }; // Cell Seperator Colour - Top

CGGradientRelease(myGradient);

CGContextSetStrokeColor(c, topSepColor);

CGContextMoveToPoint(c, 0.0, 0.0);
CGContextSetLineWidth(c, 1.0);
CGContextSetLineCap(c, kCGLineCapRound);
CGContextAddLineToPoint(c, self.frame.size.width, 0.0);
CGContextStrokePath(c);

const CGFloat bottomSepColor[] = { 0.5f, 0.5f, 0.5f, 1.0f }; // Cell Seperator Colour - Bottom
CGContextSetStrokeColor(c, bottomSepColor);

CGContextMoveToPoint(c, 0.0, self.frame.size.height);
CGContextSetLineWidth(c, 1.0);
CGContextSetLineCap(c, kCGLineCapRound);
CGContextAddLineToPoint(c, self.frame.size.width, self.frame.size.height);
CGContextStrokePath(c);

[[UIColor blackColor] set];
}

Thanks for your help.

Answer 1

I don’t understand why people try and write over-complicated drawing routines to render a custom UITableViewCell. Set the value of your cell’s backgroundView and selectedBackgroundView properties to a standard UIImageView with all the borders, bevels, gradients, rounded corners and whatever else you like in an image.

For rounded table views, you would create 4 images; one for the top cell, another for the bottom cell, one for the middle cell, and another for a single cell if your table only has one row.

Matt Gallagher has written a good article on this at Cocoa with Love, titled Easy custom UITableView drawing.