How to add spacing between UITableViewCells - Swift

Question

I have a table with some settings.

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 a gap between each UITableViewCell . I have already tried the following:

• Change the height of each row. This option does not work because I have borders. Adding more height simply increases the size of each row.

• Convert each row to a section, and then use heightForHeader in section. Message I want to avoid this option because I have to convert all my lines to sections.

• Add a transparent UIView to each line. Again, this option does not work because I have borders.

Is there any other alternative?

thanks

Answer 1

I tried the ozgur method, but that did not work, because I had borders between the table cells. In the end, I used the response from this post . Hope this helps.

Answer 2

First of all, you should move the code associated with the TableView from tableView:cellForRowAtIndexPath , preferably before viewDidLoad :

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

Secondly, UITableViewCells are reusable objects, therefore, if necessary, they are unloaded by a table view:

 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 to 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 the value of the textLabel frame and the corner radius 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 

Answer 3

You can add an interval by creating an extra view inside the cell that contains the contents of the cell, which has a distance between the top and bottom. Make the background color of the cell transparent, and it will look as if the cell was located above and below.