La définition du rayon d'angle sur UIImageView ne fonctionne pas


129

Je suis un peu perdu. J'ai utilisé la propriété layer de UIView pour arrondir les coins de plusieurs éléments dans mon application. Cependant, celui-ci UIImageView n'est tout simplement pas conforme. Je ne sais pas ce qui me manque.

Le UIImageView (appelé previewImage) est contenu dans une cellule de vue tableau. J'ai essayé de définir l'emplacement multiple de la propriété cornerRadius (dans la cellule elle-même et dans le contrôleur qui crée la cellule) en vain.

static NSString *CellIdentifier = @"MyTableViewCell";

MyTableViewCell *cell = (MyTableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
    NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:CellIdentifier owner:self options:nil];
    cell = [topLevelObjects objectAtIndex:0];
    cell.previewImage.layer.cornerRadius = 20; //Made it 20 to make sure it's obvious.
}

Y a-t-il quelque chose qui me manque dans la façon dont les cellules sont chargées?

Réponses:


377

Vous devez définir la masksToBoundspropriété de la couche sur YES:

cell.previewImage.layer.masksToBounds = YES;

Cela est dû au fait que le UIImageViewcontrôle crée une pseudo-sous-vue pour contenir l' UIImageobjet.


19
À moins que vous ne pixellisiez également la vue (view.layer.shouldRasterize = YES), chaque image nécessitera un nouveau masque de tous les pixels.
jjxtra

@jjxtra donc il vaut mieux définir shouldRasterize = false?
user924

Si shouldRasterize est faux, vous payez les frais généraux de création de masque à chaque image. Si shouldRasterize est vrai et que votre calque change à chaque image, vous payez la surcharge de masque et la surcharge de rastérisation. Le cas idéal est une couche statique (qui ne change pas très souvent) avec shouldRasterize = true.
jjxtra

30

A noter également que

  1. Si vous utilisez aspectFit AND cornerRadius avec clipsToBounds / masksToBounds, vous n'obtiendrez pas les coins arrondis.

c'est à dire si vous avez ceci

theImageView.contentMode = .scaleAspectFit

et

   theImageView.layer.cornerRadius = (theImageView.frame.size.height)/2
    theImageView.clipsToBounds = true

ou

theImageView.layer.masksToBounds = true

Ça ne marchera pas . vous devrez vous débarrasser du code aspectFit

//theImageView.contentMode = .scaleAspectFit
  1. Assurez-vous que la largeur et la hauteur de la vue d'image sont identiques

En bref: réglez le rapport hauteur / largeur 1: 1 si vous souhaitez utiliser AspectFit
djdance

22

Cela devrait fonctionner

cell.previewImage.clipsToBounds = YES;

cell.previewImage.layer.cornerRadius = 20;

3
Pas sûr clipsToBoundsest une méthode sur la dernière classe. Croyez que c'est masksToBoundscomme ci-dessus.
Alfie Hanssen

4
Les calques @AlfieHanssen ont des masquesToBounds:, les vues ont des clipsToBounds:
Kevin

11

Je pense que vous devez définir:

cell.previewImage.layer.masksToBounds = YES;
cell.previewImage.layer.opaque = NO;

4

Dans Xcode Interface Builder, la sélection de l'attribut de dessin «Clip Subviews» pour la vue et la définition du rayon de coin dans le code cell.previewImage.layer.cornerRadius = 20;font le travail pour moi!

Voir l'option 'Sous-vues de clip' dans IB


2

Essayez ce morceau de code ci-dessous

cell.previewImage.layer.cornerRadius = 20;
cell.previewImage.clipsToBounds = YES;

2

Essayez ce code: -

self.imgaviewName.clipsToBounds = true
self.imageviewName.layer.cornerRadius = 10

Les réponses basées uniquement sur le code sont déconseillées. Veuillez cliquer sur modifier et ajouter quelques mots résumant la façon dont votre code répond à la question, ou peut-être expliquer en quoi votre réponse diffère de la / des réponses précédentes. Merci
Nick

1

Pour imageView.contentMode = .scaleAspectFillle cornerRadiusn'est pas appliqué si l'image est très grande, selon le matériel.

Quelques tests avec des images panoramiques redimensionnées:

  • iPhone X, taille d'image 5000x1107: 🚫 4000x886: ✅
  • iPhone 6s Plus, taille d'image 10000x2215: 🚫 5000x1107: ✅
  • iPhone 6s, taille d'image 10000x2215: 🚫 5000x1107: ✅

Les dimensions imageView où 160x100. Fait intéressant, le nouveau matériel n'est pas nécessairement plus performant.

N'hésitez pas à modifier cet article avec plus de résultats de test!


0
-(void) viewDidAppear:(BOOL)animated{
       [super viewDidAppear:animated];
       [self setMaskTo:viewDistance 
             byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight];
           }

- (void)setMaskTo:(UIView*)view byRoundingCorners:(UIRectCorner)corners
     {
      UIBezierPath *rounded = [UIBezierPath 
                bezierPathWithRoundedRect:view.bounds
                                              byRoundingCorners:corners

                     cornerRadii:CGSizeMake(20.0, 20.0)];

          CAShapeLayer *shape = [[CAShapeLayer alloc] init];
          shape.frame = self.view.bounds;
         [shape setPath:rounded.CGPath];
          view.layer.mask = shape;
       }

0

Réponse de Swift 4.2:

Pour que le rayon du coin fonctionne, ajoutez l'image à a UIView, puis vous devez définir la masksToBoundspropriété de l'image sur true:

planeImage.layer.masksToBounds = true
planeImage.layer.cornerRadius = 20

Remarque: remplacez 20 par le cornerRadius


0

Rien des réponses précédentes ne fonctionne?

Il peut arriver que la taille de UIImageView soit supérieure à la taille de l'image. Le rayon de coin peut être bien réglé mais pas visible dans ce cas.

Vérification rapide de la taille d'UIImageView par code: (ou peut utiliser l'outil "Afficher la hiérarchie de l'interface utilisateur" dans XCode)

self.imageView.backgroundColor = [UIColor greenColor]; 

Dans ce scénario, vous devez vous assurer que UIImageView a le même rapport hauteur / largeur que l'image.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.