Hinzufügen von abgerundeten Ecken und Schlagschatten zu UICollectionViewCell

Ich habe bereits verschiedene Beiträge zum Hinzufügen der zweiten Ansicht zum Hinzufügen von Schatten durchgearbeitet, kann sie jedoch immer noch nicht zum Laufen bringen, wenn ich sie hinzufügen möchte UICollectionViewCell. Ich habe eine Unterklasse erstellt UICollectionViewCell, und hier ist mein Code, in dem ich der Inhaltsansicht der Zelle verschiedene UI-Elemente hinzufüge und der Ebene Schatten hinzufüge:

[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]];

Ich würde gerne wissen, wie man abgerundete Ecken und Schatten hinzufügt UICollectionViewCell.

Keine dieser Lösungen hat bei mir funktioniert. Wenn Sie alle Ihre Unteransichten in die Inhaltsansicht von UICollectionViewCell einfügen, die Sie wahrscheinlich sind, können Sie den Schatten auf der Ebene der Zelle und den Rand auf der Ebene der Inhaltsansicht festlegen, um beide Ergebnisse zu erzielen.

cell.contentView.layer.cornerRadius = 2.0f;
cell.contentView.layer.borderWidth = 1.0f;
cell.contentView.layer.borderColor = [UIColor clearColor].CGColor;
cell.contentView.layer.masksToBounds = YES;

cell.layer.shadowColor = [UIColor blackColor].CGColor;
cell.layer.shadowOffset = CGSizeMake(0, 2.0f);
cell.layer.shadowRadius = 2.0f;
cell.layer.shadowOpacity = 0.5f;
cell.layer.masksToBounds = NO;
cell.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:cell.bounds cornerRadius:cell.contentView.layer.cornerRadius].CGPath;

Swift 3.0

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

self.layer.shadowColor = UIColor.black.cgColor
self.layer.shadowOffset = CGSize(width: 0, height: 2.0)
self.layer.shadowRadius = 2.0
self.layer.shadowOpacity = 0.5
self.layer.masksToBounds = false
self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.contentView.layer.cornerRadius).cgPath

Swift 3 Version:

cell.contentView.layer.cornerRadius = 10
cell.contentView.layer.borderWidth = 1.0

cell.contentView.layer.borderColor = UIColor.clear.cgColor
cell.contentView.layer.masksToBounds = true

cell.layer.shadowColor = UIColor.gray.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

Für den Fall, dass es hilft: Hier ist die schnelle Abrundung der Ecken:

cell.layer.cornerRadius = 10
cell.layer.masksToBounds = true

wobei cell eine Variable ist, die die Zelle steuert: Oft werden Sie diese in verwenden override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell

Genießen!

Hier die Swift 4- Lösung, die aktualisiert wurde, um alle Ecken und nicht nur die oberen Ecken abzurunden:

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

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

Legen Sie die layerAttribute für die Zelle fest, nicht 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]];

SWIFT 4.2

Dies sollte in Ihre benutzerdefinierte Zelle oder cellForItemAt eingefügt werden: Wenn Sie cellForItemAt: verwenden, wenden Sie sich an die Ersatzzelle self ->

        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

Dadurch erhalten Sie eine Zelle mit einem abgerundeten Rand und einem Schlagschatten.

Hier ist meine Antwort, nahe an den anderen, aber ich füge der Ebene einen Eckenradius hinzu, da sonst die Ecken nicht richtig ausgefüllt werden. Auch dies macht eine nette kleine Erweiterung auf UICollectionViewCell.

extension UICollectionViewCell {
func shadowDecorate() {
    let radius: CGFloat = 10
    contentView.layer.cornerRadius = radius
    contentView.layer.borderWidth = 1
    contentView.layer.borderColor = UIColor.clear.cgColor
    contentView.layer.masksToBounds = true

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

}}

Sie können es in collectionView(_:cellForItemAt:)der Datenquelle aufrufen, sobald Sie Ihre Zelle aus der Warteschlange entfernt haben.

Sie müssen lediglich (a) setzen cornerRadiusund (b) setzen shadowPath, um ein abgerundetes Rechteck mit dem gleichen Radius zu sein wie cornerRadius:

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

Ich musste einige kleine Änderungen für Swift vornehmen :

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;

Die Antwort von Mike Sabatini funktioniert einwandfrei. Wenn Sie die Zelleigenschaften direkt in der collectionView cellForItemAt konfigurieren, aber versuchen, sie in awakeFromNib () einer benutzerdefinierten UICollectionViewCell-Unterklasse festzulegen, wird auf den Geräten, die dies nicht tun, ein falscher bezierPath festgelegt Nicht mit der Breite und Höhe übereinstimmen, die zuvor in Ihrem Storyboard (IB) festgelegt wurden.

Die Lösung für mich bestand darin, eine Funktion in der Unterklasse von UICollectionViewCell zu erstellen und diese wie folgt aus cellForItemAt aufzurufen:

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

Und auf der 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}
 }

Dieser hat für mich gearbeitet

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

Ich benutze die folgende Methode, um diese Art von Effekt zu erzielen:

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

Sie können Schattenfarbe, Radius und Versatz in der UICollectionViewDataSource- Methode festlegen , während Sie eine UICollectionViewCell erstellen

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

Hier ist meine Sicht auf die Lösung. Es ist ähnlich wie bei anderen Antworten, mit einem wesentlichen Unterschied. Es wird kein Pfad erstellt, der von den Grenzen der Ansicht abhängt. Jedes Mal, wenn Sie einen Pfad basierend auf den Grenzen erstellen und ihn der Ebene zur Verfügung stellen, können Probleme auftreten, wenn die Größe geändert wird, und Sie müssen Methoden einrichten, um den Pfad zu aktualisieren.

Eine einfachere Lösung besteht darin, die Verwendung von grenzabhängigen Elementen zu vermeiden.

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

Immer wenn sich die Zellengröße ändert, erledigt die Ansichts-API die gesamte Arbeit intern.

Ich habe eine wichtige Sache gefunden: Die UICollectionViewCell muss die Hintergrundfarbe als clearFarbe haben, damit diese oben funktionieren.