Ne peut pas définir de cornerRadius de l'ombre ET de la couche qui a une image vue vite ses limites?

C'est estompe moi. J'ai une UIView (appelons-la "société mère"). Le dernier sous-vue de ce point de vue est une UIImageView (que l'on appellera "l'enfant"), dont l'image occupe la totalité de la "mère" de limites.

Je veux arrondir les angles sur le "parent" d'afficher et de définir une ombre portée. Je le fais sur le CALayer de "parent" comme d'habitude:

[[parent layer] setShadowOffset:CGSizeMake(5, 5)];
[[parent layer] setShadowRadius:6];
[[parent layer] setShadowOpacity:0.4];    
[[parent layer] setCornerRadius:6];

Cela montre l'ombre correctement, mais ne pas arrondir les angles.

Voici le kicker:

  1. Si je retire le "bébé" d'affichage de l'image, ou de la réduire afin de ne pas occuper la totalité limites de la "mère" de la vue, - je obtenir des coins arrondis et de l'ombre correctement sur le parent.
  2. Si je quitte le "enfant" seul, mais ensemble "clipsToBounds" sur le "parent" de vue, je reçois les coins correctement. Mais maintenant, l'ombre a disparu.
  3. Réglage de l'angle sur la couche de la enfant ainsi semble avoir aucun effet.

Il semble que les "enfants" d'affichage de l'image est juste occultant les coins arrondis sur le "parent", étant donné qu'il prend tout le rect, et le découpage basé sur la vue parent obtient les coins, mais aussi des masques hors de l'ombre. Je ne sais pas pourquoi #3 ne fonctionne pas.

Ce qui me manque? Ai-je été donnant sur quelque chose d'évident en regardant ce trop long?

Grâce.

(Scandaleusement, la balise "roundedcorners-dropshadow" existe déjà. Génial.)

InformationsquelleAutor Ben Zotto | 2010-09-14
  1. 21

    Vous aurez besoin de deux vues imbriquées, à l'intérieur d'un réglage des coins arrondis et le niveau d'écrêtage pour lié, et de l'extérieur vue de l'ombre (et donc pas d'écrêtage). Dans votre cas, intérieure et extérieure vue sera probablement "enfant" et "parent", mais je suppose que vous n'avez pas le droit d'écrêtage des valeurs pour ces points de vue?

    Voir la réponse dans Pourquoi masksToBounds = OUI empêche CALayer de l'ombre?.

    • Enfin, nous avons un gagnant. 🙂 Merci Julian.
    InformationsquelleAutor Julian D.
  2. 5

    Normalement, vous devez définir clipsToBounds avoir des coins arrondis, mais puisque vous souhaitez conserver l'ombre, vous avez pour arrondir les coins de l'ombre aussi bien. Avez-vous essayé le réglage de l'ombre chemin à l'aide d'un tracé de bézier? Garder clipsToBounds/masksToBounds par défaut, AUCUN. Quelque chose comme:

      [[parent layer] setCornerRadius:6.0f];
  [[parent layer] setShadowPath:
             [[UIBezierPath bezierPathWithRoundedRect:[parent bounds] 
                   cornerRadius:6.0f] CGPath]];
    • Merci Matt. Oui, l'arrondi des coins d'ombre n'est pas un problème, ils travaillent si je l'ai mis avec un chemin d'accès ou avec les propriétés. J'ai juste ne peut pas obtenir de l'ombre pour montrer à tous, lorsque j'ai mis clipsToBounds, et si je ne le fait pas, l'affichage de l'image tue les coins arrondis. (Notez que si je n'ai pas de "l'enfant" affichage de l'image à tous, comme prévu)
    • Qu'advient-il si au lieu d'utiliser une image de la vue que vous venez de créer votre calque du contenu de l'image que vous voulez? par exemple, [couche setContents:(id)[image CGImage]]; Vous pouvez setContentsGravity:kCAGravityResizeAspectFill pour obtenir l'image pour remplir le calque avec l'aspect de remplissage ou d'essayer d'autres constantes de là-bas si ce n'est pas l'effet désiré.
    • Dans mon cas (assez similaires), j'ai un fichier XIB qui a une UIImageView au bas de la pile, qui est l'arrière-plan de l'élément affiché. L'affichage de l'image est primordial que le rayon de l'angle de ses parents. Ne sais pas comment faire le paramètre de contenu des trucs qui vous suggérons de Matt, puisque c'est un fichier xib. (pas OP mais même problème)
    • Je ne suis pas sûr de ce que vous demandez exactement. Pouvez-vous poster une nouvelle question qui cite ce un et puis d'expliquer plus en profondeur ce qui ne fonctionne pas pour vous? Peut-être inclure du code? Merci.
    InformationsquelleAutor Matt Long
  3. 0

    Avez-vous essayé la délimitation de l'enfant UIImageView de sorte qu'il a aussi des coins arrondis? Peut-être, alors il ne serait pas annuler l'ombre du conteneur de vue. Juste une pensée, vous ne savez pas si cela va fonctionner.

    InformationsquelleAutor fogelbaby
  4. 0

    Avec Swift 3, vous pouvez choisir l'un des deux extraits de code suivants afin de définir cornerRadius et de l'ombre sur une image ou sur une vue qui contient une couche d'image.

    #1. À l'aide de UIView, CALayer et Spring et Struts

    import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        //constants
        let radius: CGFloat = 20, dimension: CGFloat = 200, offset = 8
        let frame = CGRect(x: 0, y: 0, width: 200, height: 200)

        //custom view
        let customView = UIView(frame: frame)
        customView.contentMode = .scaleAspectFill

        //image layer
        let imageLayer = CALayer()
        imageLayer.contentsGravity = kCAGravityResizeAspectFill
        imageLayer.contents = UIImage(named: "image")!.cgImage
        imageLayer.masksToBounds = true
        imageLayer.frame = frame
        imageLayer.cornerRadius = radius
        imageLayer.masksToBounds = true

        //rounded layer
        let roundedLayer = CALayer()
        roundedLayer.shadowColor = UIColor.darkGray.cgColor
        roundedLayer.shadowPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: dimension, height: dimension), cornerRadius: radius).cgPath
        roundedLayer.shadowOffset = CGSize(width: offset, height: offset)
        roundedLayer.shadowOpacity = 0.8
        roundedLayer.shadowRadius = 2
        roundedLayer.frame = frame

        //views and layers hierarchy
        customView.layer.addSublayer(imageLayer)
        customView.layer.insertSublayer(roundedLayer, below: imageLayer)
        view.addSubview(customView)

        //layout
        customView.center = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
        customView.autoresizingMask = [UIViewAutoresizing.flexibleLeftMargin, .flexibleRightMargin, .flexibleTopMargin, .flexibleBottomMargin]
    }

}

    #2. À l'aide de UIView, UIImageView, CALayer et de Mise en page Automatique

    import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        //constants
        let radius: CGFloat = 20, dimension: CGFloat = 200, offset = 8

        //image view
        let imageView = UIImageView(image: UIImage(named: "image"))
        imageView.contentMode = .scaleAspectFill
        imageView.layer.cornerRadius = radius
        imageView.layer.masksToBounds = true

        //rounded view
        let roundedView = UIView()
        roundedView.layer.shadowColor = UIColor.darkGray.cgColor
        roundedView.layer.shadowPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: dimension, height: dimension), cornerRadius: radius).cgPath
        roundedView.layer.shadowOffset = CGSize(width: offset, height: offset)
        roundedView.layer.shadowOpacity = 0.8
        roundedView.layer.shadowRadius = 2

        //views hierarchy
        roundedView.addSubview(imageView)
        view.addSubview(roundedView)

        //layout
        imageView.translatesAutoresizingMaskIntoConstraints = false
        roundedView.translatesAutoresizingMaskIntoConstraints = false
        roundedView.widthAnchor.constraint(equalToConstant: dimension).isActive = true
        roundedView.heightAnchor.constraint(equalToConstant: dimension).isActive = true
        imageView.widthAnchor.constraint(equalTo: roundedView.widthAnchor).isActive = true
        imageView.heightAnchor.constraint(equalTo: roundedView.heightAnchor).isActive = true
        roundedView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        roundedView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        imageView.centerXAnchor.constraint(equalTo: roundedView.centerXAnchor).isActive = true
        imageView.centerYAnchor.constraint(equalTo: roundedView.centerYAnchor).isActive = true
    }

}

    Les deux fragments de code à générer l'affichage suivant:

    Ne peut pas définir de cornerRadius de l'ombre ET de la couche qui a une image vue vite ses limites?

    Vous pouvez trouver plus de façons de combiner des images avec des coins arrondis et de l'ombre sur ce Dépôt Github.

    InformationsquelleAutor Imanou Petit
  5. 0

    Si vous voulez de l'ombre de la couche avec le rayon de l'angle pour imageview est mieux que les solutions mises de l'imageview vue comme sous-vue avec 1 point de la marge.. et

     imgBrandLogo.backgroundColor = UIColor.blue
    imgBrandLogo.layer.cornerRadius = imgBrandLogo.frame.height/2
    imgBrandLogo.clipsToBounds = true
    viewBrandLogo.layer.shadowColor = UIColor(rgb:0x262626,alpha:0.24).cgColor
    viewBrandLogo.layer.shadowOffset = CGSize(width: 0, height: 1)
    viewBrandLogo.layer.shadowOpacity = 1
    viewBrandLogo.layer.shadowPath = UIBezierPath(roundedRect:imgBrandLogo.bounds , cornerRadius: imgBrandLogo.frame.height/2).cgPath
    viewBrandLogo.backgroundColor = UIColor.clear.withAlphaComponent(0.0)
    InformationsquelleAutor Beyaz