spacing between UITableViewCells swift3

Question

I am creating a IOS app in swift and want to add spacing between cells like this

I would like to give space of each table view cell same like my attach image. How I can do that? and Right now all cells are coming without any space. swift3

Answer 1

Update: UIEdgeInsetsInsetRect method is replaced now you can do it like this

contentView.frame = contentView.frame.inset(by: margins)

Swift 4 answer:

in your custom cell class add this function

override func layoutSubviews() {
    super.layoutSubviews()
    //set the values for top,left,bottom,right margins
            let margins = UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
    contentView.frame = UIEdgeInsetsInsetRect(contentView.frame, margins)
}

You can change values as per your need

***** Note ***** calling super function

super.layoutSubviews()

is very important otherwise you will get into strange issues

Answer 2

Please try it. It is working fine for me.

You can use section instead of row. You return array count in numberOfSectionsInTableView method and set 1 in numberOfRowsInSection delegate method

Use [array objectAtIndex:indexPath.section] in cellForRowAtIndexPath method.

Set the heightForHeaderInSection as 40 or according to your requirement.

Thanks,Hope it will helps to you

Answer 3

One simple way is collection view instead of table view and give cell spacing to collection view and use

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize {
    let widthSize = collectionView.frame.size.width / 1
    return CGSize(width: widthSize-2, height: widthSize+20)
}

And if you want tableview only then add background view as container view and set background color white and cell background color clear color set backround view of cell leading, trilling, bottom to 10

backgroundView.layer.cornerRadius = 2.0
backgroundView.layer.masksToBounds = false
backgroundView.layer.shadowColor = UIColor.black.withAlphaComponent(0.2).cgColor

Answer 4

If you are using UITableViewCell to achieve this kind of layout, there is no provision to provide spacing between UITableViewCells.

Here are the options you can choose:

1. Create a custom UIView within UITableViewCell with clear background, so that it appears like the spacing between cells.

You need to set the background as clear of: cell, content view.

2. You can use UICollectionView instead of UITableView. It is much more flexible and you can design it the way you want.

Let me know if you want any more details regarding this.

Answer 5

1. From Storyboard, your view hierarchy should be like this. View CellContent (as highlighted) will contain all the components.

2. Give margin to View CellContent of 10px from top, bottom, leading & trailing from its superview.

3. Now, select the tblCell and change the background color.

4. Now run your project, make sure delegate and datasource are properly binded.

OUTPUT

NOTE: I just added 1 UILabel in View CellContent for dummy purpose.

Answer 6

you can try this in your class of tableView cell:

class cell: UITableViewCell{
override var frame: CGRect {
    get {
        return super.frame
    }
    set (newFrame) {
        var frame =  newFrame
        frame.origin.y += 4
        frame.size.height -= 2 * 5
        super.frame = frame
    }
  }
}

Answer 7

- Statically Set UITableViewCell Spacing - Swift 4 - Not Fully Tested.

Set your tableView Row height to whatever value you prefer.

 override func viewDidLoad() {
    super.viewDidLoad()
    tableView.estimatedRowHeight = <Your preferred cell size>
    tableView.rowHeight = UITableViewAutomaticDimension
    // make sure to set your TableView delegates
    tableView.dataSource = self
    tableView.delegate = self
}

 extension YourClass : UITexFieldDelegate, UITextFieldDataSource {
    //Now set your cells.
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell : UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "yourCell", for: indexPath) as! UITableViewCell

        //to help see the spacing.
        cell.backgroundColor = .red
        cell.textLabel?.text = "Cell"

        return cell
   }
   //display 3 cells
   func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 3
   }

   //now lets insert a headerView to create the spacing we want. (This will also work for viewForHeaderInSection)
   func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {

    //you can create your own custom view here
    let view = UIView()
    view.frame = CGRect(x: 0, y: 0, width: tableView.frame.width, height: 44) //size of a standard tableViewCell

    //this will hide the headerView and match the tableView's background color.
    view.backgroundColor = UIColor.clear
    return view
 }

  func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 44
  }
}