CAGradientLayer covers Label in Table View Cell

Question

Luise_2020 OP

Created Mar ’21

Replies 7

Boosts 0

Views 2.9k

Participants 3

To make my App look better, I'd like to add some color gradient in the background of my labels and Table View Cells. If I add a Sublayer the text in the Label is not visible anymore. Is there a possibility to add the sublayer as a background color or behind the textLabel ? Or should I convert the textLabel into a sublayer of the table view cell ? And if so how?

Answered by OOPer in 666913022

Please replace your line 13 with this:

Code Block         cell.contentView.layer.insertSublayer(layer, at: 0)

I guess the sublayer used as a background needs to be at the bottom of the layers.

Boost

Answer 1

Claude31 OP

Mar ’21

Could you show the code where you add layer to tableView cell ?

0

Answer 2

Luise_2020 OP

Mar ’21

This is the code, where I add the sublayer

Code Block func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {        let layer = CAGradientLayer()
        layer.frame = CGRect(x: 0, y: 0, width: 5000, height: 70)
        layer.colors = [UIColor(red: 0.19, green: 0.22, blue: 0.25, alpha: 1.00).cgColor, UIColor(red: 0.25, green: 0.26, blue: 0.28, alpha: 1.00).cgColor]
        cell.layer.addSublayer(layer)
    }

This is the code, where I add the entrie/text Label, the filtered part I need for the search

Code Block func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        if filtered {
            cell.textLabel?.text = filteredData[indexPath.row]
        }
        else{
            cell.textLabel?.text = collectionEintraege[indexPath.row]
        }
        cell.layer.borderWidth = 1
        cell.layer.borderColor = UIColor.white.cgColor
        cell.textLabel?.textColor = UIColor.white
        cell.textLabel?.font = UIFont(name: "Helvetica", size: 25.0)
        return cell
    }

0

Answer 3

Claude31 OP

Mar ’21

I changed as floors, and it works here.
layer must be added to cell.contentView.
I set the layer in cellForRowAt

Code Block     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "CellItem2", for: indexPath)
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        if filtered {
            cell.textLabel?.text = filteredData[indexPath.row]
        }  else {
            cell.textLabel?.text = collectionEintraege[indexPath.row]
        }
        let layer = CAGradientLayer()
        layer.frame = cell.bounds.insetBy(dx: 4, dy: 4) // CGRect(x: 0, y: 0, width: 500, height: 40)
        layer.colors = [UIColor(red: 0.19, green: 0.22, blue: 0.25, alpha: 1.00).cgColor, UIColor(red: 0.25, green: 0.26, blue: 0.28, alpha: 1.00).cgColor]
        layer.borderWidth = 1
        layer.borderColor = UIColor.white.cgColor
        cell.contentView.layer.addSublayer(layer) //  <<-- That's the key
        cell.textLabel?.textColor = UIColor.white
        cell.textLabel?.font = UIFont(name: "Helvetica", size: 25.0)
        return cell
    }

1

Answer 4

Luise_2020 OP

Mar ’21

I changed the code like you suggested, but the layer still covers the text.

Code Block func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        if filtered {
            cell.textLabel?.text = filteredData[indexPath.row]
        }
        else{
            cell.textLabel?.text = collectionEintraege[indexPath.row]
        }
        let layer = CAGradientLayer()
        layer.frame = cell.bounds.insetBy(dx: 4, dy: 7)
        layer.colors = [UIColor(red: 0.19, green: 0.22, blue: 0.25, alpha: 1.00).cgColor, UIColor(red: 0.25, green: 0.26, blue: 0.28, alpha: 1.00).cgColor]
        cell.contentView.layer.addSublayer(layer)
        cell.layer.borderWidth = 1
        cell.layer.borderColor = UIColor.white.cgColor
        cell.textLabel?.textColor = UIColor.white
        cell.textLabel?.font = UIFont(name: "Helvetica", size: 25.0)
        return cell
    }

Do you have an idea what else I could try?

0

Answer 5

OOPer OP

Mar ’21

Accepted Answer

Please replace your line 13 with this:

Code Block         cell.contentView.layer.insertSublayer(layer, at: 0)

I guess the sublayer used as a background needs to be at the bottom of the layers.

2

Answer 6

Luise_2020 OP

Mar ’21

Thank you now it works

0

Answer 7

Claude31 OP

Mar ’21

Thanks for feedback.

1