Question

I’m working with a UITableView and a custom UITableViewCell. Initially, this had poor performance as I was loading the view for the cell from the nib file.

I have found a blog post by the author of Twitter for iPhone that discusses drawing our own graphics for cells to improve performance. This sounds easy enough, right?

So, I began doing that here:

- (void)drawRect:(CGRect)rect{
// Drawing code
#define LEFT_COLUMN_WIDTH 48

#define MIDDLE_COLUMN_OFFSET 52
#define MIDDLE_COLUMN_WIDTH 180

#define MAIN_FONT_SIZE 12
#define MIN_MAIN_FONT_SIZE 10
#define SECONDARY_FONT_SIZE 10
#define MIN_SECONDARY_FONT_SIZE 10

#define RIGHT_COLUMN_SIZE 70
#define PADDING 4

UIColor * secondaryTextColor = nil;
UIFont * secondaryFont = [UIFont systemFontOfSize:SECONDARY_FONT_SIZE];

//mainTextColor = [UIColor blackColor];
secondaryTextColor = [UIColor blackColor];
self.backgroundColor = [UIColor whiteColor];


CGPoint point;

CGSize size;

//[mainTextColor set];

NSString * textToDisplay = @"Test";

CGPoint rightColumnStart = CGPointMake(self.frame.size.width - PADDING - RIGHT_COLUMN_SIZE, 0);

point = CGPointMake(rightColumnStart.x + (RIGHT_COLUMN_SIZE/2 - size.width/2), 40);
[textToDisplay drawAtPoint:point forWidth:RIGHT_COLUMN_SIZE withFont:secondaryFont minFontSize:MIN_SECONDARY_FONT_SIZE actualFontSize:NULL lineBreakMode:UILineBreakModeTailTruncation baselineAdjustment:UIBaselineAdjustmentAlignBaselines];

    // background color
/*CGContextRef context = UIGraphicsGetCurrentContext();
CGContextBeginPath(context);
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
CGContextAddRect(context, CGRectMake(rightColumnStart.x, 0, RIGHT_COLUMN_SIZE, self.frame.size.height));
CGContextFillPath(context);
 */
}

As you can see, there is a lot of stuff going on (and a fair amount of hard coding coordinates, just ignore the magic numbers for now).

So, in the code block, if you look for the comment “background color”, one can see that I’m drawing a colored rectangle. I’m also drawing text “test” within the same coordinate space that I want to show up on top of the rectangle.

So, if I run the application without the “background color” enabled, the “test” text shows up without issue. It is black, size 10, looks great, is positioned correctly, etc.

When I draw the rectangle, the “test” text does not show up. It is likely being rendered behind the colored rectangle, or the blending is not being set-up correctly.

How do I avoid this issue and blend the two together so the black text shows up on top of the colored rectangle? I’m not sure what question I should be asking through Google, so I apologize if this is very simple.

Thanks!!!!

Answer 1

Draw the background first and then the text on top of it.