iOS How to do custom table cell background?

[CaptSaltyJack]

I'm trying to make table cells a little more interesting by using a gradient.

What I've done is make a .xib file with just a 320x80 view with a PNG gradient (UIImageView) in it. Then in the code:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
	UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"poo"];
	
	if (cell == nil)
	{
		cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
									   reuseIdentifier:@"poo"] autorelease];
		NSLog(@"Couldn't grab dequeued cell, made a new one");
	}
	else
		NSLog(@"Grabbed dequeued cell");

	cell.textLabel.text = [list objectAtIndex:[indexPath row]];
	cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
	//cell.imageView.image = [UIImage imageNamed:@"large.jpg"];
	
	NSArray *b = [[NSBundle mainBundle] loadNibNamed:@"TableCellBackground" owner:self options:nil];
	UIView *v = [b objectAtIndex:0];
	cell.backgroundView = v;
	
	return cell;
}

But I get this:

Notice how there is a gradient, but the textLabel has this block of white behind the text. How do I get rid of that?

 

[robbieduncan]

Have you tried setting the background color of the lable to transparent?

 

[dejo]

Have you tried setting the background color of the lable to transparent?

And just be careful with this approach. Apple recommends that the subviews of your table cell be opaque, especially if your table has many rows. Transparent ones can be "expensive", in terms of processing requirements. Sometimes it's unavoidable though.

 

[CaptSaltyJack]

Well, I tried cell.textLabel.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.0] or whatever the code is for that (something close to that at least). Didn't work.

If Apple recommends against transparent cells... how do we spruce up our table cells then, using gradients or backgrounds? I see apps like Tweetie do it.

 

[dejo]

Well, I tried cell.textLabel.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.0] or whatever the code is for that (something close to that at least). Didn't work.

Hmm, I think that should work. How about trying [UIColor clearColor]?

If Apple recommends against transparent cells... how do we spruce up our table cells then, using gradients or backgrounds? I see apps like Tweetie do it.

It's not that they aren't allowed; they are. They're just something that needs to be paid special attention to to make sure you don't have performance issues. (I've never really seen any problems.) And also be aware that there are sometimes other ways of achieving the same effect without the need for transparency.

I fear I am scaring you off to much, though. Go ahead and try it. Just pay closer attention to any subsequent performance issues.

 

[CaptSaltyJack]

Tried clearColor. I still get that white background block behind the text.

 

[dejo]

Tried clearColor. I still get that white background block behind the text.

To be honest, I've found table cell backgrounds to be a PITA usually. If you add your own subviews or subclass UITableViewCell, you'll get better control over avoiding these quirks.

 

[robbieduncan]

Subclass the cell and draw your gradient as the background?

 

[CaptSaltyJack]

Ahh of course... subclass the cellview! But after I do that, how would I draw the gradient as the background? (at least give me a push in the right direction)

 

[robbieduncan]

Ahh of course... subclass the cellview! But after I do that, how would I draw the gradient as the background? (at least give me a push in the right direction)

Well if the cellview doesn't provide you any obvious alternative just override drawRect:

Edit to add: check this in the documentation (scroll down to Subclassing UITableViewCell)

 

[CaptSaltyJack]

Heheh.. damn!!

@implementation GradientCell

- (void)drawRect:(CGRect)rect
{
	NSLog(@"Draw this");
	
	CGContextRef cgref = UIGraphicsGetCurrentContext();
	CGContextSetRGBFillColor(cgref, 1.0, 0.0, 0.0, 1.0);
	CGContextFillRect(cgref, rect);
}

...

 

[CaptSaltyJack]

AHHH. Ok, made a XIB for the custom cell, put down my UIImageView with a background PNG, and laid down my own labels, gave them tags, and bingo! (Oh, and set the UITableViewController to not have separators).

Thanks for the help!

 

[PhoneyDeveloper]

FWIW, you can probably do the same thing in code without subclassing. Just create a default style cell and add the subviews in code. The default subviews, like textLabel, may not let you do everything that you want.

 

[CaptSaltyJack]

No subclassing was needed here. This is the Interface Builder route, which I like, since I'm more visual anyway. I've got a UITableViewController which has an outlet to a UITableViewCell, I link that up with my custom cell in IB, then loadNibWithName in the code, and it's done. No subclassing needed.

EDIT: nevermind.. I realize you were offering up another alternative which is cool. I went the more visual route which I tend to prefer.

 

[iomatic]

Just wanted to follow up on trying to figure out how to draw a gradient, rather than using a png (still haven't found a simple solution that isn't glued to a developer's label drawing code).

Here is a good tutorial on separating the cell view.
http://pragmaticstudio.com/screencasts/5-custom-table-cells-in-interface-builder

That link to Apple's docs is also very good.