Swift 中的阴影与 Sketch 中的完全不同

Question

我正在尝试将阴影应用到 tableView cell，它是四舍五入的。

所以单元格视图的层次结构是：

-TableView
 -Cell //height 85
  -ContentView //height 85
   -View //height 85
    -RoundedView //height 65

这就是我应用阴影的方式：

extension UIView{
    func dropShadow(x: CGFloat, y: CGFloat, cornerRadius: CGFloat, shadowRadius: CGFloat, color: CGColor, opacity: Float) {
        self.layer.cornerRadius = cornerRadius //Give the view corner radius
        self.layer.shadowColor = color //Shadow color
        self.layer.shadowOffset = CGSize(width: x, height: y)//Offset like in Sketch X and Y
        self.layer.shadowRadius = shadowRadius //It should be the blur in Sketch
        self.layer.shadowOpacity = 1.0
        self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius)).cgPath
        self.layer.shouldRasterize = true
        self.layer.rasterizationScale = UIScreen.main.scale
    }
}

这些是 Sketch 属性：

我什至已经从 Sketch 中导出了阴影颜色：

cellShadow = UIColor(hue: 0.643, saturation: 0.061, brightness: 0.906, alpha: 0.5)//Alpha 0.5

这是 iPhone 上的输出：

这是 Sketch 中的设计：

为什么 iPhone 上的阴影会消失，为什么颜色会有点不同（我正在使用颜色选择器查看是否匹配但不匹配）？我做错了什么，谁能告诉我？

Answer 1

首先要注意的是您已将颜色设置为...

UIColor(hue: 0.643, saturation: 0.061, brightness: 0.906, alpha: 0.5)

这已经包含了 Sketch 的不透明度，因为 Sketch 定义了颜色中的阴影不透明度。

那么你正在这样做......

layer.shadowOpacity = 0.5

然后采用该颜色（不透明度为 50%）并对其应用 50% 的 alpha。所以现在你实际上有 25% 的不透明度。

在定义颜色时，将 alpha 设置为 1。不是 0.5。这会使颜色变暗。

你还没有展示你的其他阴影属性是如何在 Sketch 中设置的，所以我现在只能提供建议。

编辑

好的...

现在颜色看起来好多了。

切断的原因是你的阴影半径太大了！ （说真的，它需要那么大吗？通常 4 或 6 会削减它。20 是多余的。）

发生这种情况的原因是“内容视图”（上面有阴影的那个）和单元格边缘之间的距离不足以容纳完整的阴影。

垂直偏移为 5，半径为 20，这意味着从“内容视图”底部到单元格边缘至少需要 25 的距离才能完全显示阴影。 （15 在顶部... 20 - 5）。

另一个选项是在单元格上禁用clipsToBounds...cell.clipsToBounds = false。这样做的缺点是您的阴影可能会发生碰撞，从而在重叠处产生较暗的斑点。

TBH 不过，只要减小半径，问题就会消失 :D