开发者

UITableViewCell with custom gradient background, with another gradient as highlight color

I have a custom UITableViewCell with a custom layout. I wanted a gradient background, so in my UITableViewDelegate cellForRowAtIndexPath: method, I create a CAGradientLayer and add it to the cell's layer with insertSubLayer:atIndex: (using index 0). This works just fine except for two things:

Most importantly, I can't figure out how to change to a different gradient color when the row is highlighted. I have tried a couple things, but I'm just not familiar enough with the framework to get it working. Where would be the ideal place to put that code, inside the table delegate or the cell itself?

Also, there's a 1px white s开发者_运维问答pace in between each cell in the table. I have a background color on the main view, a background color on the table, and a background color on the cell. Is there some kind of padding or spacer by default in a UITableView?


I know this thread is old, but here's a solution for the first part of your question (adding a gradient to the selected and non-selected states of a cell):

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{    
    [cell setBackgroundColor:[UIColor clearColor]];

    CAGradientLayer *grad = [CAGradientLayer layer];
    grad.frame = cell.bounds;
    grad.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor], (id)[[UIColor blackColor] CGColor], nil];

    [cell setBackgroundView:[[UIView alloc] init]];
    [cell.backgroundView.layer insertSublayer:grad atIndex:0];

    CAGradientLayer *selectedGrad = [CAGradientLayer layer];
    selectedGrad.frame = cell.bounds;
    selectedGrad.colors = [NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor], (id)[[UIColor whiteColor] CGColor], nil];

    [cell setSelectedBackgroundView:[[UIView alloc] init]];
    [cell.selectedBackgroundView.layer insertSublayer:selectedGrad atIndex:0];
}


I'm not sure about the first question but I think you can set the selectedBackgroundView property similarly to how you set the backgroundView property. The white space between cells is probably the separator. You can change that color like

tableView.separatorColor = [UIColor redColor];


I struggled for days with this. The solution ended up being quite simple but the various parts of the puzzle were spread across several different answers and sites. The missing piece of the puzzle turned out to be the distinction between the content view and the background view and where the selection color is applied.

Features of my solution:

  • I load my cell from a nib so that I can layout the content in IB. Feel free to lay out the content programmatically.
  • I grab the gradient colors from a global style object because I need to customize the gradient by client.
    • I set the selection color of the cell to gray in the nib so the default (blue) does not clash with my color scheme.
  • I add the gradients to the background view. If you don't do this, the selection color does not show correctly. UITableViewCell does not have a background view by default so you have to create it first.

This last point was the secret ingredient that made it all work for me.

I added a factory method to my UITableCellView subclass because I wanted to use the same cell in multiple tables.

+(ActivityDetailCellView *) createWithStyle: (WMStyle *) style {  
  UIViewController *temporaryController = [[UIViewController alloc] 
       initWithNibName: @"ActivityDetailCellView"
       bundle: nil];

  ActivityDetailCellView *cell = (ActivityDetailCellView *) temporaryController.view;

  CAGradientLayer *lightGradient = [CAGradientLayer layer];
  lightGradient.frame = cell.bounds;
  lightGradient.colors = style.lightGradient;

  UIView *background = [[UIView alloc] initWithFrame: cell.bounds];
  [background.layer insertSublayer:lightGradient atIndex:0];  
  cell.backgroundView = background;

  return cell;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜