Adding shadow to tableview cell cause laggy scroll and duplicate shadow

Question

I have added white space around my tableview cell and every time I scroll this shadows getting bigger and bigger when I scroll, and its get lag when I scroll for the second and third time with the bigger shadow

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! CustomCell
    cell.backgroundColor = UIColor.clear
    cell.contentView.backgroundColor = UIColor.clear

    let whiteRoundedView : UIView = UIView(frame: CGRect(x:10,y: 5,width: self.view.frame.size.width - 20,height: 117))

    whiteRoundedView.layer.backgroundColor = CGColor(colorSpace: CGColorSpaceCreateDeviceRGB(), components: [1.0, 1.0, 1.0, 0.9])
    //whiteRoundedView.layer.masksToBounds = true
    whiteRoundedView.layer.cornerRadius = 5.0
    whiteRoundedView.layer.shadowOffset = CGSize(width: -1,height: 1)
    whiteRoundedView.layer.shadowOpacity = 0.2

    let shadowPath = UIBezierPath(rect: whiteRoundedView.layer.bounds)
    whiteRoundedView.layer.shouldRasterize = true
    whiteRoundedView.layer.shadowPath = shadowPath.cgPath
    cell.contentView.addSubview(whiteRoundedView)
    cell.contentView.sendSubview(toBack: whiteRoundedView)

    return cell
}

You should add the shadow in the custom cell class. This adds the shadow every time you scroll — Phyber, Jul 31 '17 at 07:10
One of the similar problem is answered here https://stackoverflow.com/a/45138867/3397793 — Muhammad Hassan, Jul 31 '17 at 07:21

score 4 · Accepted Answer · answered Jul 31 '17 at 07:22

Just put code inside the awakefrom nib

  class CustomCell: UITableViewCell {



        override func awakeFromNib() {
            super.awakeFromNib()
            // Initialization code
    self.backgroundColor = UIColor.clear
        self.contentView.backgroundColor = UIColor.clear

        let whiteRoundedView : UIView = UIView(frame: CGRect(x:10,y: 5,width: self.contentView.frame.size.width - 20,height: 117))

        whiteRoundedView.layer.backgroundColor = CGColor(colorSpace: CGColorSpaceCreateDeviceRGB(), components: [1.0, 1.0, 1.0, 0.9])
        //whiteRoundedView.layer.masksToBounds = true
        whiteRoundedView.layer.cornerRadius = 5.0
        whiteRoundedView.layer.shadowOffset = CGSize(width: -1,height: 1)
        whiteRoundedView.layer.shadowOpacity = 0.2

        let shadowPath = UIBezierPath(rect: whiteRoundedView.layer.bounds)
        whiteRoundedView.layer.shouldRasterize = true
        whiteRoundedView.layer.shadowPath = shadowPath.cgPath
        self.contentView.addSubview(whiteRoundedView)
        self.contentView.sendSubview(toBack: whiteRoundedView)

        }


    }

score 1 · Answer 2 · edited Jul 31 '17 at 08:20

You keep adding shadow views on top of each other without ever removing them. If all your cells will need the shadow you can just add a tag and check if a view with that tag already exists like so:

whiteRoundedView.tag = 12345

if cell.contentView.viewWithTag(12345) == nil {
    cell.contentView.addSubview(whiteRoundedView)
}

If some cells have the shadow but some cells don't you could do it like this:

if let shadowView = cell.contentView.viewWithTag(12345) && noShadow {
    shadowView.removeFromSuperview
} else if !noShadow {
    cell.contentView.addSubview(whiteRoundedView)
}

Alternatively like mentioned in the comments of the question you would add it to your custom cell class:

override func awakeFromNib() {
    super.awakeFromNib()

    let whiteRoundedView : UIView = UIView(frame: CGRect(x:10,y: 5,width: self.contentView.frame.size.width - 20,height: 117))

    whiteRoundedView.layer.backgroundColor = CGColor(colorSpace: CGColorSpaceCreateDeviceRGB(), components: [1.0, 1.0, 1.0, 0.9])
    whiteRoundedView.layer.cornerRadius = 5.0
    whiteRoundedView.layer.shadowOffset = CGSize(width: -1,height: 1)
    whiteRoundedView.layer.shadowOpacity = 0.2

    let shadowPath = UIBezierPath(rect: whiteRoundedView.layer.bounds)
    whiteRoundedView.layer.shouldRasterize = true
    whiteRoundedView.layer.shadowPath = shadowPath.cgPath
    self.contentView.addSubview(whiteRoundedView)
}

score 0 · Answer 3 · answered Jul 31 '17 at 07:48

You are adding whiteRoundedView every time. If you are using a storyboard or Nib for designing your Cell UI then you can add whiteRoundedView there Or you can add a tag in whiteRoundedView and check if there are already any view added with that tag before adding the whiteRoundedView as subview.

Adding shadow to tableview cell cause laggy scroll and duplicate shadow

3 Answers3