渐变没有填满UITableViewCell。

Question

我编写了一个自定义的UITableView单元格，我想为它的背景使用渐变。无论我怎么尝试，渐变都不能填满单元格，也不能使用它的圆角。下面是使用渐变之前的样子 我这里把单元格的蓝色做了，这样你就可以看到它们了），这是渐变后的样子。

这是我目前掌握的情况

import UIKit
import PlaygroundSupport

class ViewController: UITableViewController {
    override func numberOfSections(in tableView: UITableView) -> Int {
        return(5)
    }

    override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let view = UIView()
        view.backgroundColor = .white
        return view
    }

    override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        40
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        tableView.rowHeight = 200
        return 1
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CardCell", for: indexPath) as! CardCell
        return cell
    }

    override func viewDidLoad(){
        super.viewDidLoad()
        tableView.register(CardCell.self, forCellReuseIdentifier: "CardCell")
    }
}

class CardCell: UITableViewCell {

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {

        super.init(style: style, reuseIdentifier: reuseIdentifier)

        layer.masksToBounds = false
        layer.shadowOpacity = 0.23
        layer.shadowRadius = 12
        layer.shadowOffset = CGSize(width: 0, height: 0)
        layer.shadowColor = UIColor.black.cgColor
        layer.cornerRadius = 6

        var colorTop = UIColor()
        colorTop = .red
        var colorBottom = UIColor()
        colorBottom = .blue

        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [colorTop.cgColor, colorBottom.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.0)
        gradientLayer.locations = [NSNumber(floatLiteral: 0.0), NSNumber(floatLiteral: 1.0)]
        gradientLayer.frame = self.bounds

        contentView.layer.insertSublayer(gradientLayer, at: 0)


        contentView.layer.cornerRadius = 100

    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

PlaygroundPage.current.liveView = ViewController()

Answer 1

让你的渐变层可以在单元格范围内访问，并将其框架设置在单元格内。layoutIfNeeded 方法。

class Cell: UITableViewCell {

    // ...

    let gradientLayer = CAGradientLayer()

    override func layoutIfNeeded() {
        super.layoutIfNeeded()

        gradientLayer.frame = bounds
    }
}

Answer 2

你需要做的是... 把框架和角半径移到... ... layoutIfNeeded

class CardCell: UITableViewCell {
    private lazy  var gradientLayer : CAGradientLayer = {
        let layer = CAGradientLayer()
        layer.colors = [UIColor.red, UIColor.blue].map{$0.cgColor}
        layer.startPoint = CGPoint(x: 0.5, y: 1.0)
        layer.endPoint = CGPoint(x: 0.5, y: 0.0)
        layer.locations = [NSNumber(floatLiteral: 0.0), NSNumber(floatLiteral: 1.0)]
        layer.frame = self.bounds
        layer.masksToBounds = true
       return layer
    }()

    override func layoutIfNeeded() {
        super.layoutIfNeeded()
        gradientLayer.frame = bounds
        contentView.layer.cornerRadius = bounds.maxY/2
    }

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {

        super.init(style: style, reuseIdentifier: reuseIdentifier)

        layer.masksToBounds = false
        layer.shadowOpacity = 0.9
        layer.shadowRadius = 12
        layer.shadowOffset = CGSize(width: 0, height: 0)
        layer.shadowColor = UIColor.black.cgColor
        layer.cornerRadius = 6

        contentView.layer.insertSublayer(gradientLayer, at: 0)
        contentView.layer.masksToBounds = true


    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

PlaygroundPage.current.liveView = ViewController()

结果

Answer 3

gradientLayer的框架需要更新

只需覆盖func layoutSubviews()

class CardCell: UITableViewCell {

    let gradientLayer = CAGradientLayer()

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {

        super.init(style: style, reuseIdentifier: reuseIdentifier)

        layer.masksToBounds = false
        layer.shadowOpacity = 0.23
        layer.shadowRadius = 12
        layer.shadowOffset = CGSize(width: 0, height: 0)
        layer.shadowColor = UIColor.black.cgColor
        layer.cornerRadius = 6

        var colorTop = UIColor()
        colorTop = .red
        var colorBottom = UIColor()
        colorBottom = .blue

        gradientLayer.colors = [colorTop.cgColor, colorBottom.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0.5, y: 1.0)
        gradientLayer.endPoint = CGPoint(x: 0.5, y: 0.0)
        gradientLayer.locations = [NSNumber(floatLiteral: 0.0), NSNumber(floatLiteral: 1.0)]
        gradientLayer.frame = self.bounds

        contentView.layer.insertSublayer(gradientLayer, at: 0)


        contentView.layer.cornerRadius = 100

    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer.frame = bounds
    }

}