Prevent UICollectionViewCell drop shadow from casting onto other cells - ios

Question

I'm hoping someone might have a clever solution to this problem, because at the moment, I'm stumped. I have a collectionView whose cell's all cast fairly large drop shadows onto the area behind them. The problem is that since they are so close together, each cell is also casting a shadow onto the immediately preceding cell. All of these cells have the same zIndex in their layoutAttributes, but Apple seems to be placing the cells with the higher indexPath values at a higher zIndex. Is there a good way to prevent these cells from casting their shadows onto the other cells?
The cells are setting their shadow via:
cell.layer.shadowOpacity = 1
cell.layer.shadowRadius = 54
cell.layer.shadowOffset = CGSize(width: 0, height: 12)
cell.layer.shadowColor = UIColor.black.withAlphaComponent(0.5).cgColor
Thanks!

Answer 1

Set the shadow properties of the collection view's layer, instead of setting them on each cell. Make sure the collection view has no backgroundView and that its backgroundColor is nil. Also make sure some ancestor view of the collection view does have a background color or some other fill.
Result:
Source code:
import UIKit
class ViewController: UIViewController, UICollectionViewDataSource {
var cellIdentifier: String { return "cell" }
override func loadView() {
let view = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
view.backgroundColor = .white
let layout = UICollectionViewFlowLayout()
layout.itemSize = CGSize(width: 50, height: 50)
layout.minimumInteritemSpacing = 4
layout.minimumLineSpacing = 4
layout.scrollDirection = .vertical
layout.sectionInset = UIEdgeInsets(top: 4, left: 4, bottom: 4, right: 4)
let collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
collectionView.backgroundColor = nil
collectionView.dataSource = self
collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: cellIdentifier)
collectionView.layer.shadowColor = UIColor.black.cgColor
collectionView.layer.shadowRadius = 8
collectionView.layer.shadowOpacity = 1
view.addSubview(collectionView)
self.view = view
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 100
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath)
let layer = cell.contentView.layer
layer.backgroundColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
layer.borderColor = #colorLiteral(red: 0.4392156899, green: 0.01176470611, blue: 0.1921568662, alpha: 1)
layer.borderWidth = 2
layer.cornerRadius = 8
layer.masksToBounds = true
return cell
}
}

Answer 2

Well, I wasn't able to find a good way to prevent these shadows from casting onto the surrounding cells, but I think I found a working solution. I am going to add decoration views that layout directly underneath the cells, and then add the shadows to those views. It's a bit of a hack, but it should produce the effect I'm going for.