614 votes

Donner des coins arrondis à UIView

Ma vue de connexion a une sous-vue qui a une UIActivityView y un UILabel disant "Signing In ". Cette vue secondaire a des coins qui ne sont pas arrondis. Comment puis-je les rendre ronds ?

Y a-t-il un moyen de le faire dans mon xib ?

6 votes

Pour faire quelque chose comme ça dans IB, il faudrait une image pré-rendue avec des coins arrondis.

10 votes

Pas nécessairement @ed-marty, Cette réponse de @Gujamin mérite un peu plus de crédit, car il montre comment appliquer les cornerRadius au tableau uniquement à l'aide d'Interface Builder, sans devoir utiliser des images préenregistrées ou les définir dans le code.

1 votes

1269voto

Ed Marty Points 24861

Essayez ceci

#import <QuartzCore/QuartzCore.h> // not necessary for 10 years now  :)

...

view.layer.cornerRadius = 5;
view.layer.masksToBounds = true;

Remarque : si vous essayez d'appliquer des coins arrondis à une UIViewController Il ne doit pas être appliqué dans le constructeur du contrôleur de vue, mais plutôt dans le constructeur du contrôleur de vue. -viewDidLoad après view est effectivement instancié.

6 votes

Notez que cette propriété n'existe que dans l'iPhone 3.0, pas dans les versions antérieures.

6 votes

Je dois juste dire que c'est l'une des réponses les plus immédiatement satisfaisantes que j'aie jamais vues sur SO. Vérifier ici d'abord m'a juste épargné une heure de combat avec un éditeur d'image et aurait rendu ma vue plus fragile aux changements de couleur / taille. Merci !

20 votes

Note connexe : toute personne intéressée par d'autres éléments visuels (par exemple l'ombre) à appliquer facilement à une UIView devrait consulter la référence de la classe CALayer. Pour la plupart, il suffit de définir une ou deux valeurs de propriété, comme la réponse ci-dessus : developer.apple.com/mac/library/documentation/GraphicsImaging/

277voto

Gujamin Points 1016

Vous pouvez également utiliser le Attributs d'exécution définis par l'utilisateur fonction du constructeur d'interface pour définir le chemin de la clé layer.cornerRadius à une valeur. Veillez à inclure l'élément QuartzCore Mais la bibliothèque.

Cette astuce fonctionne également pour le réglage de layer.borderWidth, mais elle ne fonctionnera pas pour layer.borderColor car elle attend un CGColor pas un UIColor .

Vous ne pourrez pas voir les effets dans le storyboard car ces paramètres sont évalués au moment de l'exécution.

Using Interface builder to set the corner radius

11 votes

N'oubliez pas de vérifier le Clip Subviews pour la vue IB également

2 votes

(ou) ajouter une clé Chemin : layer.masksToBounds, Type : booléen : Coché

0 votes

Définissez les deux attributs d'exécution définis par l'utilisateur (layer.cornerRadius et layer.masksToBounds) sur le FxView dans le contour du document, et non sur sa vue. Cette réponse me sauve la vie ! Elle fonctionne pour moi avec Xcode 12.3, sans l'instruction #import <QuartzCore/QuartzCore.h>.

66voto

Maintenant vous pouvez utiliser une catégorie swift dans UIView (code ci-dessous) avec @IBInspectable pour montrer le résultat au storyboard (Si vous utilisez la catégorie, utilisez seulement cornerRadius et non layer.cornerRadius comme chemin clé.

extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
}

enter image description here

0 votes

Et si vous utilisez une sous-classe personnalisée, assurez-vous de la marquer avec @IBDesignable pour avoir un aperçu en direct dans IB ! (Pour en savoir plus nshipster.com/ibinspectable-ibdesignable )

44voto

Une approche différente de celle d'Ed Marty :

#import <QuartzCore/QuartzCore.h>

[v.layer setCornerRadius:25.0f];
[v.layer setMasksToBounds:YES];

Vous avez besoin de setMasksToBounds pour charger tous les objets de IB... j'ai eu un problème où ma vue a été arrondie, mais n'avait pas les objets de IB :/.

c'est réparé =D j'espère que ça aidera !

49 votes

En quoi est-ce différent ? à part le fait de ne pas utiliser la syntaxe du point ?

3 votes

[v.layer setMasksToBounds:YES] ; \n Cette ligne est magique, elle résout mon gros problème.

3 votes

J'ai écrit ceci lorsque j'ai commencé à développer des systèmes d'exploitation et je ne savais pas qu'il n'y avait pas de différence entre la syntaxe des points et celle des crochets. C'est pourquoi je l'ai écrit comme "différent". Mon code inclut également l'import<> qu'Ed Marty n'avait pas dans sa réponse originale (modifiée plus tard) et donc ma réponse aide les gens à résoudre leur problème (c'est-à-dire ne pas l'avoir importé).

28voto

pabloruiz55 Points 904

Comme décrit dans cet article de blog Voici une méthode pour arrondir les angles d'une UIView :

+(void)roundView:(UIView *)view onCorner:(UIRectCorner)rectCorner radius:(float)radius
{
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds
                                                   byRoundingCorners:rectCorner
                                                         cornerRadii:CGSizeMake(radius, radius)];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = view.bounds;
    maskLayer.path = maskPath.CGPath;
    [view.layer setMask:maskLayer];
    [maskLayer release];
}

Ce qui est génial, c'est que vous pouvez sélectionner les coins que vous voulez arrondir.

6 votes

Plutôt que de fournir un lien vers un site externe, nous préférons que les réponses soient autonomes ici. J'ai donc intégré le code pertinent de l'article de blog lié dans votre réponse. Les gens peuvent visiter l'article de blog pour plus de détails, mais cela permet de s'assurer que le contenu survivra si l'article en question disparaît. En outre, vous avez publié cette réponse à plusieurs questions différentes qui ne demandaient pas vraiment la même chose. Celles-ci ont été supprimées, et une question a été fermée car elle faisait double emploi avec celle-ci. Nous aimons que les réponses soient conçues pour correspondre à chaque question.

5 votes

Prescient. L'article du blog est maintenant 404.

0 votes

Cette approche est propre mais elle permet de masquer tout effet d'ombre sur la vue.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X