如何创建类似材质的表格视图单元格的阴影？

Question

我正在尝试使表格视图单元格看起来“实质性”。这与我想做的事情（source）类似：

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

我首先在XIB文件中设计了单元格。我将名为UIView的{​​{1}}作为内容视图的子视图。我添加了约束，以使containerView的顶部，底部，左侧，右侧边距为8。这是为了使containerView小于内容视图，因此我放置了阴影它将可见。

我还添加了一个名为containerView的{​​{1}}作为UILabel的子视图，以显示一些文本。

这是label子类：

containerView

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

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

底部和左侧边缘的阴影非常好。但是右边是完全的灾难。顶部边缘也没有阴影，这是不希望的。我尝试对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进行试错，但总是有一个或两个看起来很糟糕的边缘。

如何在单元的所有边缘上形成阴影，如第一幅图像所示？

Answer 1

在awakeFromNib中，您的视图尺寸错误。您需要将container.layer.shadowPath = UIBezierPath(roundedRect: container.bounds, cornerRadius: 4).cgPath移至layoutSubviews

或删除此代码

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

因此阴影将被自动配置