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

我试图使我的表视图单元格看起来“材质”。这里有一些类似于我想做的事情（）：

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

我首先在XIB文件中设计了我的手机。我将名为

containerView

的

UIView

作为内容视图的子视图。我添加了约束，以便

containerView

的上、下、左、右边距为8。这是因为

containerView

比content视图小一点，所以我放在它上面的阴影是可见的

我还添加了一个名为

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

当我运行应用程序时，我得到了如下结果：

底部和左侧边缘的阴影非常好。但右翼是一场彻底的灾难。顶部边缘也没有阴影，这是不需要的。我试着用

阴影路径

和

阴影偏移量

进行反复试验，但总有一条或两条边缘看起来不好

---

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

在

awakeFromNib

中，您的视图大小错误。您需要将

container.layer.shadowPath=UIBezierPath（roundedRect:container.bounds，cornerRadius:4）。cgPath

移动到

layoutSubviews

或删除此代码

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

---

因此，将自动配置阴影

我认为您不需要阴影路径来添加简单阴影。将其移动到

layoutSubviews

会产生与以前相同的结果，但删除它并将

shadowOffset

更改为0会起作用。我从来不知道

阴影路径是可选的！您还可以尝试
UIBezierPath（rect:）
而不是
UIBezierPath（roundedRect:）