UITableView separated cells?

Question

I have a UITableView implemented properly in my app. Now I want to change the UI a bit so I want a space between each cell like I show in this drawing:

enter image description here

Is it possible to that? If so, how?

Also in between each cell, can I make it transparent so that it doesn't have any white areas blocking the view's background image?

possible duplicate of [How to add spacing beteween UITableViewCell](http://stackoverflow.com/questions/6216839/how-to-add-spacing-beteween-uitableviewcell) — Ferruccio, Aug 08 '12 at 12:35

score 8 · Accepted Answer · edited May 23 '17 at 12:25

I can think of at least two way to do that:

1) Create an empty cell, that will be transparent and whatever height you like, then use this cell for rows at index 1,3,5,7,9,11...

I used this approach before to create custom separator cells, and you can do exactly the same, look at the space between cells like a big transparent separator cell. I posted the code in this question take a look.

2) Second option, is just to use an image with transparent part in the bottom, this way the cells looks like they have a space between them.

To return a different height for the different kind of cells, do:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row % 2 == 0) {
        // this is a regular cell
        return REGULAR_CELL_HEIGHT;
    }
    else {
        // this is a "space" cell
        return SPACE_CELL_HEIGHT;
    }
}

You will probably want to disable any selection & user interaction with the "space" cells, so all you need to do is add this to thecellForRowAtIndexPath method:

if (indexPath.row % 2 == 0) {
    cell.userInteractionEnabled = YES;
}
else {  
    cell.userInteractionEnabled = NO;
}

This will block any user interaction with the cell, if you only want to not show the selection blue color when the user tap on a cell but you still want the didSelectRowAtIndexPath delegate method to be called, replace the above code with:

if (indexPath.row % 2 == 0) {
    cell.selectionStyle = UITableViewCellSelectionStyleBlue;
}
else {  
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
}

I like the first option. Is there any way to customize the height of the cells in indexes 2,4,6,8, etc.. but not in the odd # indexes? — SimplyKiwi, Aug 08 '12 at 21:12
Thanks I accepted your answer. Would I be able to do something similar also by disabling selection on those even lines? — SimplyKiwi, Aug 08 '12 at 23:56
Why disabling selection on the even lines and not the odd lines? Anyway I updated my answer, it easy to do both... — Eyal, Aug 09 '12 at 05:05

score 0 · Answer 2 · answered Mar 17 '14 at 17:11

While Eyal's answer is quite sound, another simple way of doing this is to make your cell bigger than you need and placing a view that is the desired separator height at the bottom of the cell that has the background color that you'd like the separator to be.

For example, if you want cell's with a height of 40 and a separator of 3, build a cell with a height of 43 and place a view at y = 40 with a height of 3 and set its background color as desired.

score -1 · Answer 3 · answered Aug 08 '12 at 12:38

-1

1.You can use grouped tableview and sections.

2.Each section has single row and

3.tableview background color as clear color.

answered Aug 08 '12 at 12:38

Anand

3,346
9
35
54

Is there any way to do this while using only 1 section? – SimplyKiwi Aug 08 '12 at 12:39
if you are using only 1 section then increase row size and use buttons in the middle of row then change background color and change the look and feel as u like. – Anand Aug 08 '12 at 12:42
Perform action on buttons only.. no interaction with rows – Anand Aug 08 '12 at 12:44

UITableView separated cells?

3 Answers3