ios - 如何创建类似 Material 的表格 View 单元格的阴影？

Question

我试图让我的表格 View 单元格看起来“有质感”。这是类似于我想做的事情(source):

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

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

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

这是 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 之外，数据源和委托(delegate)方法没有什么特别之处。

当我运行该应用程序时，我得到了如下信息:

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

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

Answer 1

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

或删除此代码

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

所以影子会自动配置