Set background color in table view while using Core Graphics to add vertical lines for grid

Question

Hi All, I'm attempting to create a grid-style table using the UITableView by overwriting vertical lines on top of the standard horizontal lines provided by default in a UITableView. I am adapting my code to the example helpfully provided from this blog: http://www.iphonedevx.com/?p=153.

First, the code which draws the vertical lines (same color as horizontal lines) is implemented in a file separate from the Table View Controller, called "MyTableCell.m":

- (void)drawRect:(CGRect)rect {
     CGContextRef ctx = UIGraphicsGetCurrentContext();
     // Use the same color and width as the default cell separator for now
     CGContextSetRGBStrokeColor(ctx, 0.5, 0.5, 0.5, 1.0);
     CGContextSetLineWidth(ctx, 0.25);

     for (int i = 0; i < [columns count]; i++) {
      CGFloat f = [((NSNumber*) [columns objectAtIndex:i]) floatValue];
      CGContextMoveToPoint(ctx, f, 0);
      CGContextAddLineToPoint(ctx, f, self.bounds.size.height);
     }

     CGContextStrokePath(ctx);

     [super drawRect:rect];
    }

Next, in the Table View Controller tableView method, we call [cell addColumn:50] to draw a vertical line 50 pixels to the left of the left-hand side of the view boundary:

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

 NSString *MyIdentifier = [NSString stringWithFormat:@"MyIdentifier %i", indexPath.row];

 MyTableCell *cell = (MyTableCell *)[tableView dequeueReusableCellWithIdentifier:MyIdentifier];

 if (cell == nil) {
  cell = [[[MyTableCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];

  UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(0.0, 0, 30.0,
                 tableView.rowHeight)] autorelease];
  [cell addColumn:50];
  label.tag = LABEL_TAG;
  label.font = [UIFont systemFontOfSize:12.0];
  label.text = [NSString stringWithFormat:@"%d", indexPath.row];
  label.textAlignment = UITextAlignmentRight;
  label.textColor = [UIColor blueColor];
  label.autoresizingMask = UIViewAutoresizingFlexibleRightMargin |
  UIViewAutoresizingFlexibleHeight;
  [cell.contentView addSubview:label]; 

  label =  [[[UILabel alloc] initWithFrame:CGRectMake(60.0, 0, 30.0,
               tableView.rowHeight)] autorelease];
  [cell addColumn:120];
  label.tag = VALUE_TAG;
  label.font = [UIFont systemFontOfSize:12.0];
  // add some silly value
  label.text = [NSString stringWithFormat:@"%d", indexPath.row * 4];
  label.textAlignment = UITextAlignmentRight;
  label.textColor = [UIColor blueColor];
  label.autoresizingMask = UIViewAutoresizingFlexibleRightMargin |
  UIViewAutoresizingFlexibleHeight;
  [cell.contentView addSubview:label];
 }

 return cell;
}

I am attempting to change the background of the entire view from white (the default) to black. I attempt to do this by setting the self.view.backgroundColor to black in the viewDidLoad method of the Table View Controller:

    - (void)viewDidLoad {
 self.view.backgroundColor = [UIColor blackColor];
}

However, when I do this, the vertical lines disappear...

I think somehow setting the backgroundColor in viewDidLoad changes the CurrentContext by the time we get to the drawRect: method, but I don't know how to adjust for that. I've tried setting the background color via CGContextSetFillColorWithColor() inside drawRect: like this:

GContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(ctx, tableBackgroundColor());
CGContextFillRect(ctx, self.bounds);

where tableBackgroundColor() is black like this:

    CGColorRef tableBackgroundColor()
{
 static CGColorRef c = NULL;
 if(c == NULL)
 {
  c = CreateDeviceRGBColor(0.0, 0.0, 0.0, 1.0); // black
 }
 return c;
}

CGColorRef CreateDeviceRGBColor(CGFloat r, CGFloat g, CGFloat b, CGFloat a)
{
 CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
 CGFloat comps[] = {r, g, b, a};
 CGColorRef color = CGColorCreate(rgb, comps);
 CGColorSpaceRelease(rgb);
 return color;
}

However, as soon as I attempt to change the background color using this method, the vertical lines still get wiped out. What am I missing here?

Any ideas are much appreciated in advance!

Answer 1

It seems odd, but perhaps the default implementation of drawRect: draws the background colour. Try moving [super drawRect:rect] to the start.

Answer 2

Are you sure they're disappearing, or that you can't see a light gray line on top of a black background?

In drawRect: I changed

 CGContextSetRGBStrokeColor(ctx, 0.5, 0.5, 0.5, 1.0);
 CGContextSetLineWidth(ctx, 0.25);

to

CGContextSetRGBStrokeColor(ctx, 0.0, 0.0, 0.0, 1.0);
CGContextSetLineWidth(ctx, 10.0);

And in viewDidLoad, I used [UIColor yellowColor]; and the lines appear just fine. (I also included a call to [super viewDidLoad], but removing it didn't make any difference.)