IOS grouped tableview transparent cells

Question

Trying to create a grouped tableview with trasnparent cells without any borders. Tableview's background color from top to bottom goes darker to lighter.

but somehow tableview cells are only reflecting top portion of the background image which is darker.

I have tried tons of answers from stackoverflow but none of them is working and couldnt find the solution for this problem.

What it should look like:

What it looks like with my code:

- (void)viewDidLoad
{
    [super viewDidLoad];

    [self.tableView setBackgroundView:nil];
    self.tableView.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:@"menu_background.png"]];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    cell.backgroundColor=[UIColor clearColor];
    cell.backgroundView=[[UIView alloc] initWithFrame:CGRectZero];

//    UIView *backView = [[UIView alloc] initWithFrame:CGRectZero];
//    backView.backgroundColor = [UIColor clearColor];
//    cell.backgroundView = backView;

//    [[cell contentView] setBackgroundColor:[UIColor clearColor]];
//    [[cell backgroundView] setBackgroundColor:[UIColor clearColor]];
//    [cell setBackgroundColor:[UIColor clearColor]];

//    cell.backgroundColor = [UIColor clearColor];
//    cell.backgroundView.backgroundColor = [UIColor clearColor];

//    cell.contentView.backgroundColor = [UIColor clearColor];
//    cell.backgroundColor = [UIColor clearColor];
//    UIView *bgView = [[UIView alloc] init];
//    [[bgView layer] setCornerRadius:10.0f];
//    [bgView setBackgroundColor:[UIColor colorWithWhite:1.0f alpha:0.25f]];
//    cell.backgroundView = bgView;
//    
    return cell;
}

What am I missing ? Whats the solution for this ?

Thanks, Space

Answer 1

Maybe you intentionally left this out but how are you getting your new cell are you dequeing it? is it a custom cell? assuming it is a standard cell I would try:

[[cell imageView] setBackgroundColor:[UIColor clearColor]];

and i would keep

[cell setBackgroundColor:[UIColor clearColor]];

Another idea is to set it to white and set the alpha to 0 so in the end it is clear, but that doesn't feel like the best solution.

Maybe that would work? I didn't attempt to recreate the issue to test this solution. If it is a custom UITableViewCell then I would just set the properties in the xib.

Answer 2

What u did is correct , but try by setting cell's background view to nil to make the cell as completely transparent . if u are using grouped tableview and cell's subclass of UITableViewCell, the borders are made disappear by setting background view to "nil"
cell.backgroundView = nil;

try this once not sure

Answer 3

UPDATE Turns out, this will do the trick for grouped tables:

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    cell.backgroundColor = [UIColor clearColor];
    cell.layer.backgroundColor = [UIColor clearColor].CGColor;
}

You've just got to set the cell's layer background color in addition to setting the cell's background color.

ORIGINAL If you can use ungrouped (I don't see anything in your mockup that needs grouped style), the following should work:

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

I'm not aware of a solution for grouped other than faking it by breaking your background into tiles and putting the tiles in your rows. The tiled approach can actually provide much better scrolling performance on older devices.