如何向类似于 Apple Health 应用程序的 tableView 单元格添加渐变阴影？

Question

如何自定义 tableView 单元格，使其底部有一个渐变阴影，类似于 Health App 中的橙色 tableView 单元格。

我想让它尽可能接近这个。

这是我目前拥有的，我使用白色边框添加了单元格之间的分隔，并为角落添加了 8 的半径。

我可以添加什么来制作渐变？

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cellIdentifier: String = "stockCell"
    let myCell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier)!

    myCell.textLabel?.textAlignment = .center
    myCell.textLabel?.font = .boldSystemFont(ofSize: 18)
    myCell.textLabel?.textColor = UIColor.white
    myCell.layer.backgroundColor = UIColor(red:0.86, green:0.25, blue:0.25, alpha:1.0).cgColor

    let item: StockModel = feedItems[indexPath.row] as! StockModel

    myCell.layer.cornerRadius = 8.0
    myCell.layer.masksToBounds = true
    myCell.layer.borderColor = UIColor.white.cgColor
    myCell.layer.borderWidth = 5.0

    myCell.layer.cornerRadius = 20
    myCell.clipsToBounds = true
}

Answer 1

我相信不是在单元格底部投射“渐变阴影”，而是希望单元格具有从顶部较浅颜色到底部较深颜色的背景渐变。

我通常使用UIView 的扩展来为视图添加渐变：

extension UIView {
  func setGradient(colors: [CGColor]) {
    let gradient = CAGradientLayer()
    gradient.frame = self.bounds
    gradient.colors = colors
    self.layer.insertSublayer(gradient, at: 0)
  }
}

然后，尝试在您的代码中使用类似的内容：

myCell.setGradient([cgColorLight, cgColorDark])

如果您在视图的图层中进行一些自定义绘图，这有时不起作用，但我相信它应该可以满足您的需求。

Answer 2

您可以使用以下方法进行水平和垂直渐变，但定义以下变量：

typealias GradientPoints = (startPoint: CGPoint, endPoint: CGPoint)

enum GradientOrientation {
case topRightBottomLeft
case topLeftBottomRight
case horizontal
case vertical

var startPoint: CGPoint {
    return points.startPoint
}

var endPoint: CGPoint {
    return points.endPoint
}

var points: GradientPoints {
    switch self {
    case .topRightBottomLeft:
        return (CGPoint.init(x: 0.0, y: 1.0), CGPoint.init(x: 1.0, y: 0.0))
    case .topLeftBottomRight:
        return (CGPoint.init(x: 0.0, y: 0.0), CGPoint.init(x: 1, y: 1))
    case .horizontal:
        return (CGPoint.init(x: 0.0, y: 0.5), CGPoint.init(x: 1.0, y: 0.5))
    case .vertical:
        return (CGPoint.init(x: 0.0, y: 0.0), CGPoint.init(x: 0.0, y: 1.0))
    }
}
}

并为uiview创建一个扩展如下：

extension UIView{

func applyGradient(withColours colours: [UIColor], gradientOrientation orientation: GradientOrientation) {
    let gradient: CAGradientLayer = CAGradientLayer()
    gradient.frame = self.bounds
    gradient.colors = colours.map { $0.cgColor }
    gradient.startPoint = orientation.startPoint
    gradient.endPoint = orientation.endPoint
    self.layer.insertSublayer(gradient, at: 0)
}
}

Answer 3

请在您的单元格类中添加这些行。

    let gradient = CAGradientLayer()
    gradient.frame = self.view.bounds;
    gradient.startPoint = CGPoint(x: 0, y: 0)
    gradient.endPoint = CGPoint(x: 0, y: 1)
    gradient.colors = [UIColor.green.cgColor, UIColor.white.cgColor];
    self.view.layer.insertSublayer(gradient, at: 0)