Ajout d'un coin arrondi et d'une ombre portée à UICollectionViewCell

Question

J'ai déjà parcouru plusieurs articles sur l'ajout d'une deuxième vue pour l'ajout d'une ombre, mais je ne parviens toujours pas à la faire fonctionner si je veux l'ajouter. UICollectionViewCell . J'ai sous-classé UICollectionViewCell Voici mon code où j'ajoute divers éléments d'interface utilisateur à la vue du contenu de la cellule et où j'ajoute une ombre à la couche :

[self.contentView setBackgroundColor:[UIColor whiteColor]];

self.layer.masksToBounds = NO;
self.layer.shadowOffset = CGSizeMake(0, 1);
self.layer.shadowRadius = 1.0;
self.layer.shadowColor = [UIColor blackColor].CGColor;
self.layer.shadowOpacity = 0.5;
[self.layer setShadowPath:[[UIBezierPath bezierPathWithRect:self.bounds] CGPath]];

J'aimerais savoir comment ajouter un coin arrondi et une ombre à l'image de l'entreprise. UICollectionViewCell .

Answer 1

J'utilise la méthode suivante pour obtenir ce genre d'effet :

extension UICollectionViewCell {
    /// Call this method from `prepareForReuse`, because the cell needs to be already rendered (and have a size) in order for this to work
    func shadowDecorate(radius: CGFloat = 8,
                        shadowColor: UIColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.3),
                        shadowOffset: CGSize = CGSize(width: 0, height: 1.0),
                        shadowRadius: CGFloat = 3,
                        shadowOpacity: Float = 1) {
        contentView.layer.cornerRadius = radius
        contentView.layer.borderWidth = 1
        contentView.layer.borderColor = UIColor.clear.cgColor
        contentView.layer.masksToBounds = true

        layer.shadowColor = shadowColor.cgColor
        layer.shadowOffset = shadowOffset
        layer.shadowRadius = shadowRadius
        layer.shadowOpacity = shadowOpacity
        layer.masksToBounds = false
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: radius).cgPath
        layer.cornerRadius = radius
    }
}

Answer 2

La réponse de Mike Sabatini fonctionne bien, si vous configurez les propriétés de la cellule directement sur le collectionView cellForItemAt, mais si vous essayez de les définir dans awakeFromNib() d'une sous-classe UICollectionViewCell personnalisée, vous vous retrouverez avec un bezierPath erroné défini sur les dispositifs qui ne correspond pas à la largeur et à la hauteur précédemment définies dans votre Storyboard (IB).

La solution pour moi a été de créer un func dans la sous-classe de UICollectionViewCell et de l'appeler depuis le cellForItemAt comme ceci :

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellID", for: indexPath) as? CustomCollectionViewCell{
        cell.configure())
        return cell
    }
    else {
        return UICollectionViewCell()
    }
}

Et dans le fichier CustomCollectionViewCell.swift :

class CustomCollectionViewCell: UICollectionViewCell{
    func configure() {
    contentView.layer.cornerRadius = 20
    contentView.layer.borderWidth = 1.0
    contentView.layer.borderColor = UIColor.clear.cgColor
    contentView.layer.masksToBounds = true
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOffset = CGSize(width: 0, height: 2.0)
    layer.shadowRadius = 2.0
    layer.shadowOpacity = 0.5
    layer.masksToBounds = false
    layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: contentView.layer.cornerRadius).cgPath}
 }

Answer 3

Celui-ci a fonctionné pour moi

cell.contentView.layer.cornerRadius = 5.0
cell.contentView.layer.borderColor = UIColor.gray.withAlphaComponent(0.5).cgColor
cell.contentView.layer.borderWidth = 0.5

let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.darkGray.cgColor
border.frame = CGRect(x: 0, y: cell.contentView.frame.size.height - width, width:  cell.contentView.frame.size.width, height: cell.contentView.frame.size.height)

border.borderWidth = width
cell.contentView.layer.addSublayer(border)
cell.contentView.layer.masksToBounds = true
cell.contentView.clipsToBounds = true

Answer 4

Vous pouvez définir la couleur, le rayon et le décalage de l'ombre dans les champs suivants UICollectionViewDataSource lors de la création d'un UICollectionViewCell

cell.layer.shadowColor = UIColor.gray.cgColor
cell.layer.shadowOffset = CGSize(width: 0, height: 2.0)
cell.layer.shadowRadius = 1.0
cell.layer.shadowOpacity = 0.5
cell.layer.masksToBounds = false

Answer 5

J'ai trouvé une chose importante : l'UICollectionViewCell doit avoir la backgroundColor en tant que clear afin de faire fonctionner les éléments ci-dessus.