Как добавить тень градиента в ячейку таблицы, похожую на приложение Apple Health?

Question

Как настроить ячейку tableView так, чтобы тень снизу градиента была похожа на оранжевые ячейки tableView в приложении Health.

Я бы хотел сделать это как можно ближе к этому.

Это то, что у меня сейчас есть, я добавил разделение между ячейками с помощью белой рамки и добавил радиус для углов 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

Пожалуйста, добавьте эти строки в свой класс ячейки.

    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)

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

Я полагаю, что вместо того, чтобы отбрасывать «градиентную тень» по нижней части ячейки, вы просто хотите, чтобы в ячейке был градиент фона от более светлого цвета вверху до более темного цвета снизу.

Я обычно использую расширение en 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])

Иногда это не работает, если вы делаете какой-то нестандартный рисунок в слоях вашего вида, но я считаю, что это будет хорошо для ваших нужд.