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?

Answer 1

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

Answer 2

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!

Answer 3

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..

Answer 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.

Answer 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.

Answer 6

If someone looking for Swift version. Here you go.

func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 10; // space b/w cells
}

func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return items.count // count of items
}

func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let header = UIView()
    header.userInteractionEnabled = false
    header.backgroundColor = UIColor.clearColor()
    return header
}

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 1
}

Answer 7

For people that looking for alternative way of showing gaps between cells without using sections, you may want to show alternate colours and height like below. Use clearColor for the spacing.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

    if (indexPath.row % 2 == 1)
    {
        static NSString *CellIdentifier = @"cellID1";
        UITableViewCell *cell = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
        if (cell == nil) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                            reuseIdentifier:CellIdentifier];
        }

        cell.backgroundColor = [UIColor colorWhite];

        return cell;

    } else {

        static NSString *CellIdentifier2 = @"cellID2";
        UITableViewCell *cell2 = (UITableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier2];
        if (cell2 == nil) {
            cell2 = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
                                            reuseIdentifier:CellIdentifier2];
        }
        cell2.backgroundColor = [UIColor clearColor];

        return cell2;
    }

}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row % 2 == 1) {
        return 40.0;
    } else {
        return 2.0;
    }
}

Answer 8

Add these lines in the cellForRowAtIndexPath UITableViewDelegate method before returning the cell.

let separator = UIView(frame: CGRectMake(0, 0, cell!.bounds.size.width, 1))
separator.backgroundColor = UIColor.whiteColor()
cell.contentView.addSubview(separator)

Answer 9

Sometimes, you might really want to keep the tableview divided in rows, and have 1 section. For example, this could happen if you need to display a custom header for that table view that stays in place when you scroll through the section.

What I would recommend doing in this case, is returning a bigger float than the normal height of a cell in:

- (float)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

and then making sure that the table style is Plain, and that the cell separator is none. You can do that in the XIB file itself, or in code:

self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; self.tableView.style = UITableViewStylePlain;

Maybe also add the cell's selection style to none (otherwise it will look like you are selecting more than just the visible part of the cell).

cell.selectionStyle = UITableViewCellSelectionStyleNone;

This will give the impression of space between the cells, but at the same time keeping them as rows in one section (which sometimes is what you want).

Answer 10

I have used a simple and quick approach for this (using storyboard)

• Add UITableView in your controller
• Set the separator style to none (from attributes inspector)
• Set the height of the row 5 pts more from top and bottom from the desired height
• Now add an image in the cell, pin it from left and right but leave 5 pts space (for padding like feel) and set the background of the image same as the background you want for cell

When the table view will be loaded, it will feel like there are spaces between cells.

Answer 11

For spacing between cells like the ones in your screenshot, there is no need for custom cells (for their look anyway, like the gradient bkg and so on, this could anyway be a good idea, but this won't help for your spacing between cells)

To achieve this kind of spacing, simply use different sections in your UITableView.

[EDIT] Everything is explained In Apple's TableView Programming Guide (and that's worth reading it, as it contains a lot of stuff you should know about tableviews)

Answer 12

The best way to do that using xib file. give top and bottom constraint to it. for example, here I give bottom constraint 10 and make sure give perfect height to cell as shown as given below.here in code 'joinTableViewCell' is fileName of xib file.

extension JoinTableViewController: UITableViewDataSource,UITableViewDelegate {
    
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 4
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = Bundle.main.loadNibNamed("joinTableViewCell", owner: self, options: nil)?.first as! joinTableViewCell
        cell.ImgView.layer.masksToBounds = true
        cell.ImgView.cornerRadius(cell.ImgView.bounds.width / 2)
        cell.lblName.text = "Christian Bell"
        cell.lblJoin.text = "Joined"+"\t"+"Sep 3"
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 90
    }
    
    
    
}

Answer 13

What you're trying to achieve, visually, would be the same as adding the content of each cell inside a container View with a gray background, and having that view inside the cell. I don't think there's a need to add spaces between cells.

Answer 14

I don't know why all the answers that complicated. KIS, only using storyboard I've put a UIView inside the tableCell Content View; now the UIView height is less than Content View height, and that's it!

Play with the Content View color and the UIView color to get the desired result.

Answer 15

My easy solution using Swift :

// Inside UITableViewCell subclass
override func layoutSubviews() {
    let f = contentView.frame
    let fr = UIEdgeInsetsInsetRect(f, UIEdgeInsetsMake(10, 10, 10, 10))
    contentView.frame = fr
}

or one line code

override func layoutSubviews() {
    contentView.frame = UIEdgeInsetsInsetRect(contentView.frame, UIEdgeInsetsMake(10, 10, 10, 10))
}

Result

Answer 16

* WORKING WITH IOS 9 XCODE 7.3 *

The most straight forward way to achieve this is to simply add this code to your cellForRowAtIndexPath method.

    cell.separatorInset.left = 20.0
    cell.separatorInset.right = 20.0
    cell.separatorInset.top = 20.0
    cell.separatorInset.bottom = 20.0
    cell.layer.borderWidth = 3
    cell.layer.cornerRadius = 20.0
    cell.layer.borderColor = UIColor.flatSkyBlueColorDark().CGColor

Then go to your story board and click on the tableview. Go to identity inspector and change the View's background color to whatever border color was set in the method. Voila! Play with the values to get the desired output. Hope this helps!

Note: If using Chameleon library you must set the background color for the view in code, not via the story board plugin. For some reason the color seems to be off by a shade.

Answer 17

Well what I did is simply simulate the space by creating a simple custom cell that is a little larger than what I want (cell + gap/2), and then put all my cell's content in an inner-view.

Then put your cell's topmost view as the color of your background, and the inner-view as your actual cell. And you'll have the illusion of having space between cells, when it's actually just a larger cell with borders.

Answer 18

You don't have to assign each section for each cell. Just create a UIView (container) inside your cell, margin it with cell's view. And we layout components like label, text, image on that container.

Answer 19

I suggest to create a custom UITableViewCell base class and use this class like below,

1. Create custom UITableViewCell class
2. Create a UIView in new class, this will act as the 'baseContentView' and it will be immediate child of 'UITableViewCell.contentView'
3. Adjust the top 'padding' on 'baseContentView' (this will be the separator/gap) from parent view (UITableViewCell.contentView)
4. Inherit all your custom classes from this class rather than UITableViewCell
5. Add all the content/subviews to 'baseContentView' rather than 'self.contentView'

You can play with the 'padding' as per your need.

Answer 20

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{

    return __titlesArray.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;
}
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 10;
}
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *header = [[UIView alloc]init];
    header.backgroundColor = [UIColor clearColor];
    return header;

}

Answer 21

I use like:

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return 194.0;
}

override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
    cell.contentView.backgroundColor = UIColor.clearColor()
    let whiteRoundedView : UIView = UIView(frame: CGRectMake(0, 0, self.view.frame.size.width, 185))

    whiteRoundedView.backgroundColor = UIColor( red: CGFloat(61.0/255.0), green: CGFloat(117.0/255.0), blue: CGFloat(147.0/255.0), alpha: CGFloat(1.0))

    whiteRoundedView.layer.masksToBounds = false
    whiteRoundedView.layer.cornerRadius = 3.0
    whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)
    whiteRoundedView.layer.shadowOpacity = 0.5
    cell.contentView.addSubview(whiteRoundedView)
    cell.contentView.sendSubviewToBack(whiteRoundedView)
}

Get Color Code RGB values from:

Answer 22

1) first create 2 sections in table view. 2) create an empty cell. 3) create the cell with data you want to display. 4) use the method

• (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { if (indexPath.section==0) {

  if (indexPath.row % 2 != 1) { return 15.0; } else { return 100; } } else

  if (indexPath.row % 2 != 1) {
      return 100.0;
  } else {
      return 15.0;
  }
  

}

It will add space between the cells. It worked for me.

Answer 23

Here is my method with Swift 3:

In ViewDidLoad(), add:

self.tableView.rowHeight = 500.0

In tableview "CellForRowAt", add following:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)

    // Configure the cell...
    var actualContentView = UIView()
    actualContentView.frame = CGRect(x: 10, y: 10, width: cell.contentView.frame.width - 20, height: cell.contentView.frame.height - 20)
    actualContentView.backgroundColor = UIColor.blue
    cell.contentView.addSubview(actualContentView)

    return cell
}

Answer 24

in your cellForRowAt

cell.layer.borderWidth = 2
cell.layer.cornerRadius = 10
cell.layer.borderColor = UIColor.systemBackground.cgColor

Answer 25

In Table View DataSource there are two methods named number of sections and number of rows In sections return 3; In Rows return 1;

Answer 26

I have checked all the answers but I think this is the easiest way:

 UIView * theContentView = [UIView alloc]initWithFrame:CGRectMake(0,gap,width,height)];
 theContentView.backgroundcolor = [UIColor lightGrayColor];//contentColor
 cell.backgroundcolor = [UIColor blackColor];//gapColor
 [cell addSubview: theContentView]

The prototype code says You can create a subview to show the content of cell and the rest is the gap as you wish.