如何向我的 CollectionViewCell 添加一些阴影和圆角？

Question

我对 iOS 编程还是很陌生，但目前正在尝试开发一个小应用程序以磨练我的技能。现在我在向我的 CollectionViewCell 添加一些阴影和圆角时遇到了一些问题。

我有“Main ViewController”，我只为 CollectionView 单元创建了一个单独的文件，我称之为“MyCustomCollectionViewCell”，我将在此处粘贴该文件，然后解释问题出在哪里。

---

“主视图控制器”：

    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)
     
  }

}

---

正如我之前提到的，我正在尝试将 CollectionView Cell 的角落弄圆并为其添加一些阴影。问题是，每次我都可以得到圆角或阴影，但不能同时得到。

当我只使用这行代码时，我可以随心所欲地得到角落。

cell?.layer.cornerRadius = 8

另一方面，如果我使用整个块，我只会得到阴影，没有圆角。

 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

你们知道为什么会这样吗？

提前谢谢你！

Answer 1

而不是尝试圆角UICollectionViewCell self，但您需要更改单元格的contentView 的属性。确保检查单元格的backgroundColor 和contentView。

您可以按如下方式执行此操作 (taken from here)：

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

和

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