web-dev-qa-db-fra.com

UIView Gradient Shadow

Dans mon projet iOS, j'ai créé une UIView personnalisée comportant une ombre portée. Mon objectif est d'appliquer le même dégradé à l'ombre qu'à l'arrière-plan de la vue.

Vous trouverez ci-dessous un exemple de l'apparence de mes ombres de couleur unies actuelles.

 Shadow Example Ceci est effectué via une sous-classe de UIView avec le code ci-dessous:

override func layoutSubviews() {
    let gradientLayer = layer as! CAGradientLayer
    gradientLayer.colors = [topColor.cgColor, bottomColor.cgColor]
    gradientLayer.startPoint = CGPoint(x: startPointX, y: startPointY)
    gradientLayer.endPoint = CGPoint(x: endPointX, y: endPointY)
    layer.cornerRadius = cornerRadius
    layer.shadowColor = shadowColor.cgColor
    layer.shadowOffset = CGSize(width: shadowX, height: shadowY)
    layer.shadowRadius = shadowBlur
    layer.shadowOpacity = 1

    let inset: CGFloat = bounds.width * 0.05
    layer.shadowPath = UIBezierPath(roundedRect: bounds.insetBy(dx: inset, dy: 0.0), cornerRadius: cornerRadius).cgPath
}

Je me suis amusé à créer un deuxième calque dégradé et à le masquer à l'ombre, mais je n'ai pas eu de chance. S'il te plait, oriente moi dans la bonne direction!

iosswiftuiviewgradientshadow
15
calebmanley

Je pense que vous ne pouvez pas faire plus avec l'ombre standard de CALayer. Jetez un coup d'œil à filters propriété de CALayer.

https://developer.Apple.com/documentation/quartzcore/calayer/1410901-filters

Créez un second CAGradientLayer et appliquez un filtre GausianBlur par exemple.

https://developer.Apple.com/library/content/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html#//Apple_ref/doc/filter/ci/CIGaussianBlur

Désactivez les ombres de calque standard et ajoutez votre calque flou en tant que sous-couche.

4
Jacek Głazik

Je crois que @jacek a raison, vous repoussez les limites de ce que vous pouvez faire avec les ombres CALayer (ce qui n’est pas grand chose pour être honnête)

Comme l'explique Jacek, la meilleure chose à faire est de créer votre propre ombre, bien qu'une autre CAGradientLayer appliquant un flou gaussien agisse comme une ombre.

De plus, je ne crois pas que placer votre code dans la variable layoutSubviews soit l’endroit le plus approprié. Une fois configuré, votre couche n'aura pas besoin de beaucoup changer, et sera donc appelée beaucoup si votre mise en page change beaucoup.

Habituellement, si vous utilisez une vue provenant d’interface-builder, j’appellerais cette logique depuis awakeFromNib dans une fonction configureBackgroundViews dédiée, par exemple.

0
Lifely

Utilisez mon code pour votre besoin disponible dans my gitRepo https://github.com/Krishnarjun-Banoth/BlurView/tree/master/Shadows

Étape 1: Il suffit de glisser/déposer BlurEffect.Swift fichier dans votre projet.

Étape 2: Ensuite, utilisez simplement les méthodes d’extension de vue ci-dessous pour chacune d’elles individuellement. 

  testView.applyGradient(colours: [UIColor.blue,UIColor.orange]) //pass your required colours.
  testView.blur(blurRadius: 5.0)

Remarque: Inspiré de @Jacek Głazik answer et du didacticiel de FlexMonkey.

0
Krishnarjun Banoth