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

Définissez le layer pour la cellule, et non contentView .

CALayer * layer = [cell layer];
[layer setShadowOffset:CGSizeMake(0, 2)];
[layer setShadowRadius:1.0];
[layer setShadowColor:[UIColor redColor].CGColor] ;
[layer setShadowOpacity:0.5]; 
[layer setShadowPath:[[UIBezierPath bezierPathWithRect:cell.bounds] CGPath]];

Answer 2

SWIFT 4.2

Il faut l'ajouter dans votre cellule personnalisée ou cellForItemAt : Si vous utilisez l'approche cellForItemAt :, remplacez par self -> cell.

        self.layer.cornerRadius = 10
        self.layer.borderWidth = 1.0
        self.layer.borderColor = UIColor.lightGray.cgColor

        self.layer.backgroundColor = UIColor.white.cgColor
        self.layer.shadowColor = UIColor.gray.cgColor
        self.layer.shadowOffset = CGSize(width: 2.0, height: 4.0)
        self.layer.shadowRadius = 2.0
        self.layer.shadowOpacity = 1.0
        self.layer.masksToBounds = false

Vous obtiendrez ainsi une cellule avec une bordure arrondie et une ombre portée.

Answer 3

Il vous suffit de (a) définir cornerRadius et (b) fixer shadowPath pour être un rectangle arrondi de même rayon que le cornerRadius :

self.layer.cornerRadius = 10;
self.layer.shadowPath = [[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:self.layer.cornerRadius] CGPath];

Answer 4

Voici mon point de vue sur la solution. Elle est similaire aux autres réponses, avec une différence essentielle. Elle ne crée pas un chemin qui dépend des limites de la vue. Chaque fois que vous créez un chemin basé sur les limites et que vous le fournissez à la couche, vous pouvez rencontrer des problèmes lorsqu'elle est redimensionnée, et vous devez configurer des méthodes pour mettre à jour le chemin.

Une solution plus simple consiste à éviter d'utiliser tout ce qui dépend des limites.

let radius: CGFloat = 10

self.contentView.layer.cornerRadius = radius
// Always mask the inside view
self.contentView.layer.masksToBounds = true

self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 0, height: 1.0)
self.layer.shadowRadius = 3.0
self.layer.shadowOpacity = 0.5
// Never mask the shadow as it falls outside the view
self.layer.masksToBounds = false

// Matching the contentView radius here will keep the shadow
// in sync with the contentView's rounded shape
self.layer.cornerRadius = radius

Maintenant, lorsque la taille des cellules change, l'API de visualisation effectue tout le travail en interne.

Answer 5

J'ai dû faire quelques légers changements pour Swift :

cell.contentView.layer.cornerRadius = 2.0;
cell.contentView.layer.borderWidth = 1.0;
cell.contentView.layer.borderColor = UIColor.clearColor().CGColor;
cell.contentView.layer.masksToBounds = true;

cell.layer.shadowColor = UIColor.grayColor().CGColor;
cell.layer.shadowOffset = CGSizeMake(0, 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;