La bordure de la couche CAL apparaît au-dessus de la sous-vue (lié à l'ordre Z, je pense)

Question

J'ai cherché mais je n'ai pas trouvé la raison de ce comportement.

J'ai un bouton UIButton dont je définis l'image. Voici comment le bouton doit apparaître. Notez qu'il s'agit simplement d'un photoshop du design prévu pour le bouton :

Il s'agit essentiellement d'un bouton UIButton personnalisé de forme carrée, avec une bordure blanche et une petite ombre qui l'entoure. Dans le coin supérieur droit, il y a une marque "X", qui sera ajoutée par programme en tant que sous-vue.

Voici une capture d'écran du bouton dans l'application actuelle. À ce stade, je n'ai ajouté qu'une ombre et la marque X en tant que sous-vue :

Cependant, lorsque j'essaie d'ajouter la bordure blanche, voici ce que cela donne :

Il semble que la bordure blanche apparaisse au-dessus de la sous-couche de la marque X. Je ne sais pas pourquoi.

Voici le code que j'utilise :

// selectedPhotoButton is the UIButton with UIImage set earlier
// At this point, I am adding in the shadow
[selectedPhotoButton layer] setShadowColor:[[UIColor lightGrayColor] CGColor]];
[[selectedPhotoButton layer] setShadowOffset: CGSizeMake(1.0f, 1.0f)];
[[selectedPhotoButton layer] setShadowRadius:0.5f];
[[selectedPhotoButton layer] setShadowOpacity:1.0f]; 

// Now add the white border    
[[selectedPhotoButton layer] setBorderColor:[[UIColor whiteColor] CGColor]];
[[selectedPhotoButton layer] setBorderWidth:2.0];

// Now add the X mark subview
UIImage *deleteImage = [UIImage imageNamed:@"nocheck_photo.png"];
UIImageView *deleteMark = [[UIImageView alloc] initWithFrame:CGRectMake(53, -5, 27, 27)];
deleteMark.contentMode = UIViewContentModeScaleAspectFit;
[deleteMark setImage:deleteImage];
[selectedPhotoButton addSubview:deleteMark];
[deleteMark release];

Je ne comprends pas pourquoi la bordure apparaît au-dessus de la sous-vue deleteMark. Existe-t-il un moyen d'obtenir l'effet escompté ?

Gracias.

Answer 1

Extrait de la documentation d'Apple sur CALayer :

La bordure est dessinée en retrait des limites du récepteur de la largeur de la bordure. Elle est composée au-dessus du contenu et des sous-couches du récepteur et inclut les effets de la propriété cornerRadius.

Pour obtenir l'effet désiré, je vous suggère de placer l'image dans une sous-vue/sous-couche propre et de définir le paramètre borderWidth propriété.

Answer 2

Vous pouvez fixer la position z du calque à -1. Cela a fonctionné pour moi.

Answer 3

J'ai eu un problème similaire (je voulais éviter que la ligne de bordure soit au-dessus de mes vues secondaires).

CAShapeLayer * _border = [CAShapeLayer layer];
_border.strokeColor = [UIColor colorWithRed:119/255.0f green:119/255.0f blue:119/255.0f alpha:1.0f].CGColor;
_border.fillColor = nil;
[bgRoundView.layer addSublayer:_border];
_border.path = [UIBezierPath bezierPathWithRoundedRect:bgRoundView.bounds cornerRadius:20.f].CGPath;