Add Spacing to CardView TableViewCell

Question

I am using a card view to build my table cells and it is working but I want to be able to change the appearance.

It looks like this:

And I want it to look like this with space between the table cell and the edges and space between each table cell:

Here is my code for creating the card view table cells:

class ModelCell: UITableViewCell {

// Outlets
@IBOutlet weak var modelTitleLabel: UILabel!
@IBOutlet weak var modelDescriptionLabel: UILabel!


override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code
}

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    // Configure the view for the selected state
}

@IBInspectable var cornerRadius: CGFloat = 10

@IBInspectable var shadowOffsetWidth: Int = 0
@IBInspectable var shadowOffsetHeight: Int = 3
@IBInspectable var shadowColor: UIColor? = UIColor.white
@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
    layer.borderWidth = 1.0
    layer.borderColor = UIColor(red:0.00, green:0.87, blue:0.39, alpha:1.0).cgColor



    }

}

Thank you for your help in advance.

you should go with vertical collection view. you can easily manage that with collection view. — Tushar Sharma, Oct 27 '17 at 18:04
@TusharSharma I was going off of this: https://stackoverflow.com/questions/28141021/do-card-view-with-swift which has a picture of pretty much what I want, but when I implemented it it didn't come out how it does in the picture on that stack overflow question. — Ben Nalle, Oct 27 '17 at 18:06
check my answer here you will get some idea -: https://stackoverflow.com/questions/45906041/how-can-i-create-space-between-table-view-cells-using-constraints/45908474#45908474.You can easily handle left and right spaces as well. — Tushar Sharma, Oct 27 '17 at 18:10

DonMag · Accepted Answer · 2017-11-06T19:27:55.273

5

You can easily add separation for rows in a table view.

Here is one method:

Add a UIView to your cell, that holds the two labels. Then give that view an inset from the sides and top and bottom. The top/bottom inset is what will give you spacing between rows.

Then apply your border and shadow effects to that "inner" view - shown here in light-gray so you can see it:

Results (left image is with gray background, right image is with white background):

Assign the "Inner view" to an IBOutlet, and your code changes to:

override func layoutSubviews() {

    // just use the layer's shadow... adding the Bezier         
    //let shadowPath = UIBezierPath(roundedRect: innerView.bounds, cornerRadius: cornerRadius)
    //innerView.layer.shadowPath = shadowPath.cgPath

    innerView.layer.cornerRadius = cornerRadius
    innerView.layer.masksToBounds = false
    innerView.layer.shadowColor = shadowColor?.cgColor
    innerView.layer.shadowOffset = CGSize(width: shadowOffsetWidth, height: shadowOffsetHeight);
    innerView.layer.shadowOpacity = shadowOpacity
    innerView.layer.borderWidth = 1.0
    innerView.layer.borderColor = UIColor(red:0.00, green:0.87, blue:0.39, alpha:1.0).cgColor

}

edited Nov 06 '17 at 19:27

answered Oct 27 '17 at 19:32

DonMag

69,424
5
50
86

Thank you @DonMag, once again. That is what I ended up doing for my solution. – Ben Nalle Oct 27 '17 at 19:48
@BenNalle even though that helped you , but when when it comes to customising always prefer collection view. – Tushar Sharma Oct 27 '17 at 19:52
Note: I just changed the shadow code... using Bezier Path for the shadow causes sizing issues, and it really doesn't look any different than just using the layer shadow as-is. – DonMag Oct 27 '17 at 19:52
@TusharSharma - collection views have their advantages, but sometimes it's easier / better to "go with what works." For example, getting auto-sizing cells with dynamic text can be rather cumbersome with collection views, where it is very straight-forward and reliable with table views. – DonMag Oct 27 '17 at 20:11
@DonMag I totally agree with you ,your answers are really very helpful ,indeed table view are your partner in that case . – Tushar Sharma Oct 27 '17 at 20:14

Add Spacing to CardView TableViewCell

1 Answers1