How to add spacing between UITableViewCells - Swift

Question

I have a table with some customizations.

Here is my code:

import UIKit

class ViewController: UIViewController, UITableViewDelegate {
    var exercises : [String] = ["Swimming", "Running", "Weight Lifting", "Biking", "Climbing"]

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.
    }

    //Necessary for basic tableView setup. Defines number of rows in a specific section.
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int{
        //Setting the amount of rows to the number of elements in exercises. This function returns that.
        tableView.backgroundColor = UIColor.clearColor()
        return exercises.count

    }

    //Necessary for basic tableView setup. Helps us out content for every cell in the index path. Runs = rows
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{



        tableView.separatorColor = UIColor.clearColor()

        //Setting the footer to default so the extra junk does not show
        tableView.tableFooterView = UIView()

        //This will be returned. This automatically creates a prototype cell
        var cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "Cell")

        //Setting every cell to the respective item in exercises
        cell.textLabel?.text = exercises[indexPath.row]
        cell.textLabel?.font = UIFont(name: "Avenir-Light", size: 17)
        cell.textLabel?.textColor = UIColor.whiteColor()
        cell.textLabel?.textAlignment = .Center

        //Border Code
        cell.layer.borderWidth = 2.0
        cell.layer.borderColor = UIColor.whiteColor().CGColor

        //Round Corners
        cell.layer.cornerRadius = 20




        return cell

    }
    func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
        cell.backgroundColor = UIColor.clearColor()

    }


    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

I want to have some spacing between each UITableViewCell. I have already tried the following:

1. Change the height of each row. This option does not work because I have borders. Adding more height just makes each row look larger.

2. Convert each row into a section and then use heightForHeader in section.The post. I want to avoid this option because I would have to convert all my rows to sections.

3. Add a transparent UIView within each row. Again, this option does not work because I have borders.

Is there any other alternative?

Thanks

Answer 1

First of all, you should move tableView related code out of tableView:cellForRowAtIndexPath, preferably to viewDidLoad:

override func viewDidLoad {
  super.viewDidLoad()
  tableView.separatorColor = UIColor.clearColor()
  tableView.tableFooterView = UIView()
}

Secondly, UITableViewCells are reusable objects so they are dequeued by the tableView when required:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  var cell = tableView.dequeueReusableCellWithIdentifier("Cell")
  if cell == nil {
    cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "Cell")
  }
  ...
}

As for your problem, you should either set rowHeight on tableView

override func viewDidLoad {
  super.viewDidLoad()
  ...
  tableView.rowHeight = 100.0
}

or implement tableView:heightForRowAtIndexPath: instead:

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

You should also update textLabel's border and corner radius value instead of the cell:

//Border Code
cell.textLabel.layer.borderWidth = 2.0
cell.textLabel.layer.borderColor = UIColor.whiteColor().CGColor

//Round Corners
cell.textLabel.layer.cornerRadius = 20