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

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的en扩展名为视图添加渐变：

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)