Question

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

首先，我将标签及其周围的盒子连接到属性标签＆amp; 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）图层不会随视图“自动调整大小”，因此您需要在单元格框架更改时随时更新图层框架。在init上，单元格框架（尚未）已设置好。

您可能会发现使用渐变“内置”的子类UIView更容易，而不是在配置单元格时尝试添加它。

试一试......

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

这是一个简单的例子。请注意，通过制作新的UIView子类@IBDesignable，它也会显示在您的故事板中。

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
    }

}

故事板：

结果：

Answer 2

尝试使用cell.labelContainer.layer.masksToBounds = true应该帮助

为什么我的渐变子图层显示奇怪？

2 个答案: