Why gradient layer in UITableViewCell not cover entire frame?

Question

I try to make a standard gradient top-bottom with long UIView. But it's not full. The nib is part of UITableViewCell, so I don't have access to viewDidLayoutSubviews() as in this thread.

I've tried to call contentView.layoutIfNeeded() from the code version of this view. I called it when UITableView cellForRowAtIndexPath gets called. But it's no effect.

I prepare the gradient in awakeFromNib().

let colors = [
            UIColor(red: 33/255.0, green: 33/255.0, blue: 33/255.0, alpha: 1.0).cgColor,
            UIColor(red: 51/255.0, green: 51/255.0, blue: 51/255.0, alpha: 1.0).cgColor]
let gradient = CAGradientLayer()
gradient.frame = gradientView.bounds
gradient.colors = colors
gradientView.layer.insertSublayer(gradient, at: 0)

Is there something wrong with my code?

i kind of had the same issue please look at my answer here : https://stackoverflow.com/questions/53974152/uitableviewcell-background-gradient-not-working-at-first-render — Govani Dhruv Vijaykumar, Feb 13 '21 at 13:32

clemens · Accepted Answer · 2019-10-08T16:24:52.323

8

You should use view's boundsinstead of frame, because your layer is inside of the view, and the frame may have an offset.

The layout of the view is changed after awakeFromNib. So you should resize the layer in layoutSubviews of the view. For this create a property gradient and:

let gradient: CAGradientLayer = CAGradientLayer()

override func awakeFromNib() {
    ...
    let colors = [
                UIColor(red: 33/255.0, green: 33/255.0, blue: 33/255.0, alpha: 1.0).cgColor,
                UIColor(red: 51/255.0, green: 51/255.0, blue: 51/255.0, alpha: 1.0).cgColor]
    gradient.frame = bounds
    gradient.colors = colors
    gradientView.layer.insertSublayer(gradient, at: 0) 
    ...
}

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

EDIT: An alternative is a custom view with own layer class:

public class GradientLayer: UIView {
    @IBInspectable var startColor: UIColor! = UIColor(red: 33/255.0, green: 33/255.0, blue: 33/255.0, alpha: 1.0)
    @IBInspectable var endColor: UIColor! = UIColor(red: 51/255.0, green: 51/255.0, blue: 51/255.0, alpha: 1.0)

    override class var layerClass : AnyClass {
        return CAGradientLayer.self
    }
    override func awakeFromNib() {
        super.awakeFromNib()
        let colors = [ startColor.cgColor, endColor.cgColor ]
        if let gradient = self.layer as? CAGradientLayer {
            gradient.colors = colors
        }
    }
}

This is more elegant, because you can replace the static colors with IB inspectables, and you have a reusable component view.

edited Oct 08 '19 at 16:24

answered Dec 22 '17 at 07:24

clemens

16,716
11
50
65

1

Good one hence +1 – Sandeep Bhandari Dec 22 '17 at 07:30
Sorry typo in my question. It's actually use `bounds` from the gradient view. I'll give your solution a try anyway. – Seto Dec 22 '17 at 07:31
I just saw that the layer belongs to another view. I've changed the code, but I think it would be better if the view containing the layer (`gradientView`) would manage the layout of the layer. – clemens Dec 22 '17 at 07:38
@Anbu.karthik: You could be right, but this is from the OP's code. I won't change that, and this code compiles without errors. – clemens Dec 22 '17 at 07:50
@clemens - ok ,but we can suggest – Anbu.Karthik Dec 22 '17 at 07:56
@Anbu.karthik: Yeah, I think using constants or even color sets is generally a quite good idea. – clemens Dec 22 '17 at 07:59
1

@clemens I accept your answer. And thank you for mentioning _IB inspectables_. – Seto Dec 22 '17 at 09:21
@Anbu.karthik do you mean creating constant for all the RGB values? – Seto Dec 22 '17 at 09:22
@SetoElkahfi - yes, see this for e.g `33/255.0` its common , just create the constant for reusablity. – Anbu.Karthik Dec 22 '17 at 09:25
1

@Anbu.karthik ah, I see. Thanks. – Seto Dec 22 '17 at 09:31

score 6 · Answer 2 · answered Mar 21 '18 at 22:56

6

 override func layoutSubviews() {
        super.layoutSubviews()

        if let gradient = baseView.layer.sublayers?[0] as? CAGradientLayer {
            gradient.frame = self.bounds
        }
 }

answered Mar 21 '18 at 22:56

Svitlana

2,938
1
29
38

Why gradient layer in UITableViewCell not cover entire frame?

2 Answers2

Linked