Separated cells UITableView?

Question

I have a UITableView correctly implemented in my application. Now I want to change the user interface a bit, so I need the space between each cell, as shown in this figure:

Is it possible? If so, how?

Also, between each cell can it be made transparent so that it does not have white areas blocking the background image?

Answer 1

I can at least two ways to do this:

1) Create an empty cell that will be transparent and of any desired height, and then use this cell for the rows in the index 1,3,5,7,9,11 ...

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

2) The second option is to simply use the image with the transparent part at the bottom, so the cells look as if they have a space between them.

To return different heights for different types of cells, follow these steps:

 - (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 turn off any selection and user interaction with the "space" cells, so all you have to do is add to the cellForRowAtIndexPath method:

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

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

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

Answer 2

While Eyal's answer is pretty simple, another easy way to do this is to make your cell bigger than you need and place a view that is the desired height of the separator at the bottom of the cell, which has a background color that you like as a separator.

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

Answer 3

1.You can use grouped tables and sections.

2. Each section has one line and

3.tableview background color as pure color.