GradientLayer 与 Swift 中的单元格标签重叠？

Posted 2023-02-23

【中文标题】GradientLayer 与 Swift 中的单元格标签重叠？

【英文标题】：GradientLayer is overlapping on cell label in Swift?

【发布时间】：2018-05-04 08:57:18

【问题描述】：

我想将单元格标签背景更改为渐变并将标签文本更改为白色。下图是tableView，单元格标签如图所示重叠。

下面是我的代码

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
  let cell = self.tableView.dequeueReusableCell(
            withIdentifier: "tableViewCell",
            for: indexPath) as! CustomTableViewCell
  let bubbleGradient: CAGradientLayer = CAGradientLayer()

  let colorTop = UIColor(red:0.08, green:0.12, blue:0.19, alpha:1.0).cgColor
  let colorBottom = UIColor(red:0.14, green:0.23, blue:0.33, alpha:1.0).cgColor

  bubbleGradient.colors = [colorTop, colorBottom]
  bubbleGradient.startPoint = CGPoint(x: 0.0, y: 0.5)
  bubbleGradient.endPoint = CGPoint(x: 1.0, y: 0.5)

  bubbleGradient.frame = cell.text.bounds
  bubbleGradient.cornerRadius = 10
  cell.text.layer.addSublayer(bubbleGradient)
  cell.text?.text = text as? String

  return cell

但是 GradientLayer 与我的单元格标签重叠。我该如何解决？

【问题讨论】：

Subview's sublayers overlapping higher subviews的可能重复

你能分享一下你把这个渐变层添加到单元格标签的代码吗？？

在这个func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell @Kamran

@SeizeDuh 你能粘贴所有的cellForRowAt 代码吗？同时将此行cell.text.layer.addSublayer(bubbleGradient) 替换为cell.contentView.layer.insertSublayer(bubbleGradient, at: 0) 以解决您的问题。

编辑了我的代码@Kamran

【参考方案1】：

当您将子图层插入 UILabel 时，它将隐藏标签文本。因此，在 UIView 中添加 UIlabel 并将渐变应用到 UIView 的图层。检查以下代码：

let bubbleGradient: CAGradientLayer = CAGradientLayer()

let colorTop = UIColor(red:0.08, green:0.12, blue:0.19, alpha:1.0).cgColor
let colorBottom = UIColor(red:0.14, green:0.23, blue:0.33, alpha:1.0).cgColor

bubbleGradient.colors = [colorTop, colorBottom]
bubbleGradient.startPoint = CGPoint(x: 0.0, y: 0.5)
bubbleGradient.endPoint = CGPoint(x: 1.0, y: 0.5)

bubbleGradient.frame = label.bounds
label.backgroundColor = UIColor.clear
let viewLabel = UIView.init(frame: label.frame)
self.view.addSubview(viewLabel)
viewLabel.backgroundColor = UIColor.clear
viewLabel.addSubview(label)
bubbleGradient.cornerRadius = 10
viewLabel.layer.insertSublayer(bubbleGradient, at: 0)

【讨论】：

我刚刚将bubbleGradient.frame = label.bounds let viewLabel = UIView.init(frame: label.frame) 更改为bubbleGradient.frame = cell.textLabel.bounds let viewLabel = UIView.init(frame: cell.textLabel.frame)。还是不行

您是否尝试过 insertSublayer 而不是 addSublayer？

确保您已将 UILabel 背景颜色更改为清除颜色。

用 cellForRow 编辑

让我们continue this discussion in chat。

【参考方案2】：

如您所知，我们重复使用单元格。在您的代码中，您在视图上添加图层而不删除第一层。这是造成问题的原因。

    if cell.textLabel?.layer.sublayers == nil 

        let bubbleGradient: CAGradientLayer = CAGradientLayer()
        let colorTop = UIColor(red:0.08, green:0.12, blue:0.19, alpha:1.0).cgColor
        let colorBottom = UIColor(red:0.14, green:0.23, blue:0.33, alpha:1.0).cgColor

        bubbleGradient.colors = [colorTop, colorBottom]
        bubbleGradient.startPoint = CGPoint(x: 0.0, y: 0.5)
        bubbleGradient.endPoint = CGPoint(x: 1.0, y: 0.5)

        bubbleGradient.frame = (cell.text?.bounds)!
        bubbleGradient.cornerRadius = 10
        cell.text?.layer.addSublayer(bubbleGradient)
    

在你的 cellForRow 方法中试试这个。

【讨论】：

我刚刚在cellForRow 中尝试了您的代码，但没有调用整个 if 条件

您是否在文本上添加了任何其他渐变层？请发邮件cell.text?.layer.sublayers 并检查一下。

你能分享一下你到底想做什么设计吗？