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

Solution 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

Solution 2

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.

Solution 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:

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.

Solution 4

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

View more solutions