Comment arrondir les coins d'un bouton


182

J'ai une image rectangle (jpg) et je veux l'utiliser pour remplir l'arrière-plan d'un bouton avec un coin arrondi en xcode.

J'ai écrit ce qui suit:

UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect] retain];
CGRect frame = CGRectMake(x, y, cardWidth, cardHeight);
button.frame = frame;
[button setBackgroundImage:backImage forState:UIControlStateNormal];

Cependant, le bouton que j'obtiens avec cette approche n'a pas ses coins arrondis: il s'agit plutôt d'un rectangle uni qui ressemble exactement à mon image d'origine. Comment puis-je obtenir à la place une image avec un coin arrondi pour représenter mon bouton?

Merci!

Réponses:


436

Je pense que j'ai votre problème, j'ai essayé la solution suivante avec UITextArea et je suppose que cela fonctionnera également avec UIButton.

importez tout d'abord ceci dans votre fichier .m -

#import <QuartzCore/QuartzCore.h>

puis dans votre loadViewméthode ajoutez les lignes suivantes

    yourButton.layer.cornerRadius = 10; // this value vary as per your desire
    yourButton.clipsToBounds = YES;

J'espère que cela fonctionne pour vous et si oui, communiquez.


6
Fonctionne également avec l'inspecteur "Attributs d'exécution définis par l'utilisateur"
Avi Cherry

Fonctionne aussi pour swift! Changez simplement OUI en vrai.
Andrew Thomas

119

Vous pouvez réaliser par ces attributs d'exécution

entrez la description de l'image ici

nous pouvons créer un bouton personnalisé, voir la capture d'écran ci-jointe.

veuillez faire attention:

dans les attributs d'exécution pour changer la couleur de la bordure, suivez cette instruction

  1. créer une classe de catégorie de CALayer

  2. dans le fichier h

    @property(nonatomic, assign) UIColor* borderIBColor;
  3. dans le fichier m:

    -(void)setBorderIBColor:(UIColor*)color {
        self.borderColor = color.CGColor;
    }
    
    -(UIColor*)borderIBColor {
        return [UIColor colorWithCGColor:self.borderColor];
    }
    

maintenant pour définir la capture d'écran de vérification de la couleur de la bordure

réponse mise à jour

Merci


4
Juste moi ou les informations dans la réponse sont-elles incomplètes? Ça ne marche pas vraiment. Mise à jour: cela fonctionne tant que je ne le précise pas borderColor. Mais alors, il utilise toujours le noir pour borderColor.
Jonny

3
Réponse étendue: La couleur définie dans l'IB est probablement de type UIColor qui ne fonctionne pas avec borderColor, qui est de CGColorRef. Ou quelque chose comme ça. Donc, une solution est de créer une catégorie sur CALayer, avec quelque chose comme @property(nonatomic, assign) UIColor* borderIBColor;(qui n'entre pas en conflit avec un autre nom) dans le fichier d'en-tête, et l'implémentation est:-(void)setBorderIBColor:(UIColor*)color{self.borderColor = color.CGColor;} -(UIColor*)borderIBColor{return [UIColorcolorWithCGColor:self.borderColor];}
Jonny

1
Si vous ne voulez pas de couleur de bordure, définissez borderRadius sur 0 et vous n'en aurez pas!
jungledev

Et Swift?
Jayprakash Dubey

1
@JayprakashDubey je crée l'extension de CALayer.
Krutarth Patel

14

Vous voudrez peut-être consulter ma bibliothèque appelée DCKit . Il est écrit sur la dernière version de Swift .

Vous pourrez créer un bouton / champ de texte à coin arrondi directement à partir du générateur d'interface:

DCKit: bouton arrondi

Il possède également de nombreuses autres fonctionnalités intéressantes, telles que des champs de texte avec validation, des contrôles avec des bordures, des bordures en pointillés, des vues de cercle et de cheveux, etc.


11

Pousser jusqu'aux limites du rayon d'angle pour obtenir un cercle

    self.btnFoldButton.layer.cornerRadius = self.btnFoldButton.frame.height/2.0;

entrez la description de l'image ici

Si le cadre du bouton est un carré, peu importe frame.height ou frame.width. Sinon, utilisez le plus grand des deux.


7

Importez le framework QuartCore s'il n'est pas présent dans votre projet existant, puis importez-le #import <QuartzCore/QuartzCore.h>dans viewcontroller.m

UIButton *button = [[UIButton buttonWithType:UIButtonTypeRoundedRect]];
CGRect frame = CGRectMake(x, y, width, height); // set values as per your requirement
button.layer.cornerRadius = 10;
button.clipsToBounds = YES;

6
UIButton* closeBtn = [[UIButton alloc] initWithFrame:CGRectMake(10, 50, 90, 35)];
//Customise this button as you wish then
closeBtn.layer.cornerRadius = 10;
closeBtn.layer.masksToBounds = YES;//Important

4

Premier jeu de largeur = 100 et Hauteur = 100 du bouton

Solution Objectif C

YourBtn1.layer.cornerRadius=YourBtn1.Frame.size.width/2;
YourBtn1.layer.borderColor=[uicolor blackColor].CGColor;
YourBtn1.layer.borderWidth=1.0f;

Solution Swift 4

YourBtn1.layer.cornerRadius = YourBtn1.Frame.size.width/2
YourBtn1.layer.borderColor = UIColor.black.cgColor
YourBtn1.layer.borderWidth = 1.0

2

Si vous voulez un coin arrondi seulement à un coin ou à deux coins, etc ... lisez ce post:

[ObjC] - UIButton avec coin arrondi - http://goo.gl/kfzvKP

C'est une sous-classe XIB / Storyboard. Importez et définissez des bordures sans écrire de code.



2

mis à jour pour Swift 3:

utilisé ci-dessous le code pour faire arrondir le coin UIButton:

 yourButtonOutletName.layer.cornerRadius = 0.3 *
        yourButtonOutletName.frame.size.height

2

Essayez mon code. Ici, vous pouvez définir toutes les propriétés d'UIButton telles que la couleur du texte, la couleur d'arrière-plan, le rayon des coins, etc.

extension UIButton {
    func btnCorner() {
        layer.cornerRadius = 10
        clipsToBounds = true
        backgroundColor = .blue
    }
}

Maintenant appelle comme ça

yourBtnName.btnCorner()


0

Pour iOS SWift 4

button.layer.cornerRadius = 25;
button.layer.masksToBounds = true;

0

entrez la description de l'image ici

Pour l' objectif C :

submitButton.layer.cornerRadius = 5;
submitButton.clipsToBounds = YES;

Pour Swift :

submitButton.layer.cornerRadius = 5
submitButton.clipsToBounds = true

0

Mise à jour Swift 4

J'ai également essayé de nombreuses options, mais je n'ai pas réussi à faire acculer mon UIButton. J'ai ajouté le code de rayon de coin dans le viewDidLayoutSubviews()problème Résolu mon.

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = anyButton.frame.height / 2
    }

Nous pouvons également ajuster le cornerRadius comme suit

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = 10 //Any suitable number as you prefer can be applied 
    }
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.