web-dev-qa-db-fra.com

iOS: Comment ajouter une ombre portée et une ombre de trait sur UIView?

Je veux ajouter ombre portée et ombre portée sur UIView Voici ce que mon concepteur m'a donné pour appliquer l'ombre,

  • Pour l'ombre portée, il m'a dit d'utiliser RVB (176,199,226) avec 90% d'opacité, distance-3 et taille-5

  • Pour l'ombre du trait, il a dit d'appliquer, RGB (209,217,226) de taille 1 et 100% d'opacité.

Ceci est l'écran des effets appliqués par Photoshop,

enter image description hereenter image description here

La vue avec l'ombre requise (sortie attendue)

enter image description here

J'ai essayé ce qui suit pour obtenir l'ombre portée

viewCheck.layer.masksToBounds = NO;
viewCheck.layer.cornerRadius = 5.f;
viewCheck.layer.shadowOffset = CGSizeMake(.0f,2.5f);
viewCheck.layer.shadowRadius = 1.5f;
viewCheck.layer.shadowOpacity = .9f;
viewCheck.layer.shadowColor = [UIColor colorWithRed:176.f/255.f green:199.f/255.f blue:226.f/255.f alpha:1.f].CGColor;
viewCheck.layer.shadowPath = [UIBezierPath bezierPathWithRect:viewCheck.bounds].CGPath;

Et c'est le résultat de cela,

enter image description here

J'ai du mal à comprendre comment appliquer le trait et l'ombre portée comme indiqué dans les captures d'écran de Photoshop (j'ai ajouté ci-dessus). Comment appliquer la distance, l'écart, la taille, la position?

Quelqu'un peut-il m'indiquer un guide pour appliquer ce genre d'ombres? Il y a beaucoup d'effets d'ombre qui sortent et je veux savoir comment cela peut être possible au lieu de poser chacune des questions ici!

Merci :)

22
Hemang

Je crois que la plupart de la configuration que vous recherchez peut être obtenue en utilisant la propriété shadowPath.

viewCheck.layer.shadowRadius  = 1.5f;
viewCheck.layer.shadowColor   = [UIColor colorWithRed:176.f/255.f green:199.f/255.f blue:226.f/255.f alpha:1.f].CGColor;
viewCheck.layer.shadowOffset  = CGSizeMake(0.0f, 0.0f);
viewCheck.layer.shadowOpacity = 0.9f;
viewCheck.layer.masksToBounds = NO;

UIEdgeInsets shadowInsets     = UIEdgeInsetsMake(0, 0, -1.5f, 0);
UIBezierPath *shadowPath      = [UIBezierPath bezierPathWithRect:UIEdgeInsetsInsetRect(viewCheck.bounds, shadowInsets)];
viewCheck.layer.shadowPath    = shadowPath.CGPath;

par exemple, en définissant shadowInsets de cette façon

UIEdgeInsets shadowInsets = UIEdgeInsetsMake(0, 0, -1.5f, 0);

vous obtiendrez une belle ombre souhaitable:

enter image description here

Vous pouvez maintenant décider comment vous voulez que le rectangle d'ombre soit construit en contrôlant les encarts du rectangle du chemin d'ombre.

37
Morse

Voici les étapes pour User Defined Runtime Attribute.

  1. Ouvrez un storyboard ou un fichier xib dans Interface Builder.
  2. Dans Interface Builder, sélectionnez l'objet auquel ajouter l'attribut.
  3. Choisissez Affichage> Utilitaires> Afficher l'inspecteur d'identité.

L'inspecteur d'identité apparaît dans la zone utilitaire. Comme illustré ci-dessous, l'éditeur d'attributs d'exécution défini par l'utilisateur est l'un des éléments de l'inspecteur.

enter image description here

  1. Cliquez sur le bouton Ajouter (+) en bas à gauche de l'éditeur d'attributs d'exécution définis par l'utilisateur.

enter image description here

11
Nimit Parekh

Pour donner Border Of UIView.

Ajouter #import "QuartzCore/QuartzCore.h" fram travail.

myView.layer.cornerRadius = 15.0; // set as you want.
myView.layer.borderColor = [UIColor lightGrayColor].CGColor; // set color as you want.
myView.layer.borderWidth = 1.0; // set as you want.
6
iPatel

Je suis désolé, je n'ai que la solution Swift mais voici mes extensions UIView que j'utilise pour faire cette tâche:

// MARK: Layer Extensions
extension UIView {

    func setCornerRadius(#radius: CGFloat) {
        self.layer.cornerRadius = radius
        self.layer.masksToBounds = true
    }

    func addShadow(#offset: CGSize, radius: CGFloat, color: UIColor, opacity: Float, cornerRadius: CGFloat? = nil) {
        self.layer.shadowOffset = offset
        self.layer.shadowRadius = radius
        self.layer.shadowOpacity = opacity
        self.layer.shadowColor = color.CGColor
        if let r = cornerRadius {
            self.layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: r).CGPath
        }
    }

    func addBorder(#width: CGFloat, color: UIColor) {
        self.layer.borderWidth = width
        self.layer.borderColor = color.CGColor
        self.layer.masksToBounds = true
    }

    func drawStroke(#width: CGFloat, color: UIColor) {
        let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: self.w, height: self.w), cornerRadius: self.w/2)
        let shapeLayer = CAShapeLayer ()
        shapeLayer.path = path.CGPath
        shapeLayer.fillColor = UIColor.clearColor().CGColor
        shapeLayer.strokeColor = color.CGColor
        shapeLayer.lineWidth = width
        self.layer.addSublayer(shapeLayer)
    }

}

Je ne l'ai jamais essayé, mais vous pouvez simplement coller ce code dans n'importe quel fichier Swift et probablement les appeler à partir du code Obj-C.

3
Esqarrouth