1

我正在尝试将阴影应用于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 中导出了阴影颜色：

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

这是 iPhone 上的输出：

在此处输入图像描述

这是 Sketch 中的设计：

在此处输入图像描述

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

4

1 回答 1

2

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

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

于 2018-03-08T10:23:19.010 回答