How can I add some SHADOW and ROUNDED CORNERS to my CollectionViewCell?

Question

I am still very new to iOS Programming but currently trying to develop a little app in order to hone in my skills. Right now I am having some issues with adding some SHADOW and ROUNDED CORNERS to my CollectionViewCell.

I have the "Main ViewController" and I created a separate file only for the CollectionView Cell which I called "MyCustomCollectionViewCell" which I'll be pasting down here and then will explain where the issues is.

"Main ViewController":

    import UIKit

class ViewController: UIViewController {
   
  //OUTLETS
   
  @IBOutlet weak var UICollectionView: UICollectionView!
   
  //VARIABLES & CONSTANTS
   
  private let myNames = ["Jesus Urbano", "Juan Antonio", "Diego Armando", "Alejanda Almaguer", "Alma Delia", "Alma Cecilia", "Cristian Rodriguez", "Rene Canales", "Monica Canales", "Angel Canales", "Angel Acevedo", "Claudia Mondragon", "Karen Mondragon", "Efrain Almaguer", "Ester Rivera", "Arleth Almaguer"]
   
  override func viewDidLoad() {
    super.viewDidLoad()
     
    UICollectionView.dataSource = self
     
    UICollectionView.register(UINib(nibName: "MyCustomCollectionViewCell", bundle: nil), forCellWithReuseIdentifier: "mycell")
     
  }

}


// MARK: - UICollectionViewDataSource

extension ViewController: UICollectionViewDataSource {
   
  func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 1
  }

  func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
     
    return myNames.count
  }

  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
   
  let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "mycell", for: indexPath) as? MyCustomCollectionViewCell
     
  cell?.layer.cornerRadius = 8
  cell?.layer.masksToBounds = false
  cell?.layer.shadowColor = UIColor.black.cgColor
  cell?.layer.shadowOffset = CGSize(width: 5.0, height: 5.0)
  cell?.layer.shadowOpacity = 0.5
  cell?.layer.shadowRadius = 1.0

     
  cell?.myOcupationLabel.text = "Albañil"
  cell?.mySpecialtyLabel.text = "Pisos y Acabados"
  cell?.myNameLabel.text = myNames[indexPath.row]

    return cell!

"MyCustomCollectionViewCell":

import UIKit

class MyCustomCollectionViewCell: UICollectionViewCell {
   
  //IMAGENES
   
  @IBOutlet weak var myImage: UIImageView!
   
  //ETIQUETAS
   
  @IBOutlet weak var myOcupationLabel: UILabel!
  @IBOutlet weak var mySpecialtyLabel: UILabel!
  @IBOutlet weak var myNameLabel: UILabel!
  
  //BOTONES
  @IBOutlet weak var myContactButton: UIButton!
   
   
  override func awakeFromNib() {
    super.awakeFromNib()
     
     
    //PROPIEDADES
       
    // Etiqueta de Nombre
    
    myNameLabel.font = UIFont.boldSystemFont(ofSize: 15)
     
    // Boton de Contacto
     
    myContactButton.layer.cornerRadius = 18
    myContactButton.layer.masksToBounds = false
    clipsToBounds = true
     
    myContactButton.layer.shadowColor = UIColor.darkGray.cgColor
    myContactButton.layer.shadowRadius = 3
    myContactButton.layer.shadowOpacity = 1.0
    myContactButton.layer.shadowOffset = CGSize(width: 0, height: 3)
     
  }

}

As I mentioned earlier, I am trying to round the corners of my CollectionView Cell and add some shadow to it. The problem is, every time I can either get the corners rounded or the shadow, but not both at the same time.

When I only use this line of code, I can get the corners as I want.

cell?.layer.cornerRadius = 8

On the other hand, if I use the whole block, I only get the shadow, with no rounded corners.

 cell?.layer.cornerRadius = 8
 cell?.layer.masksToBounds = false
 cell?.layer.shadowColor = UIColor.black.cgColor
 cell?.layer.shadowOffset = CGSize(width: 5.0, height: 5.0)
 cell?.layer.shadowOpacity = 0.5
 cell?.layer.shadowRadius = 1.0

Do you guys know why is it happening?

Thank you in advance!

Does this answer your question? [Adding rounded corner and drop shadow to UICollectionViewCell](https://stackoverflow.com/questions/13505379/adding-rounded-corner-and-drop-shadow-to-uicollectionviewcell) — CSmith, Dec 23 '21 at 18:41

score 2 · Answer 1 · answered Dec 23 '21 at 18:15

Instead of trying to round the corners of the UICollectionViewCell self, but you need to change the properties of the contentView of the cell. Make sure to check the backgroundColor of the cell and the contentView.

You can do this as follows (taken from here):

contentView.layer.cornerRadius = 8.0
contentView.layer.borderWidth = 1.0
contentView.layer.borderColor = UIColor.clear.cgColor
contentView.layer.masksToBounds = true

and

layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: 5.0, height: 5.0)
layer.shadowRadius = 1.0
layer.shadowOpacity = 0.5
layer.masksToBounds = false
layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: contentView.layer.cornerRadius).cgPath
layer.backgroundColor = UIColor.clear.cgColor

How can I add some SHADOW and ROUNDED CORNERS to my CollectionViewCell?

1 Answers1