How to give space between two cells in tableview?

| | August 8, 2015

I want a space between two cell in table view,

I want cell like this,

enter image description here

How can i do that?

13 Responses to “How to give space between two cells in tableview?”

  1. Abdullah Saeed on November 30, -0001 @ 12:00 AM

    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.

  2. Pradumna Patil on November 30, -0001 @ 12:00 AM
     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];
    

    It worked for me .

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

  4. 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.backgroundColor = UIColor.clearColor()
        return header
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    
  5. 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.

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

  7. Khairulnizam Dahari on November 30, -0001 @ 12:00 AM

    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;
        }
    }
    
  8. 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).

  9. 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;
    }
    
  10. 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!

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

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

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

Leave a Reply