0

I am trying to create a shadow on a collectionview cell using diffable data source, and I can do that, but the problem is that on some of the cells the shadow is different than the other cells.

enter image description here

I want it to look like the second cell down, where the shadow has a small shadow around the whole cell, instead of looking like the first cell where the shadow is at the bottom.

This is the extension I created for the shadow:

    extension UIView {
    
    func shadowSetUp() {
        layer.masksToBounds = false
        clipsToBounds = false
        layer.shadowColor = UIColor.black.withAlphaComponent(0.2).cgColor
        layer.shadowOpacity = 1
        layer.shadowOffset = CGSize.zero
        layer.shadowRadius = 10.0
        layer.shadowPath = UIBezierPath(rect: self.bounds).cgPath
        layer.shouldRasterize = true
        layer.rasterizationScale = UIScreen.main.scale
    }
    
}

I put this extension in the collectionview cell view, like so:

    private lazy var setUpView: Void = {
        contentView.addSubview(cellBackground)
        cellBackground.addSubview(title)
        cellBackground.addSubview(imgView)
        cellBackground.translatesAutoresizingMaskIntoConstraints = false
        imgView.translatesAutoresizingMaskIntoConstraints = false
        title.translatesAutoresizingMaskIntoConstraints = false
        self.clipsToBounds = false
        contentView.backgroundColor = colors.Colors.views
        cellBackground.backgroundColor = colors.Colors.views
        title.textColor = .label
        title.numberOfLines = 3
        title.textAlignment = .left
        title.adjustsFontSizeToFitWidth = true
        title.font = UIFontMetrics.default.scaledFont(for: UIFont.systemFont(ofSize: 25, weight: .bold))
        title.adjustsFontSizeToFitWidth = false
        title.adjustsFontForContentSizeCategory = true
        
        title.isHidden = true
        imgView.isHidden = true

        cellBackground.layer.cornerRadius = 15

        contentView.layer.cornerRadius = 15
        contentView.shadowSetUp() <---- This is where i put the shadow extension
        
        NSLayoutConstraint.activate([
            cellBackground.topAnchor.constraint(equalTo: topAnchor),
            cellBackground.leadingAnchor.constraint(equalTo: leadingAnchor),
            cellBackground.trailingAnchor.constraint(equalTo: trailingAnchor),
            cellBackground.bottomAnchor.constraint(equalTo: bottomAnchor),
            imgView.heightAnchor.constraint(equalTo: heightAnchor, multiplier: 0.25),
            imgView.widthAnchor.constraint(equalTo: heightAnchor, multiplier: 0.25),
            imgView.topAnchor.constraint(equalTo: cellBackground.topAnchor, constant: 5),
            imgView.leadingAnchor.constraint(equalTo: cellBackground.leadingAnchor, constant: 10),
            title.leadingAnchor.constraint(equalTo: cellBackground.leadingAnchor, constant: 10),
            title.trailingAnchor.constraint(equalTo: cellBackground.trailingAnchor, constant: -10),
            title.topAnchor.constraint(equalTo: imgView.bottomAnchor, constant: 5),
            title.bottomAnchor.constraint(equalTo: cellBackground.bottomAnchor, constant: -5)
        ])
        
        
    }()

I tried changing many different things, like putting the shadow on the cellBackground, just putting it as shadowSetUp(), and changing the bezier path to different versions, like using:

layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: 15).cgPath

and

layer.shadowPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: <#T##UIRectCorner#>, cornerRadii: <#T##CGSize#>)

I also tried to remove the bezierPath, and it does work, but I know that for cells it is better to use bezierPath because of lagging issues.

I know that similar questions have been asked, but when I have looked around, nothing seems to work for me. I looked at:

I was just wondering where I was going wrong. When I has trying to recreate it, I couldn't get it to happen again. If you have any questions please ask. Thank you

Yo19
  • 223
  • 2
  • 16
  • If your code to add the shadows adds the correct effect to a UIView outside a CollectionViewCell and the problem only happens when you add the shadows to CollectionViewCells, also assuming that the code that adds the shadows applies to all cells similarly, my guess is that you are adding shadows multiple times to the same cell. So you have to make sure, as you scroll through your CollectionView, you are not adding shadow again and again to the same cell. – Dogahe Oct 04 '20 at 03:26
  • @Dogahe I thought the same thing, but when I comment out the line that creates the shadow, the shadow goes away. – Yo19 Oct 04 '20 at 18:49

1 Answers1

0

Try with this code below for making shadow.

    DispatchQueue.global(qos: .background).async {
        DispatchQueue.main.async {
            myView.layer.rasterizationScale = UIScreen.main.scale
            myView.layer.shouldRasterize = true
            //myView.layer.masksToBounds = true
            myView.layer.cornerRadius = 8
            myView.layer.shadowOffset = CGSize(width: 3, height: 3)
            myView.layer.shadowRadius = 8
            myView.layer.shadowColor = UIColor.gray.cgColor
            myView.layer.shadowOpacity = 0.4
        }
    }
AMIT
  • 906
  • 1
  • 8
  • 20