Custom Grouped Table Cell - iphone

Question

I am trying to draw my grouped table cells in the drawRect method. I get the following results, but I have one problem with. I want the outer border to be a darker, but I can not seem to accomplish this, which I am sure is a problem with my drawing.
I like the color of the line in the middle between the cells, just not the outer border of the cells.
Edit:
-(void)drawRect:(CGRect)rect
{
const float kLineWidth = 3.0;
UIColor *topLineColor = [UIColor whiteColor];
UIColor *bottomLineColor = [UIColor colorWithRed:225.0f/255.0f green:225.0f/255.0f blue:225.0f/255.0f alpha:1.0f];
UIColor *backgroundColor = [UIColor colorWithRed:242.0f/255.0f green:242.0f/255.0f blue:242.0f/255.0f alpha:1.0f];
CGColorRef bottomSeparatorColorRef = [bottomLineColor CGColor];
CGColorRef topSeparatorColorRef = [topLineColor CGColor];
CGContextRef context = UIGraphicsGetCurrentContext();
UIRectCorner corners = 0;
switch(self.position) {
case OTCellBackgroundViewPositionTop:
corners = UIRectCornerTopLeft | UIRectCornerTopRight;
break;
case OTCellBackgroundViewPositionMiddle:
break;
case OTCellBackgroundViewPositionBottom:
corners = UIRectCornerBottomLeft | UIRectCornerBottomRight;
break;
default:
break;
}
[backgroundColor setFill];
[topLineColor setStroke];
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:CGSizeMake(10.0f, 10.0f)];
[bezierPath fill];
[bezierPath stroke];
[bezierPath setLineWidth:3.0f];
if (self.position == OTCellBackgroundViewPositionTop) {
// Draw the Bottom Line
CGContextSetStrokeColorWithColor(context, bottomSeparatorColorRef);
CGContextSetLineWidth(context, kLineWidth);
CGContextSetLineCap(context, kCGLineCapSquare);
CGContextMoveToPoint(context, 0.0, rect.size.height);
CGContextAddLineToPoint(context, rect.size.width, rect.size.height);
CGContextStrokePath(context);
}
if (self.position == OTCellBackgroundViewPositionBottom) {
// Draw the Top Line
CGContextSetStrokeColorWithColor(context, topSeparatorColorRef);
CGContextSetLineWidth(context, kLineWidth);
CGContextSetLineCap(context, kCGLineCapSquare);
CGContextMoveToPoint(context, 0.0, 0.0);
CGContextAddLineToPoint(context, rect.size.width, 0);
CGContextStrokePath(context);
}
}

Answer 1

You are setting the top separator to white.
UIColor *topLineColor = [UIColor whiteColor];
CGColorRef topSeparatorColorRef = [topLineColor CGColor];
// Top Line
CGContextSetStrokeColorWithColor(context, topSeparatorColorRef);
Simply set it to a darker color.

Answer 2

Let's look at the code for the top position cell. First, you create a path that represents an outline of the whole cell. Next, you fill the background - good. Then you stroke the two sides and top - good. Then you stroke the bottom of the cell - good. Then you add and stroke the full outline path you created before doing the other parts - bad.
Get rid of the path you create and don't stroke that path. Your code for the background, top line, and bottom line are all you need.
The extra stroke you do last is redrawing the full cell outline in the last color you used which was for the bottom line. This is covering your top line stroke.
On a side note, you should use an if-else setup:
if (_position == OTCellBackgroundViewPositionTop) {
// draw top cell
} else if (_position == OTCellBackgroundViewPositionMiddle) {
// draw middle cell
} else if (_position == OTCellBackgroundViewPositionBottom) {
// draw bottom cell
)
This sort of structure should always be used when you only need one possible path to execute. The structure you had is appropriate when it is possible or desired for multiple paths to be executed.

Answer 3

I'm thinking something like this might be more manageable. You'll have to tweak the bezierPath sizes etc to get the right.
UIRectCorner corners = 0;
switch(position) {
case OTCellBackgroundViewPositionTop:
corners = UIRectCornerTopLeft | UIRectCornerTopRight;
break;
case OTCellBackgroundViewPositionMiddle:
break;
case OTCellBackgroundViewPositionBottom:
corners = UIRectCornerBottomLeft | UIRectCornerBottomRight;
break;
}
[backgroundColor setFill];
[topLineColor setStroke];
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:rect
byRoundingCorners:corners
cornerRadii:CGSizeMake(3.f, 3.f)];
[bezierPath fill];
[bezierPath stroke];
// Now stroke over the lines in a different colour.
Edit
Looking at the code you have posted.
You have set the top line colour to white - hence it is white, maybe you meant to set it to the gray colour you require.
The outlines being drawn are being clipped. To solve this you could inset the rect by half the width of the lines you are drawing.
rect = CGRectInsetRect(rect, 0.5f * kLineWidth, 0.5f * kLineWidth);
You need to set the stroke width before you stroke the line or it will use the default
[bezierPath setLineWidth:kLineWidth];
[bezierPath stroke];