How to do custom table cell background?

Discussion in 'iOS Programming' started by CaptSaltyJack, Jul 1, 2009.

  1. CaptSaltyJack macrumors 6502

    Joined:
    Jun 28, 2007
    #1
    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:

    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:

    [​IMG]

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

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #2
    Have you tried setting the background color of the lable to transparent?
     
  3. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #3
    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.
     
  4. CaptSaltyJack thread starter macrumors 6502

    Joined:
    Jun 28, 2007
    #4
    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.
     
  5. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #5
    Hmm, I think that should work. How about trying [UIColor clearColor]?

    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.
     
  6. CaptSaltyJack thread starter macrumors 6502

    Joined:
    Jun 28, 2007
    #6
    Tried clearColor. I still get that white background block behind the text.
     
  7. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #7
    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.
     
  8. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #8
    Subclass the cell and draw your gradient as the background?
     
  9. CaptSaltyJack thread starter macrumors 6502

    Joined:
    Jun 28, 2007
    #9
    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)
     
  10. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #10
    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)
     
  11. CaptSaltyJack thread starter macrumors 6502

    Joined:
    Jun 28, 2007
    #11
    Heheh.. damn!!

    [​IMG]

    Code:
    @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);
    }
    
    ...
    
     
  12. CaptSaltyJack thread starter macrumors 6502

    Joined:
    Jun 28, 2007
    #12
    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! :)

    [​IMG]
     
  13. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #13
    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.
     
  14. CaptSaltyJack thread starter macrumors 6502

    Joined:
    Jun 28, 2007
    #14
    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.
     
  15. iomatic macrumors regular

    Joined:
    Mar 25, 2004
    #15

Share This Page