How to overlap UITableViewCells?

Question

If you look at the screenshot, you will notice that each UITableViewCell overlays 20% from the top to the top cell of the table.

Can cells overlap in any way?

Answer 1

I have never tried, but such logic will work. Remember that you will not get any touch in the overlap area.

1) Add a subview to cell.contentView , make sure the subtask height is greater than the rowHeight 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 does not crop the content out of frame

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

3) Now your cell will overlap, but there will be a click sign around the borders of the cell. To avoid implementing the delegate delegate function of Displayplay

 - (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 in two parts: narrow at the top and wide at the bottom. The bottom is simple: it's a gray rectangle with a text / image component inside. The trick is at the top.

The height of the top is equal to the height of the entire color tab. Your program can place one of two images - either a tab on top of a narrow gray bar representing the bottom of the previous cell, or a tab on top of a brown background. Inside tableView:cellForRowAtIndexPath: check row . If it is zero, select an image with a brown background; otherwise, select an image with a gray bar in the background at the top.

Answer 3

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

and all other cells should look like this:

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