CODEWITHSUNDEEP
iosswiftuitableview
Ujjwal-Nadhani
Ujjwal-Nadhani

Reputation: 613

How to add spacing between UITableViewCells - Swift

I have a table with some customizations.

Photo of my tableView

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

Upvotes: 6

Views: 24232

Answers (3)

DatForis
DatForis

Reputation: 1341

You can add spacing by creating an extra view inside the cell that contains the content of the cell that has spacing between the top and the bottom. Make the background color of the cell translucent and it'll appear as though the cell has spacing above and below it

Upvotes: 0

Ujjwal-Nadhani
Ujjwal-Nadhani

Reputation: 613

I tried ozgur's method but it didn't work because I had borders between my table view cells. Eventually, I used the answer from this post. Hope it helps

Upvotes: 0

Ozgur Vatansever
Ozgur Vatansever

Reputation: 52203

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

Upvotes: 4

Related Questions