Search code examples
iosswiftuitableviewcagradientlayer

CAGradientLayer overflows on UIView when using in UITableViewCell


I've add CAGradientLayer to a UIView that've already inside in UITableViewCell. This UIView has 20 trailing and leading space from the UITableViewCell contentView. But that UIView's overflow when it running.

var gradientLayer: CAGradientLayer!

@IBOutlet weak var view: UIView!

    func createGradientLayer() {
        gradientLayer = CAGradientLayer.init(layer: view.layer)
        gradientLayer.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height)
        //        gradientLayer.frame = CGRect(x: 0, y: 0, width: self.contentView.frame.size.width, height: )

        let colory: UIColor = UIColor(red: 0, green: 189/255, blue: 237/255, alpha: 1.0)

        gradientLayer.colors = [UIColor.ceruleanBlue.cgColor, colory.cgColor]

        gradientLayer.startPoint = CGPoint.init(x: 0.0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x:1.0,y: 0.5)

//        self.view.layer.mask = gradientLayer
        self.view.layer.insertSublayer(gradientLayer, at: 0)
    }

Then in the cellForRow method, I used like this:

if indexPath.row == 0{
            let cell = tableView.dequeueReusableCell(withIdentifier: "statisticsCell") as! StatisticsCommentCell

//            cell.frame.size.width = UIScreen.main.bounds.size.width
            cell.view.translatesAutoresizingMaskIntoConstraints = false
            return cell
        }

If I changed gradientLayer.frame like below:

gradientLayer.frame.size.width = self.view.frame.width

the gradientView is not overflow but there seems just ceruleanBlue color.

I do not any idea how can I solve this problem for my UIView.

Any idea? Thanks in advance.

Its a screenshot from the simulator that have overflow problem:

Hint: Normally the UIView has already trailing and leading from the UITableViewCell's contentView.

enter image description here

Another problem is when I add maskToBounds the view seems like below

enter image description here

All constraints for UIView

enter image description here


Solution

  • Set your gradientLayer as optional, instead of var gradientLayer: CAGradientLayer! use var gradientLayer: CAGradientLayer? and add this code in your cellLayoutSubViews method

    Use this code

    override func layoutSubviews() {
        super.layoutSubviews()
        if(self.gradientLayer == nil){
        self.gradientLayer = CAGradientLayer(layer: self.view.layer)
        //your gradient configuration
        self.layer.addSublayer(self.gradientLayer!)
        }
        self.gradientLayer?.drawsAsynchronously = true
        self.gradientLayer?.frame = self.view.bounds
    }