ios - 向 CardView UITableViewCell 添加间距

Question

我正在使用卡片 View 来构建我的表格单元格并且它正在工作，但我希望能够更改外观。

看起来像这样:

我希望它看起来像这样，表格单元格与边缘之间有空间，每个表格单元格之间有空间:

这是我创建卡片 View 表格单元格的代码:

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



    }

}

提前感谢您的帮助。

Answer 1

您可以轻松地为 TableView 中的行添加分隔。

这是一种方法:

将 UIView 添加到您的单元格中，它包含两个标签。然后从侧面、顶部和底部给该 View 一个插图。顶部/底部插图将为您提供行间距。

然后将边框和阴影效果应用到“内部” View - 此处以浅灰色显示，以便您可以看到:

结果(左图灰底，右图白底):

将“内部 View ”分配给 IBOutlet，您的代码将更改为:

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

}