表格 swift 背景上的渐变问题

Question

我有一个带有单元格的表格视图，我想应用自定义渐变。 我在这里搜索过，但我的代码没有任何作用。

我尝试添加渐变的代码部分

  override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "Menú Principal"
        tableView.backgroundView?.aplicarDegradadoDeportes() 
        self.navigationItem.setHidesBackButton(true, animated: true)      
    }

这是我的渐变函数

 func aplicarDegradadoDeportes() {
        let colorInicio =  UIColor(red: 255/255, green: 59/255, blue: 0/255, alpha: 1.0).cgColor
        let colorFin = UIColor(red: 255/255, green: 255/255, blue: 0/255, alpha: 1.0).cgColor
     let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [colorInicio, colorFin]
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
        gradientLayer.frame = self.bounds
        
        self.layer.insertSublayer(gradientLayer, at:0)
    }

请帮忙

Answer 1

您可以创建自定义UITableViewCell子类并覆盖layoutSubviews()函数。

例如像这样：

class GradientTableViewCell: UITableViewCell {
  // Declare the gradient layer as a property of the cell
  let gradientLayer = CAGradientLayer()

  override func layoutSubviews() {
    super.layoutSubviews()

    // Set the colors and locations for the gradient
    gradientLayer.colors = [UIColor(red: 255/255, green: 59/255, blue: 0/255, alpha: 1.0).cgColor, UIColor(red: 255/255, green: 255/255, blue: 0/255, alpha: 1.0).cgColor]
    gradientLayer.locations = [0.0, 1.0]

    // Set the start and end points for the gradient
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

    // Set the gradient layer's frame to the bounds of the cell
    gradientLayer.frame = self.bounds

    // Insert the gradient layer at the bottom of the cell's layer hierarchy
    self.layer.insertSublayer(gradientLayer, at: 0)
  }
}

在您的控制器中，您需要将单元格类设置为GradientTableViewCell ：

override func viewDidLoad() {
  super.viewDidLoad()
  self.title = "Menú Principal"
  self.navigationItem.setHidesBackButton(true, animated: true)

  // Set the cell class for the table view to be GradientTableViewCell
  self.tableView.register(GradientTableViewCell.self, forCellReuseIdentifier: "Cell")
}

在表数据的cellForRowAt函数中出队一个GradientTableViewCell而不是UITableViewCell

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  // Dequeue a GradientTableViewCell instead of a UITableViewCell
  let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! GradientTableViewCell

  // Configure the cell as needed

  return cell
}

现在您应该能够将渐变设置为单元格的背景

Answer 2

UITableView的backgroundView属性默认为nil 。 所以你的aplicarDegradadoDeportes函数实际上从未被调用过。

将视图设置为backgroundView然后它应该可以工作。

override func viewDidLoad() {
    super.viewDidLoad()
    self.title = "Menú Principal"
    let background = UIView()
    tableView.backgroundView = background
    background.aplicarDegradadoDeportes()
    self.navigationItem.setHidesBackButton(true, animated: true)      
}

唯一的问题是 tableView 会根据需要更新backgroundView的大小，但您的附加层可能不会自动调整大小以匹配。

一种解决方案是移动代码以在viewWillAppear中设置背景视图，或者您可以覆盖viewDidLayoutSubviews并更新图层的框架。

最好的解决方案是创建一个自定义的UIView子类来绘制渐变，以便它在调整大小时保持最新。

class GradientView: UIView {
    var gradient: CALayer!

    override func didMoveToSuperview() {
        super.didMoveToSuperview()

        if superview != nil {
            let colorInicio =  UIColor(red: 255/255, green: 59/255, blue: 0/255, alpha: 1.0).cgColor
            let colorFin = UIColor(red: 255/255, green: 255/255, blue: 0/255, alpha: 1.0).cgColor
            let gradientLayer = CAGradientLayer()
            gradientLayer.colors = [colorInicio, colorFin]
            gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
            gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
            gradientLayer.frame = self.bounds

            self.layer.insertSublayer(gradientLayer, at:0)
            gradient = gradientLayer
        }
    }

    override var frame: CGRect {
        didSet {
            gradient?.frame = bounds
        }
    }
}

然后你的视图控制器viewDidLoad变成：

override func viewDidLoad() {
    super.viewDidLoad()

    self.title = "Menú Principal"
    let background = GradientView()
    tableView.backgroundView = background
    self.navigationItem.setHidesBackButton(true, animated: true)      
}