ios - 为什么我的渐变子图层显示得很奇怪？

Question

我正在尝试向自定义表格单元格中的 View 添加渐变。然而，它显示得很奇怪，好像它没有从容器中获得正确的 CGRect。

首先，我将标签及其周围的框分别连接到属性 label 和 labelContainer。

我定义了一个梯度函数:

func gradient(view: UIView) -> CAGradientLayer {
    let gradient = CAGradientLayer()
    gradient.frame = view.bounds
    gradient.startPoint = CGPoint(x: 0, y: 0.5)
    gradient.endPoint = CGPoint(x: 1, y: 0.5)
    gradient.colors = [
        UIColor.red.cgColor,UIColor.blue.cgColor]
    return gradient
}

在 cellForRowAt 中，我有:

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

    cell.label.text = categories![indexPath.section].items.filter(predicate)[indexPath.row].title

    cell.labelContainer.layer.insertSublayer(gradient(view: cell.labelContainer), at:0)

    cell.selectionStyle = .none

    return cell
}

但是结果表看起来是这样的:

这一切都有点奇怪和不一致。

Answer 1

你有几个问题......

1) 单元格被重用 - 每次请求单元格时都会添加一个新的子层。这就是为什么您会在细胞上看到多个梯度层。

2) 图层不会随 View “自动调整大小”，因此您需要在单元框更改时随时更新图层框。在初始化时，单元框架尚未(必须)设置。

您可能会发现使用具有“内置”渐变的子类 UIView 比在配置单元格时尝试添加它要容易得多。

试一试...

创建一个将控制渐变的自定义 UIView，并将 labelContainer 的类设置为该新子类。 (您不需要将其设为 IBOutlet，因为您不需要在运行时修改它。)

这是一个简单的例子。请注意，通过创建新的 UIView 子类 @IBDesignable，它也会显示在您的 Storyboard中。

import UIKit

@IBDesignable
class SampleGradientView: UIView {

    override class var layerClass: AnyClass {
        return CAGradientLayer.self
    }

    override func layoutSubviews() {
        let gradientLayer = layer as! CAGradientLayer
        gradientLayer.colors = [UIColor.red.cgColor,UIColor.blue.cgColor]
        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0)
    }

}

class ShoppingListCell: UITableViewCell {

    @IBOutlet var label: UILabel!

}

class GradTableCellsTableViewController: UITableViewController {

    var catTitles = [
        "Meat & Fish",
        "Fruit & Veg",
        "Dairy"
    ]

    var catData = [
        ["Steak"],
        ["Apricot", "Asparagus"],
        ["Milk"]
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.rowHeight = 56.0

    }

    // MARK: - Table view data source

    override func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return catTitles.count
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return catData[section].count
    }

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

        // Configure the cell...
        cell.label.text = catData[indexPath.section][indexPath.row]

        return cell
    }

}

Storyboard:

结果: