UITableViewCell overlapping

Question

I'm looking to create an uitableview with overlapping cells like in the image below. The problem is that even if I set clipsToBounds = NO for the cell's content view, the cell fake header(e.g Spanish which will overlap the previous cell) is not displayed.

Does anyone know how to fix this issue?

enter image description here

Here is my code:

- (UITableViewCell *)tableviewCellTournamentWithReuseIdentifier:(NSString *)identifier andPosition:(NSInteger)pos {
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
if (pos == 0) {
    cell.clipsToBounds = NO;
    cell.contentView.clipsToBounds = NO;
    cell.frame = CGRectMake(0, 0, tournamentsTableView.frame.size.width, CELL_HEIGHT);

    UIView* row = [[UIView alloc] initWithFrame:CGRectMake(0, 0, tournamentsTableView.frame.size.width, CELL_HEIGHT)];
    row.clipsToBounds = NO;
    row.backgroundColor = [UIColor clearColor];

    UIView* topRow = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 10)];
    topRow.backgroundColor= [UIColor colorWithRed:210/255.0 green:131/255.0 blue:62/255.0 alpha:1.0];
    [row addSubview:topRow];

    UILabel* label = [[UILabel alloc] initWithFrame:CGRectMake(0, 10, row.frame.size.width, CELL_HEIGHT-10)];
    label.backgroundColor = [UIColor colorWithRed:63*pos/255.0 green:71*pos/255.0 blue:113/255.0 alpha:1.0];
    label.font = [UIFont fontWithName:@"HelveticaNeue" size:14];
    label.tag = TOURNAMENT_NAME;
    label.layer.cornerRadius = 5;
    [row addSubview:label];

    [cell.contentView addSubview:row];
} else {
    cell.clipsToBounds = NO;
    cell.contentView.clipsToBounds = NO;
    cell.frame = CGRectMake(0, -10, tournamentsTableView.frame.size.width, CELL_HEIGHT);

    UIView* row = [[UIView alloc] initWithFrame:CGRectMake(0, -10, tournamentsTableView.frame.size.width, CELL_HEIGHT)];
    row.clipsToBounds = NO;
    row.backgroundColor = [UIColor clearColor];

    UIView* topRow = [[UIView alloc] initWithFrame:CGRectMake(0, -10, 100, 10)];
    topRow.backgroundColor= [UIColor colorWithRed:210/255.0 green:131/255.0 blue:62/255.0 alpha:1.0];
    [row addSubview:topRow];
    [cell bringSubviewToFront:tournamentsTableView];

    UILabel* label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, row.frame.size.width, CELL_HEIGHT-10)];
    label.backgroundColor = [UIColor colorWithRed:63*pos/255.0 green:71*pos/255.0 blue:113/255.0 alpha:1.0];
    label.font = [UIFont fontWithName:@"HelveticaNeue" size:14];
    label.tag = TOURNAMENT_NAME;
    label.layer.cornerRadius = 5;
    [row addSubview:label];

    [cell.contentView addSubview:row];
}

return cell;

}

And the result is: enter image description here

Did you try to set `clipToBounds=NO` on the custom cell too ? Not only on the cell content view. — danypata, Sep 18 '13 at 08:17
Look around a little. This offers some light on the same issue http://stackoverflow.com/questions/13046762/how-to-overlap-uitableviewcells — Anil, Sep 18 '13 at 08:51
Looking at your results I have the impression that you are using a UITableView "Grouped" ? — tdelepine, Sep 18 '13 at 10:34

score 1 · Answer 1 · answered Sep 28 '14 at 14:02

The problem is you are trying to manipulate the tableview its self which is why you are experiencing issues. You will need to include the 'tab' in the cell as its much easier to add as many outlets as you like as the cell its self acts as as a separate view.

add your top row to the cell

UIView *topRow = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 100.0, 10.0)];
topRow.backgroundColor= [UIColor colorWithRed:210/255.0 green:131/255.0 blue:62/255.0 alpha:1.0];
[cell.contentView addSubview:topRow];

then add your main content to the cell and just move it down

UIView* row = [[UIView alloc] initWithFrame:CGRectMake(0.0, 10.0, tournamentsTableView.frame.size.width, CELL_HEIGHT)];
row.clipsToBounds = NO;
row.backgroundColor = [UIColor clearColor];
[cell.contentView addSubview:row];

finally get rid of the background colour of the cell and you almost have your effect.

cell.backgroundColor = [UIColor clearColor];
cell.contentView.backgroundColor = [UIColor clearColor];

Hope that helps :)

UITableViewCell overlapping

1 Answers1