How to give space between two cells in tableview?

Question

I want a space between two cell in table view,

I want cell like this,

How can i do that?

Solution 1

You can create a Sections of TableView also in the UITableView... This methods are compulsory so create sections and in each section you can create single cell as in your picture..

Solution 2

you can't set distance between cells directly, but you can set the height for header in section to achieve the same result.

1.set the numbers of cell you need as sections:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView 
{
    return 3; // in your case, there are 3 cells
}

2.return only 1 cell for each section

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;
}

3.set the height for header in section to set space between cells

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 10.; // you can have your own choice, of course
}

4.set the header's background color to clear color, so it won't look weird

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *headerView = [[UIView alloc] init];
    headerView.backgroundColor = [UIColor clearColor];
    return headerView;
}

Solution 3

The Best way to get space between two cells in TableView, declare the numbers of sections you want in delegate method of numberofsections this way

For example you have array of 10 objects

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
  return [array count]; //array count returns 10
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {


    return 1;// this should be one because it will create space between two cells if you want space between 4 cells you can modify it.
}

Then the important point is in cellForRowAtIndexPath delegate method you need to use indexpath.section but not indexpath.row

cell.textLabel.text=[NSString stringWithFormat:@"%@",[array objectAtIndex:indexPath.section]];

That is is check your tableview for the space between two cells. Enjoy!

Solution 4

The multiple sections answer would work, but it's extremely brittle, and doesn't allow for actual sections. Instead, you should create a custom cell, or custom cell prototype that simply has a gap at the bottom and/or top.

Use your struts and springs in IB to maintain that uniform gap, and use heightForRowAtIndexPath to return a height that includes the gap.

Solution 5

Objective - C

 UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 3)];/// change size as you need.       
 separatorLineView.backgroundColor = [UIColor whiteColor];// you can also put image here
 [cell.contentView addSubview:separatorLineView];

Swift 3 (This same will work for Swift 4 also)

var separatorLineView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 3))
/// change size as you need.       
separatorLineView.backgroundColor = UIColor.white
// you can also put image here
cell.contentView.addSubview(separatorLineView)

It worked for me.

View more solutions

Comments

[The iCoder]

But how u will maintain that array which we are giving in the cellforrowindexpath ....i am facing problem that my every cell printing the same element in every section row. Any idea??

[DShah]

@PavanMore: What is your exact scenario?? It is easy to maintain array. Just declare the property of NSArray and initialize it. Then based on cellForRowIndexpath i.e. Index of cell just change the cell text. its easy... if your scenario is different then please elaborate it.

[Douglas]

Thanks for this tidbit of info. Worked like a charm!

[iPhone Programmatically]

It is good, but distance can be created without using this way also. link "stackoverflow.com/questions/11453366/…".

[n13]

It's not brittle - I don't think - but it's kinda hackish. I've made the gap part of the cell in my solution before finding this page but it comes with drawbacks too. In my case it makes the cell design much more complicated than it would be if the gap were managed by the table. YMMV.

[denikov]

Thanks for the indexPath.section part

[Mubin Mall]

How to give particular space like 5px or 10px between them

[obaid]

You can set the header and footer height of sections

[mask]

How do you calculate number of row in a single section table

[Khairulnizam Dahari]

Based on your content array. Eg: -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return [menus count]; }

[WaaleedKhan]

An Excellent Approach.

[JRam13]

If you have both multiple sections and rows, try this way stackoverflow.com/a/29258935/2446178

[Nikunj Jadav]

Its not working. For exmaples arrays count 10 and when I have use this code in cellForRowAtIndexPath and heightForRowAtIndexPath but its return only 5 rows because I think based on this condition if (indexPath.row % 2 == 1).

[Tyler]

this makes the editing actions look like crap, the pseudo margin is actually a part of the cell, so in the case you have editing actions, the action view appears to be taller than the view

[Alex Lacayo]

I would recommend doing header.userInteractionEnabled = false so the clear header view does not receive touches. In case the view is overlapping a button.

[Rajal]

This is easiest way,I found so far,but if you need to use sections and rows and avoid overload of extra ones,try adding elements on UIView,instead directly in content view.Also,add constraints accordingly.

[Nuno Gonçalves]

I was gonna come here to answer this, as it was my approach. Very simple.

[plamut]

Please just fix the fonts a bit, no need to use bold and big letters, thanks. :)

[plamut]

No worries at all @PeiweiChen, we were all new here at some point. And thanks for your contribution!

[Suragch]

This answer was very helpful for me. Here is a Swift version.

[Admin]

Great but it will add header for first cell too, also it will not allow to pass data from an array in cellForRowAtIndexPath since all the cells will be filled with the first element of the array.

[Husam]

You should give a higher height in heightForRowAtIndexPath then add inset @UtkuDalmaz

[Brian]

If you don't want to add header to the first cell, just add a if/else statement in heightForHeaderInSection. For the array issue, just use indexPath.section as the array index(instead of indexPath.row). What you mentioned are not problems at all.

[Chandramani]

As "Abdullah Saeed" approch. you can try with setting header view too with all above step.

[averydev]

The default selection and editing modes do look bad, but those are easily overridden...

[Mr G]

I had some remnants of the uiview for the header and footer on a non white background. easy fix. Just override the view for header and footer as well and set the view background color to clear.

[iOS.Lover]

The result is too bad !

[Walter White]

It's just not correct - it's a dirty way, because Sections and Cells are different concepts and when you use this way, you can't use Sections the way they should be used. This will lead to problems when your database grows, because you will not structure your data representation properly. averydev's answer is correct - use custom spacer cells.

[damianostre]

This, like practically every other answer, does not work with dynamically sized cells where the height is calculated by their constraints: Adding a subview won't help unless you then also find all affected constraints and update them accordingly, which gets very complex, quickly.

[averydev]

@ThomasTempelmann I assume you have a good reason to size the cells based on constraints, but I've never found a great reason to do that. The closest i've come is to create a "template cell" based on constraints, populating it manually off screen, and then using the resulting size.

[Erik Nguyen]

Everyone please refer to this answer. It's so simple.