spacing between UITableViewCells

Question

I am creating a ios app in swift and want to add spacing between cells like Facebook (pic bellow).

I am using a custom nib for the posts. I know to use UITableViewController. I figure I would use a separator style but it does not achieve the effect. I goggled around for hours and can't find a single tutorial in swift that makes sense! could some one explain how they did it in there app using swift? thanks!

Answer 1

This is my solution with result: (based on Jorge Casariego's answer)

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {     let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! CustomApplicationCell      cell.contentView.backgroundColor = UIColor.clear      let whiteRoundedView : UIView = UIView(frame: CGRectMake(10, 8, self.view.frame.size.width - 20, 149))      whiteRoundedView.layer.backgroundColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), [1.0, 1.0, 1.0, 0.8])     whiteRoundedView.layer.masksToBounds = false     whiteRoundedView.layer.cornerRadius = 2.0     whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)     whiteRoundedView.layer.shadowOpacity = 0.2      cell.contentView.addSubview(whiteRoundedView)     cell.contentView.sendSubviewToBack(whiteRoundedView)      return cell } 

table row height: 165 point

header section height, footer section height: 10 point

and result

Edit For Swift 3 Syntax:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {     let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! CustomApplicationCell      cell.contentView.backgroundColor = UIColor.clear      let whiteRoundedView : UIView = UIView(frame: CGRect(x: 10, y: 8, width: self.view.frame.size.width - 20, height: 120))      whiteRoundedView.layer.backgroundColor = CGColor(colorSpace: CGColorSpaceCreateDeviceRGB(), components: [1.0, 1.0, 1.0, 0.9])     whiteRoundedView.layer.masksToBounds = false     whiteRoundedView.layer.cornerRadius = 2.0     whiteRoundedView.layer.shadowOffset = CGSize(width: -1, height: 1)     whiteRoundedView.layer.shadowOpacity = 0.2      cell.contentView.addSubview(whiteRoundedView)     cell.contentView.sendSubview(toBack: whiteRoundedView)      return cell } 

---

Simplest way for creating material card view:

github.com/SwiftCardView

Create CardView.swift

@IBDesignable class CardView: UIView {      @IBInspectable var cornerRadius: CGFloat = 2      @IBInspectable var shadowOffsetWidth: Int = 0     @IBInspectable var shadowOffsetHeight: Int = 3     @IBInspectable var shadowColor: UIColor? = .black     @IBInspectable var shadowOpacity: Float = 0.5      override func layoutSubviews() {         layer.cornerRadius = cornerRadius         let shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius)          layer.masksToBounds = false         layer.shadowColor = shadowColor?.cgColor         layer.shadowOffset = CGSize(width: shadowOffsetWidth, height: shadowOffsetHeight)         layer.shadowOpacity = shadowOpacity         layer.shadowPath = shadowPath.cgPath     } } 

Now just add CardView class to your UIView.

Answer 2

With Swift 2 you can do spacing between UITableViewCells in this way:

In your TableViewController copy this:

    // In this case I returning 140.0. You can change this value depending of your cell     override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {         return 140.0     }      override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {          cell.contentView.backgroundColor = UIColor.clearColor()          let whiteRoundedView : UIView = UIView(frame: CGRectMake(0, 10, self.view.frame.size.width, 120))          whiteRoundedView.layer.backgroundColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), [1.0, 1.0, 1.0, 1.0])         whiteRoundedView.layer.masksToBounds = false         whiteRoundedView.layer.cornerRadius = 2.0         whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)         whiteRoundedView.layer.shadowOpacity = 0.2          cell.contentView.addSubview(whiteRoundedView)         cell.contentView.sendSubviewToBack(whiteRoundedView)     } 

This is the result: