Applying background gradient to a Grouple table cell

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 = UIGraphicsGetCur开发者_开发百科rentContext();

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.

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.

Using custom views for the cell background allows you to fully customise the look of the cell, but might not scale well when the screen orientation is changed. Also, if all you need is a gradient background that works in both plain cells and grouped style cells, you might be best off with this...

I have another solution, which is far less code and only requires a gradient image. The rounded corners of the group cell style are still drawn by the framework, so we don't need to worry about providing a custom image for the top, middle and bottom cell styles to cater for the rounded corners with this method. This is how it looks:

The gradient image is a single pixel wide and as high as the cell (which is 44 pixels in this example).

cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"cellBackground_1x44.png"]];

The code makes use of the colorWithPatternImage method on UIColor, available since iOS 2.0. This code should be called in tableView:cellForRowAtIndexPath:. It isn't necessary to repeat the call when a cell is re-used, only when the cell is initially created.

To go with the grey gradient I am using, I found it useful to set the selection colour for selected cells to match:

cell.selectionStyle = UITableViewCellSelectionStyleGray;

You might also want to change the colour of the cell borders too, using something like:

[self.tableView setSeparatorColor:[UIColor darkGrayColor]];

Well, that's it. I hope people find this useful. I was searching online yesterday for a few hours and only came up with references containing custom drawing code which generated gradients and rounded corners, or I found links to Matt Coneybeare's "HOW TO MAKE CUSTOM DRAWN GRADIENT BACKGROUNDS IN A GROUPED UITABLEVIEW WITH CORE GRAPHICS" blog post. All work fine, but if you just want something simple I believe this is it.

you can try smth like

for(UIView* v in [cell subviews]){
   [v setBackgroundColor:[UIColor clearColor]];
}

but it is just a suggestion.