web-dev-qa-db-fra.com

Régler Shadow sur le bas UIView uniquement

Je veux créer une ombre inférieure uniquement sur UIView. En ce moment avec cette fonction, créera une ombre en haut, en bas, à gauche et à droite.

func setCardView(view : UIView){
    view.layer.masksToBounds = false
    view.layer.shadowOffset = CGSize(width: 0, height: 0)
    view.layer.shadowRadius = 2
    view.layer.shadowOpacity = 0.5
}

Y a-t-il un moyen de ne créer que des ombres dans le bas? Toute aide serait appréciée. Merci!

iosuiviewshadow
27
Sonic Master

Je pense que la bonne façon de penser à l'ombre est que l'ombre appartient à l'objet, qui est le bouton, l'uiview, pas seulement une partie du côté. Imaginer qu'il existe une source de lumière virtuelle. Vous ne pouvez pas créer une ombre pour un seul côté.

Cela dit, l’ombre sera toujours l’ombre de la vue dans son ensemble. Toutefois, vous pouvez modifier le décalage de l’ombre pour le ramener vers le bas.

view.layer.shadowOffset = CGSize(width: 0, height: 3)

Cela signifie que vous voulez que la source de lumière projette la lumière du haut pour créer l'ombre vers le bas. La raison pour laquelle vous voyez toujours une ombre en haut est le rayon de l'ombre. qui consiste à simuler le diffuse de la lumière. Plus la lumière est diffuse, plus l'ombre est douce, vous verrez donc toujours l'ombre supérieure.

view.layer.shadowRadius = 1 or 0.5

essayez de réduire le rayon aussi. cela vous donnera un meilleur résultat visuel.

Pour comprendre umbra, penumbra et antumbra si vous en avez besoin, consultez https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra

32
Elvin

Changer votre shadowOffset

 view.layer.shadowOffset = CGSize(width: 0, height: 3)
11
Luan Tran

Ce code fonctionne pour Swift 4 et l’ombre s’appliquant à la vue Bas:

view.layer.masksToBounds = false
view.layer.shadowRadius = 4
view.layer.shadowOpacity = 1
view.layer.shadowColor = UIColor.gray.cgColor
view.layer.shadowOffset = CGSize(width: 0 , height:2)
8
Srinivasan.M

Voici la bonne façon d'appliquer l'ombre dans Swift:

yourView.layer.shadowOffset = CGSize(width: 0, height: 3)
yourView.layer.shadowOpacity = 0.6
yourView.layer.shadowRadius = 3.0
yourView.layer.shadowColor = UIColor.red.cgColor
6
Hemang

Si vous voulez vraiment une ombre sur un seul côté de votre UIView, vous devez définir votre view.layer.shadowPath à un UIBezierPath.

Voici un exemple qui n’affichera qu’une ombre au bas de la vue:

view.layer.shadowPath = UIBezierPath(rect: CGRect(x: 0,
                                                  y: bounds.maxY - layer.shadowRadius,
                                                  width: bounds.width,
                                                  height: layer.shadowRadius)).cgPath

En déconstruisant la valeur CGRect, vous obtenez:

  • x et width s'assurent que l'ombre prend toute la largeur horizontale de votre vue (vous voudrez peut-être les ajuster, par exemple, en utilisant le layer.shadowRadius valeur comme base de votre compensation)
  • y et height s'assurent que l'ombre commence le plus bas possible et qu'elle ne soit alors que de la taille du rayon

Bien sûr, dans certains cas, cela ne fonctionnera pas, par exemple lorsque vous souhaitez un shadowRadius supérieur à celui de votre vue height. Dans ces cas, je vous recommande d'utiliser une vue d'image ou un calque masqué.

J'espère que cela t'aides,

3
Zedenem

Ancienne question mais il semble qu'aucune des réponses ne répond vraiment à la question. Bien que les réponses ci-dessus fonctionnent avec un faible shadowRadius, vous n'obtenez pas vraiment d'effet 'shadow'.

Vous pouvez absolument ajouter une ombre au bas en utilisant UIBezierPath

Voici comment -

    let shadowWidth: CGFloat = 1.2 // Shadow width, will be the width furthest away from the view, this is equivalent to 120% of the views width
    let shadowHeight: CGFloat = 0.3 // Shadow height, again this is equivalent to 30%
    let shadowRadius: CGFloat = 5 
    let width = someView.frame.width
    let height = someView.frame.height // Get width and height of the view

    // Plot the path
    let shadowPath = UIBezierPath()
    shadowPath.move(to: CGPoint(x: shadowRadius / 2, y: height - shadowRadius / 2))
    shadowPath.addLine(to: CGPoint(x: width - shadowRadius / 2, y: height - shadowRadius / 2))
    shadowPath.addLine(to: CGPoint(x: width * shadowWidth, y: height + (height * shadowHeight)))
    shadowPath.addLine(to: CGPoint(x: width * -(shadowWidth - 1), y: height + (height * shadowHeight)))
    // Add shadow
    someView.layer.shadowPath = shadowPath.cgPath
    someView.layer.shadowRadius = shadowRadius
    someView.layer.shadowOffset = .zero
    someView.layer.shadowOpacity = 0.2

Cette sortie cette

enter image description here

Ou si vous vouliez une solution plus simple, avec moins d'options, vous pourriez aller avec ceci

   let buttonHeight = someButton.frame.height
    let buttonWidth = someButton.frame.width

    let shadowSize: CGFloat = 15
    let contactRect = CGRect(x: -shadowSize, y: buttonHeight - (shadowSize * 0.2), width: buttonWidth + shadowSize * 2, height: shadowSize)
    someButton.layer.shadowPath = UIBezierPath(ovalIn: contactRect).cgPath
    someButton.layer.shadowRadius = 5
    someButton.layer.shadowOpacity = 0.6

Qui va sortir cette

enter image description here

Exemple ici

https://github.com/hemo87/ExampleShadow/tree/master

2
M.Hem