Adding space between cells in a section in swift 2

Question

I need to add padding so space between each cell in each section in swift 2.1

but all I managed to do was adding header for section which I don't want that.

how can I add space between dynamic table cells?

Here is the code for adding header:

    // Set the spacing between sections
    override func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 10
    }

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

Here is creating table view code:

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return 1
}


override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return self.tableData.count
}


override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell  {

    //Table view cells are reused and should be dequeued using a cell identifier.
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath)

    let rowData = self.tableData[indexPath.row]

    cell.textLabel!.text = rowData.name
    cell.textLabel!.textAlignment = .Right


    if let url  = NSURL(string: rowData.img),
        data = NSData(contentsOfURL: url)
    {
        cell.imageView?.image = UIImage(data: data)
    }



    return cell
    }

Right now my table view look like this:

update code and table view :

Use tableview's delegate method heightForRowAtIndexPath which will return height of cell. — Mehul Sojitra, Jan 05 '16 at 09:46
Default height of cell is 44px. you can set custom height of table cell using that method only by returning float value see below ChikabuZ's answer. — Mehul Sojitra, Jan 05 '16 at 09:52

score 6 · Answer 1 · answered Jan 05 '16 at 09:45

6

There is no spacing between cells in a table view. Only in a collection view.

The options available to you are...

Use a collection view instead. It's relatively easy to make it look like a table view. Using this you can use the inter item spacing.
Increase the height of the cells by 2 pixels and add a blank area to the top or bottom of each. This will give the illusion of adding space between them.

answered Jan 05 '16 at 09:45

Fogmeister

76,236
42
207
306

thanks for answer, but how can i achieve the second method ? – anonymox Jan 05 '16 at 09:49
@anonymox if you have a height of 100 currently. Then just change it to 102. But keep all your views how they are. So the image will still go from 0 (top) to 100 (bottom). So it will have a gap of 2 at the bottom to the edge of the cell. – Fogmeister Jan 05 '16 at 09:55
i've done what you said but just the height of cells is changed to 102. and all of content are still close to each other. plz be aware that my table view is creating contents dynamically – anonymox Jan 05 '16 at 10:02
@anonymox yes, you are probably using AutoLayout to create the cells. You need to update the contents to make the gap at the bottom so that the content doesn't just grow to fit into the new height. – Fogmeister Jan 05 '16 at 10:05
i've set the cell height to 105 and height of content to 40 but still they don't get space in between. can i use sections to show my content instead of cells ? – anonymox Jan 05 '16 at 10:55
@anonymox Are you using auto layout? Is it in a storyboard? You haven't shown anywhere how you are actually creating the content and the layout. If you are using auto layout then you should be able to set the "vertical gap" between the image bottom and the cell bottom to 5 and have a gap of 5. Without knowing how you are creating the content it's hard to debug anything. – Fogmeister Jan 05 '16 at 11:12
yes i'm using storyboard and auto layout. but my prototype cell is empty. and it's content created from the code above! actually the content come from xml rss feed which I parse it and send it to table view – anonymox Jan 05 '16 at 11:21
@Fogmeister what if the cell you are using has a border color and border width and you want there to be space in between the bottom of one cell and the top of the next. If that's the case, would switching to a collection view be the only option? – Pat Needham Oct 04 '16 at 16:45
@PatNeedham you could still do it with a table view. Just use a UIView inside your cells. Of course, you're now getting to a scenario where a collection view would make it much easier so maybe it would be better to switch. – Fogmeister Oct 04 '16 at 16:57

ChikabuZ · Accepted Answer · 2016-01-05T14:13:08.780

2

You should just set cell height:

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat
{
   return 100 //cell height
}

UPDATE:

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat
{
   if indexPath.row % 2 == 0
   {
      return 100 //cell height
   }
   else
   {
      return 5 //space heigh
   }
}

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell  {

    //Table view cells are reused and should be dequeued using a cell identifier.
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath)

    if indexPath.row % 2 == 0
    {
        let rowData = self.tableData[indexPath.row/2]

        cell.textLabel!.text = rowData.name
        cell.textLabel!.textAlignment = .Right

        if let url  = NSURL(string: rowData.img),
            data = NSData(contentsOfURL: url)
        {
            cell.imageView?.image = UIImage(data: data)
        }
        else
        {
            cell.imageView?.image = nil
        }
    }
    else
    {
        cell.textLabel!.text = nil
        cell.imageView?.image = nil
    }
    return cell
}

edited Jan 05 '16 at 14:13

answered Jan 05 '16 at 09:44

ChikabuZ

10,031
5
63
86

your method just changes the height of cells ! not adding padding to them! – anonymox Jan 05 '16 at 10:00
Thanks. updated method worked. but there is bit problem which the space between cells is filled by texts ! and made it ugly any idea how to fix it ? i've put the new table view screenshot in the post above – anonymox Jan 05 '16 at 11:00
You should set cell.textLabel!.text = nil and cell.imageView?.image = nil if it space cell. – ChikabuZ Jan 05 '16 at 11:05
you mean i put this two lines in else block : cell.textLabel!.text = nil cell.imageView?.image = nil ... sorry i'm still new to swift ! – anonymox Jan 05 '16 at 11:10
but the problem here is that i need to write " index let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath)" line first to make cell readable! and it's not possible. – anonymox Jan 05 '16 at 11:12
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/99808/discussion-between-anonymox-and-chikabuz). – anonymox Jan 05 '16 at 11:22
i need your help, i can not figure it out how to stop reusing cells! please help me out! – anonymox Jan 05 '16 at 11:58
updated, don't forget get right value from data: let rowData = self.tableData[indexPath.row/2] – ChikabuZ Jan 05 '16 at 14:14
and self.tableData.count * 2 in numberOfRowsInSection – ChikabuZ Jan 05 '16 at 14:20
Thank you again. I almost forgot that. – anonymox Jan 06 '16 at 06:13

score 1 · Answer 3 · edited May 23 '17 at 10:30

1

You can Use the HeightForRowAtIndexPath or change the "row height" in your tableView Xib under the size Inspector...

Or you can check this link for objective-c: https://stackoverflow.com/a/14726457/4489420... In this it will create sections based on your array count...

edited May 23 '17 at 10:30

Community

1
1

answered Jan 05 '16 at 10:04

Ananth

205
3
13

score 0 · Answer 4 · answered Jan 05 '16 at 09:51

0

There are 2 ways to increase the height

in storyboard select you you tableview and set the rowHeight(which better suites you implementation) in size inspector

Add this function in your viewController

func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat 
 { return 35;//Whatever height you want...}

answered Jan 05 '16 at 09:51

Muhammad Saifullah

4,292
1
29
59

thans for response but it's not working for me. i need something like padding not changing height of cells ! because my contents are generated dynamically – anonymox Jan 05 '16 at 10:03
One way to do it in the storyboard, autolayout... add top and/or bottom constraints to supper view for your imageView.. – Muhammad Saifullah Jan 05 '16 at 10:09

score 0 · Answer 5 · answered Jan 05 '16 at 10:19

0

Check this one if you are using Dynamic Heights... https://www.facebook.com/iOSApplicationDevelopers/posts/1297809426911662

answered Jan 05 '16 at 10:19

Ananth

205
3
13

score 0 · Answer 6 · answered Jan 05 '16 at 10:36

0

Table view cells are contiguous by design: There is no "space" between two consecutive cells; only the 1 point thick separator line (which you can do away with).

You can add "padding" ( = internal space) inside each cell (i.e., make them taller - see other answers), but
You can not add "margin" ( = external space) between them (that would give you two separators between each cell, perhaps...?).

Collection view cells, on the other hand, do allow for extra space between cells.

answered Jan 05 '16 at 10:36

Nicolas Miari

16,006
8
81
189

thanks for participating but how can i add padding to table view cells programmatically ? – anonymox Jan 05 '16 at 11:04
Like others mentioned, use `heightForRowAtIndexPath()` and return the total height that you want (content + padding). – Nicolas Miari Jan 05 '16 at 11:13

Adding space between cells in a section in swift 2

6 Answers6