Search code examples
iosswifttableviewgradientmask

Side of TableViewCell gets cut off when applying a gradient mask


My tableView sits within a blank content view with constraints holding it in place. The table will function properly in the container by itself, but as soon as I apply a gradient using the code below, the gradient works perfectly, except the right hand side of my tableViewCells get cut off. It only happens when the gradient is applied. Any recommendations would be appreciated.

Before Gradient is added, table view looks like this:

TableView with full TableViewCells

After the gradient is added, the table view looks like this:

TableView with cut TableViewCells

This is the code I am using to apply the gradient.

        let gradientLayerMask = CAGradientLayer()
    gradientLayerMask.frame = gradientMask.bounds
    gradientLayerMask.colors = [UIColor.clear.cgColor, UIColor.white.cgColor, UIColor.white.cgColor, UIColor.clear.cgColor]
    gradientLayerMask.locations = [0.0,0.1,0.9,1.0]

    gradientMask.layer.mask = gradientLayerMask

    exerciseTable.contentInset = UIEdgeInsets(top: 15, left: 0, bottom: 0, right: 0)

Solution

  • Put some delay for gradient code

    func delay(time: Double, closure:
        @escaping ()->()) {
    
        DispatchQueue.main.asyncAfter(deadline: .now() + time) {
            closure()
        }
    
    }
    

    Use this way.

    delay(time: 0.2) {
        //gradient code
    }
    

    I hope it's work for you.