如何创建 material-like table 视图单元格的阴影？

Question

我正在尝试让我的 table 视图单元格看起来 "material"。这是类似于我想做的事情（source）：

请注意，上图中整个 table 视图周围有阴影。我想要的是阴影，但 应用于每个 table 视图单元格 ，而不是整个 table 视图。

我首先在 XIB 文件中设计了我的单元格。我将一个名为 containerView 的 UIView 作为内容视图的子视图。我添加了约束，使 containerView 的上、下、左、右边距为 8。这样 containerView 比内容视图小一点，所以我放的阴影它将可见。

我还添加了一个名为 label 的 UILabel 作为 containerView 的子视图来显示一些文本。

这是 UITableViewCell 子类：

class QueueItemCell: UITableViewCell {
    @IBOutlet var label: UILabel!
    @IBOutlet var container: UIView!

    override func setHighlighted(_ highlighted: Bool, animated: Bool) {
        ...
    }

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

    override func awakeFromNib() {
        container.layer.shadowColor = UIColor.black.cgColor
        container.layer.shadowOpacity = 0.7
        container.layer.shadowOffset = CGSize(width: 3, height: 9)
        container.layer.shadowRadius = 4
        container.layer.cornerRadius = 4
        container.layer.shadowPath = UIBezierPath(roundedRect: container.bounds, cornerRadius: 4).cgPath
        selectionStyle = .none
    }
}

除了我在 heightForRowAt.

中将单元格的高度设置为 61 之外，数据源和委托方法没有什么特别之处

当我运行应用程序时，我得到了这样的东西：

底部和左侧边缘的阴影非常好。但右边缘是一场彻底的灾难。顶部边缘也没有阴影，这是不受欢迎的。我尝试用 shadowPath 和 shadowOffset 进行反复试验，但总有一个或两个边缘看起来很糟糕。

如何在单元格的所有边缘上实现阴影，如第一张图片所示？

Answer 1

在 awakeFromNib 中，您的视图大小有误。您需要将 container.layer.shadowPath = UIBezierPath(roundedRect: container.bounds, cornerRadius: 4).cgPath 移动到 layoutSubviews

或删除此代码

container.layer.shadowPath = UIBezierPath(roundedRect: container.bounds, cornerRadius: 4).cgPath

所以影子会自动配置

如何创建 material-like table 视图单元格的阴影？

How to create the shadow of material-like table view cells?

shadow

calayer

ios

swift