Come arrotondare gli angoli di un pulsante


182

Ho un'immagine rettangolare (jpg) e voglio usarla per riempire lo sfondo di un pulsante con l'angolo arrotondato in xcode.

Ho scritto quanto segue:

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

Tuttavia, il pulsante che ottengo con quell'approccio non ha gli angoli arrotondati: è invece un semplice rettangolo che assomiglia esattamente alla mia immagine originale. Come posso ottenere invece un'immagine con l'angolo arrotondato per rappresentare il mio pulsante?

Grazie!

Risposte:


436

Penso di avere il tuo problema, ho provato la seguente soluzione con UITextArea e suppongo che funzionerà anche con UIButton.

prima di tutto importalo nel tuo file .m -

#import <QuartzCore/QuartzCore.h>

e quindi nel tuo loadViewmetodo aggiungi le seguenti righe

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

Spero che questo funzioni per te e, se sì, comunica.


6
Funziona anche con l'ispettore "User Defined Runtime Attributes"
Avi Cherry

Funziona anche per Swift! Cambia SÌ in vero.
Andrew Thomas,

119

È possibile ottenere da questo RunTime Attributes

inserisci qui la descrizione dell'immagine

possiamo creare bottone personalizzato. Basta vedere lo screenshot allegato.

si prega di prestare attenzione:

in attributi di runtime per cambiare il colore del bordo seguire queste istruzioni

  1. creare una classe di categoria di CALayer

  2. nel file h

    @property(nonatomic, assign) UIColor* borderIBColor;
  3. nel file m:

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

ora in poi per impostare lo screenshot di controllo del colore del bordo

risposta aggiornata

Grazie


4
Solo io o le informazioni nella risposta sono incomplete? Non funziona davvero. Aggiornamento: funziona purché non lo specifichi borderColor. Ma poi usa sempre il nero per borderColor.
Jonny

3
Risposta estesa: il colore impostato nell'IB è probabilmente di tipo UIColor che non funziona con borderColor, che è di CGColorRef. O qualcosa di simile. Quindi una soluzione è quella di creare una categoria su CALayer, con qualcosa di simile @property(nonatomic, assign) UIColor* borderIBColor;(che non si scontra con qualche altro nome) nel file di intestazione, e l'implementazione è:-(void)setBorderIBColor:(UIColor*)color{self.borderColor = color.CGColor;} -(UIColor*)borderIBColor{return [UIColorcolorWithCGColor:self.borderColor];}
Jonny

1
Se non vuoi un colore per il bordo, imposta borderRadius su 0 e non ne avrai uno!
jungledev,

Che dire di Swift?
Jayprakash Dubey,

1
@JayprakashDubey creo l'estensione di CALayer.
Krutarth Patel,

14

Potresti voler dare un'occhiata alla mia libreria chiamata DCKit . È scritto sull'ultima versione di Swift .

Saresti in grado di creare direttamente un pulsante / campo di testo ad angolo arrotondato dal builder Interface:

DCKit: pulsante arrotondato

Ha anche molte altre funzioni interessanti, come campi di testo con convalida, controlli con bordi, bordi tratteggiati, viste di cerchi e linee sottili ecc.


11

Spingendo verso l' alto il raggio dell'angolo per ottenere un cerchio:

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

inserisci qui la descrizione dell'immagine

Se la cornice del pulsante è quadrata, non importa frame.height o frame.width. Altrimenti usa il più grande di entrambi.


7

Importa il framework QuartCore se non è presente nel tuo progetto esistente, quindi importa #import <QuartzCore/QuartzCore.h>in 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

Prima imposta larghezza = 100 e Altezza = 100 del pulsante

Soluzione obiettivo C.

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

Soluzione Swift 4

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

2

Se vuoi un angolo arrotondato solo a uno o due angoli, ecc ... leggi questo post:

[ObjC] - UIButton con angolo arrotondato - http://goo.gl/kfzvKP

È una sottoclasse XIB / Storyboard. Importa e imposta i bordi senza scrivere codice.



2

aggiornato per Swift 3:

usato sotto il codice per arrotondare l'angolo UIButton:

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

2

Prova il mio codice. Qui puoi impostare tutte le proprietà di UIButton come colore del testo, colore di sfondo, raggio dell'angolo, ecc.

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

Adesso chiama così

yourBtnName.btnCorner()


0

Per iOS SWift 4

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

0

inserisci qui la descrizione dell'immagine

Per l' obiettivo C :

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

Per Swift :

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

0

Swift 4 Update

Ho anche provato molte opzioni ma non sono riuscito a ottenere il mio UIButton arrotondato. Ho aggiunto il codice del raggio d'angolo all'interno del viewDidLayoutSubviews()mio problema risolto.

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

Inoltre possiamo regolare cornerRadius come segue

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = 10 //Any suitable number as you prefer can be applied 
    }
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.