How to overlap UITableViewCells?

Question

If you look at the screenshot you will notice that each UITableViewCell are 20% overlapped from top portion to the upper tableview cell.

Is there any way we can overlap cells ?

Answer 1

I never tried it, but this kind of logic will work. Remember, you won't get any touch in the overlapped area.

1) Add your subview to cell.contentView, make sure subview height is greater than rowHeight of your tableView.

float overlapHeight  = 10.0;

subView.frame = CGRectMake(0.0, -10.0, 
                  your_subview_width, rowHeight + overlapHeight);

2) Add this code, so that your cell won't clip contents outside its frame

cell.clipsToBounds = NO;
cell.contentView.clipsToBounds = NO;

3) Now your cell's will overlap, but there will be a clip mark around the borders of the cell. To avoid that implement willDisplayCell delegate function

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

Answer 2

The overlap effect can be achieved visually by composing your cell of two parts: a narrow one on the top and a wide one on the bottom. The bottom part is simple: it is a grey rectangle with a text/image component inside. The trick is in the part on the top.

The height of the top part equals the height of the entire colored tab. Your program can put one of two images there - either a tab on top of a narrow gray strip representing the bottom of the prior cell, or a tab on top of a brown background. Inside your tableView:cellForRowAtIndexPath: check the row. If it is zero, pick the image with the brown background; otherwise, pick the image with the grey strip in the background at the top.

Answer 3

No need to overlap the cells. Your top cell should look like this:

and all remaining cells should look like this:

Your tableFooterView should just be a grey bar (the "bottom" of a cell)