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

Как я могу настроить ячейку 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

}

Всего 3 ответа


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

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

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


Вы можете сделать горизонтальные и вертикальные градиенты с помощью следующего, но определите следующие переменные:

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)
}
}

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

    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)

Есть идеи?

10000