How to overlap UITableViewCells?

Question

enter image description here

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 ?

I really appreciate if you take part in suggesting idea for the implementation instead of just pointing out. For your info I have tried with http://i.stack.imgur.com/uSHXS.png this kind of stuffs but it will not work cause i have certain other animations which will expand the gaps between cells. Thank you — Tariq, Oct 24 '12 at 10:26
@Tariq-iPHONEProgrammer - You should mention your all requirements in your question because if some one answers he will give answer what you asked in your question.... He dont know what you have extra to do. — TheTiger, Oct 24 '12 at 10:30

score 15 · Accepted Answer · answered Oct 24 '12 at 10:01

15

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];
}

answered Oct 24 '12 at 10:01

Krishnabhadra

34,169
30
118
167

Yes who down vote he should explain why he did that other wise he is just playing with it. – TheTiger Oct 24 '12 at 10:22
It seems like this method doesn't work in ios7? Everything is still being clipped. – Ohmnastrum Dec 19 '13 at 16:57
3

Got it, Don't forget to add cell.contentView.superview.clipsToBounds = NO; (For iOS7) – Ohmnastrum Dec 19 '13 at 17:04
1

In my case its working, but the views in the table are overlapping different way that I want. Is it possible to know when the cell is added to the view, so I can reorganize them? – Oscar Feb 05 '14 at 09:47
Clever, you saved me. – Lucien Jan 15 '15 at 21:54
5

cell.layer.zPosition = indexPath.row; To make current cell behind previous cell – Thein Jun 14 '16 at 13:29

score 1 · Answer 2 · answered Oct 24 '12 at 10:09

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.

score 0 · Answer 3 · answered Oct 24 '12 at 10:15

0

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

enter image description here

and all remaining cells should look like this:

enter image description here

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

answered Oct 24 '12 at 10:15

Ashley Mills

50,474
16
129
160

I have tried this approach but the problem is you are cutting the image from the bottom. But I have certain other animation for that purpose I need complete cell image. Lets say for ex If I will touch any cell then I have to expand the gap between two cell thats why I can't crop the images :) – Tariq Oct 24 '12 at 10:24

How to overlap UITableViewCells?

3 Answers3

Linked