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

i dnt knw how can i solve it thats why for posting here - dahiya_boy — Ankit Kumawat, Dec 04 '17 at 06:43

score 11 · Answer 1 · answered Dec 04 '17 at 07:39

11

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
    }
  }
}

answered Dec 04 '17 at 07:39

1

@Ankit Kumawat let me know if found this answer wrong/right! – Dec 04 '17 at 07:46

score 7 · Answer 2 · edited Dec 31 '18 at 16:11

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

score 6 · Answer 3 · answered Dec 04 '17 at 07:00

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

Give margin to View CellContent of 10px from top, bottom, leading & trailing from its superview.
Now, select the tblCell and change the background color.

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.

PGDev · Answer 4 · 2017-12-04T07:06:35.240

3

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:

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.

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.

edited Dec 04 '17 at 07:06

answered Dec 04 '17 at 06:51

PGDev

23,751
6
34
88

i already design custom UIView within UITableViewCell with clear background but not appears the spacing between cells – Ankit Kumawat Dec 04 '17 at 06:55
Can you show the view hierarchy? And the output that you are getting – PGDev Dec 04 '17 at 06:56
Updated the answer. – PGDev Dec 04 '17 at 07:06

score 2 · Answer 5 · edited Jan 16 '18 at 10:13

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

sorry for that but your answer not correct not helpful - 234 Shk — Ankit Kumawat, Dec 04 '17 at 06:54

score 0 · Answer 6 · answered Dec 04 '17 at 11:45

0

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

answered Dec 04 '17 at 11:45

Sanjukta

1,057
6
16

What will you do if you have to handle multiple sections – Gulfam Khan Jan 03 '19 at 14:56

score 0 · Answer 7 · answered Mar 14 '18 at 15:38

- 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
  }
}

spacing between UITableViewCells swift3

7 Answers7