Why isn't my UICollectionViewCell rounded with a drop shadow?

Question

I have followed: https://stackoverflow.com/a/25493235 and https://stackoverflow.com/a/44820559 but I cannot get my cells to be rounded without doing cell.layer.cornerRadius = X instead of cell.contentView.layer.cornerRadius = X

Here is my code for the function that defines my cell in the collectionView:

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath as IndexPath) as! CustomCollectionCell
    cell.backgroundColor = UIColor.white
    cell.contentView.layer.cornerRadius = 2.0
    cell.contentView.layer.borderWidth = 1.0
    cell.contentView.layer.borderColor = UIColor.clear.cgColor
    cell.contentView.layer.masksToBounds = true

    cell.layer.shadowColor = UIColor.lightGray.cgColor
    cell.layer.shadowOffset = CGSize(width: 0, height: 2.0)
    cell.layer.shadowRadius = 2.0
    cell.layer.shadowOpacity = 1.0
    cell.layer.masksToBounds = false
    cell.layer.shadowPath = UIBezierPath(roundedRect: cell.bounds, cornerRadius: cell.contentView.layer.cornerRadius).cgPath
    return cell
}

Prior to attempting to round the cells, all I had was cell.backgroundColor = UIColor.white in that function, thus, all I have now is just the code from StackOverflow because I wanted to test it out. Any help would be appreciated.

It looks like this right now:

And this it looks like this with Pratik's suggestion:

Update:

I guess there's no other way to do it than:

Make the cell.backgroundColor clear and make the contentView white

or

Make the don't include a background color for the cell and just make the contentView white.

Try debugging with `View Hierarchy` and see what is overlapping your rounded corner. — Abhishek Bedi, Oct 04 '18 at 05:18
I just want it rounded without the edges. so basically the second picture without the corners. I've made it work by changing the background color to clear and the contentView color to white but Idk if it's recommended.. — , Oct 04 '18 at 05:32

Pratik Sodha · Answer 1 · 2018-10-04T05:37:46.473

0

Update In your case just make

    cell.layer.shadowColor = UIColor.lightGray.cgColor
    cell.layer.shadowOffset = CGSize(width: 0, height: 2.0)
    cell.layer.shadowRadius = 2.0
    cell.layer.shadowOpacity = 1.0
    cell.layer.masksToBounds = true
    cell.layer.shadowPath = UIBezierPath(roundedRect: cell.bounds, 
    cornerRadius: cell.contentView.layer.cornerRadius).cgPath

    cell.backgroundColor = UIColor.white
    cell.contentView.layer.cornerRadius = 2.0
    cell.contentView.layer.borderWidth = 1.0
    cell.contentView.layer.borderColor = UIColor.clear.cgColor
    cell.contentView.layer.masksToBounds = false
    cell.backgroundColor = //background color of your collection view or your main view.

edited Oct 04 '18 at 05:37

answered Oct 04 '18 at 05:09

Pratik Sodha

3,679
2
19
38

even though the gray border is rounded, there is still an edge on each cell. – Oct 04 '18 at 05:15
Can you please add screen shot in your question – Pratik Sodha Oct 04 '18 at 05:17
I edited my question with the images. Should I just set the cell.backgroundColor as clear and make the contentView color white? – Oct 04 '18 at 05:24
1

Try adding UIView inside content view & then add shadow , corner to it.. don't edit content view directly – ViJay Avhad Oct 04 '18 at 05:42

score -1 · Answer 2 · edited Oct 04 '18 at 05:22

-1

You can use this code:

cell.contentView.layer.shadowColor = hexStringToUIColor(hex: "#000000").cgColor
cell.contentView.layer.masksToBounds = true
cell.contentView.layer.shadowOpacity = 0.3
cell.contentView.layer.shadowOffset = CGSize.zero
cell.contentView.layer.shadowRadius = 2
cell.contentView.layer.shouldRasterize = true
cell.contentView.layer.rasterizationScale = true ? UIScreen.main.scale : 1

edited Oct 04 '18 at 05:22

rmaddy

314,917
42
532
579

answered Oct 04 '18 at 05:16

shikha kochar

163
1
7

why this `cell.contentView.layer.rasterizationScale = true ? UIScreen.main.scale : 1`??? – Rico Crescenzio Oct 04 '18 at 15:33

Why isn't my UICollectionViewCell rounded with a drop shadow?

2 Answers2