Quelle est la meilleure façon d'ajouter une ombre portée à mon UIView

J'essaie d'ajouter une ombre portée aux vues superposées, les vues s'effondrent permettant au contenu d'autres vues d'être vu, dans cette veine, je veux rester view.clipsToBoundsactivé afin que lorsque les vues se réduisent, leur contenu soit tronqué.

Cela semble avoir rendu difficile pour moi d'ajouter une ombre portée aux calques, car lorsque clipsToBoundsj'active les ombres sont également coupées.

J'ai essayé de manipuler view.frameet view.boundsd'ajouter une ombre portée au cadre mais de permettre aux limites d'être suffisamment grandes pour l'englober, mais je n'ai pas eu de chance avec cela.

Voici le code que j'utilise pour ajouter une ombre (cela ne fonctionne qu'avec clipsToBoundsOFF comme indiqué)

view.clipsToBounds = NO;
view.layer.shadowColor = [[UIColor blackColor] CGColor];
view.layer.shadowOffset = CGSizeMake(0,5);
view.layer.shadowOpacity = 0.5;

Voici une capture d'écran de l'ombre appliquée au calque gris le plus clair du haut. J'espère que cela donne une idée de la façon dont mon contenu se chevauchera si clipsToBoundsest désactivé.

Comment puis-je ajouter une ombre à mon UIViewet conserver mon contenu découpé?

Edit: Je voulais juste ajouter que j'ai également joué avec l'utilisation d'images d'arrière-plan avec des ombres, ce qui fonctionne bien, mais j'aimerais toujours connaître la meilleure solution codée pour cela.

Essaye ça:

UIBezierPath *shadowPath = [UIBezierPath bezierPathWithRect:view.bounds];
view.layer.masksToBounds = NO;
view.layer.shadowColor = [UIColor blackColor].CGColor;
view.layer.shadowOffset = CGSizeMake(0.0f, 5.0f);
view.layer.shadowOpacity = 0.5f;
view.layer.shadowPath = shadowPath.CGPath;

Tout d'abord : l' UIBezierPathutilisé tel shadowPathquel est crucial. Si vous ne l'utilisez pas, vous ne remarquerez peut-être pas de différence au début, mais l'œil attentif observera un certain décalage se produisant lors d'événements tels que la rotation de l'appareil et / ou similaire. C'est une modification importante des performances.

En ce qui concerne votre problème en particulier : la ligne importante est view.layer.masksToBounds = NO. Elle désactive le découpage des sous-couches de la vue qui s'étendent au-delà des limites de la vue.

Pour ceux qui se demandent quelle est la différence entre masksToBounds(sur le calque) et la clipToBoundspropriété de la vue : il n'y en a pas vraiment. Le basculement de l'un aura un effet sur l'autre. Juste un niveau d'abstraction différent.

Swift 2.2:

override func layoutSubviews()
{
    super.layoutSubviews()

    let shadowPath = UIBezierPath(rect: bounds)
    layer.masksToBounds = false
    layer.shadowColor = UIColor.blackColor().CGColor
    layer.shadowOffset = CGSizeMake(0.0, 5.0)
    layer.shadowOpacity = 0.5
    layer.shadowPath = shadowPath.CGPath
}

Swift 3:

override func layoutSubviews()
{
    super.layoutSubviews()

    let shadowPath = UIBezierPath(rect: bounds)
    layer.masksToBounds = false
    layer.shadowColor = UIColor.black.cgColor
    layer.shadowOffset = CGSize(width: 0.0, height: 5.0)
    layer.shadowOpacity = 0.5
    layer.shadowPath = shadowPath.cgPath
}

Réponse de Wasabii dans Swift 2.3:

let shadowPath = UIBezierPath(rect: view.bounds)
view.layer.masksToBounds = false
view.layer.shadowColor = UIColor.blackColor().CGColor
view.layer.shadowOffset = CGSize(width: 0, height: 0.5)
view.layer.shadowOpacity = 0.2
view.layer.shadowPath = shadowPath.CGPath

Et dans Swift 3/4/5:

let shadowPath = UIBezierPath(rect: view.bounds)
view.layer.masksToBounds = false
view.layer.shadowColor = UIColor.black.cgColor
view.layer.shadowOffset = CGSize(width: 0, height: 0.5)
view.layer.shadowOpacity = 0.2
view.layer.shadowPath = shadowPath.cgPath

Mettez ce code dans layoutSubviews () si vous utilisez AutoLayout.

Dans SwiftUI, c'est beaucoup plus simple:

Color.yellow  // or whatever your view
    .shadow(radius: 3)
    .frame(width: 200, height: 100)

L'astuce consiste à définir masksToBoundscorrectement la propriété du calque de votre vue:

view.layer.masksToBounds = NO;

et cela devrait fonctionner.

( Source )

Vous pouvez créer une extension pour UIView pour accéder à ces valeurs dans l'éditeur de conception

extension UIView{

    @IBInspectable var shadowOffset: CGSize{
        get{
            return self.layer.shadowOffset
        }
        set{
            self.layer.shadowOffset = newValue
        }
    }

    @IBInspectable var shadowColor: UIColor{
        get{
            return UIColor(cgColor: self.layer.shadowColor!)
        }
        set{
            self.layer.shadowColor = newValue.cgColor
        }
    }

    @IBInspectable var shadowRadius: CGFloat{
        get{
            return self.layer.shadowRadius
        }
        set{
            self.layer.shadowRadius = newValue
        }
    }

    @IBInspectable var shadowOpacity: Float{
        get{
            return self.layer.shadowOpacity
        }
        set{
            self.layer.shadowOpacity = newValue
        }
    }
}

Vous pouvez également définir une ombre sur votre vue à partir du storyboard

Sur la vueWillLayoutSubviews:

override func viewWillLayoutSubviews() {
    sampleView.layer.masksToBounds =  false
    sampleView.layer.shadowColor = UIColor.darkGrayColor().CGColor;
    sampleView.layer.shadowOffset = CGSizeMake(2.0, 2.0)
    sampleView.layer.shadowOpacity = 1.0
}

Utilisation de l'extension d'UIView:

extension UIView {

    func addDropShadowToView(targetView:UIView? ){
        targetView!.layer.masksToBounds =  false
        targetView!.layer.shadowColor = UIColor.darkGrayColor().CGColor;
        targetView!.layer.shadowOffset = CGSizeMake(2.0, 2.0)
        targetView!.layer.shadowOpacity = 1.0
    }
}

Usage:

sampleView.addDropShadowToView(sampleView)

Donc oui, vous devriez préférer la propriété shadowPath pour les performances, mais aussi: Depuis le fichier d'en-tête de CALayer.shadowPath

Spécifier explicitement le chemin à l'aide de cette propriété améliorera généralement * les performances de rendu, tout comme le partage du même chemin * référence sur plusieurs couches

Une astuce moins connue consiste à partager la même référence sur plusieurs couches. Bien sûr, ils doivent utiliser la même forme, mais c'est courant avec les cellules de vue tableau / collection.

Je ne sais pas pourquoi cela devient plus rapide si vous partagez des instances, je suppose que cela met en cache le rendu de l'ombre et peut le réutiliser pour d'autres instances de la vue. Je me demande si c'est encore plus rapide avec