Wie man die Ecken eines Knopfes abrundet

182

Ich habe ein Rechteckbild (jpg) und möchte es verwenden, um den Hintergrund einer Schaltfläche mit einer abgerundeten Ecke in xcode zu füllen.

Ich habe folgendes geschrieben:

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

Bei der Schaltfläche, die ich mit diesem Ansatz erhalte, sind die Ecken jedoch nicht abgerundet. Stattdessen handelt es sich um ein einfaches Rechteck, das genau wie mein Originalbild aussieht. Wie kann ich stattdessen ein Bild mit abgerundeten Ecken erhalten, um meine Schaltfläche darzustellen?

Vielen Dank!

double07
quelle

Antworten:

436

Ich glaube, ich habe Ihr Problem, ich habe die folgende Lösung mit UITextArea versucht und ich nehme an, dass dies auch mit UIButton funktioniert.

Importieren Sie dies zunächst in Ihre .m-Datei -

#import <QuartzCore/QuartzCore.h>

und loadViewfügen Sie dann in Ihrer Methode die folgenden Zeilen hinzu

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

Hoffe das funktioniert bei dir und wenn ja kommuniziere.

devsri
quelle
6
Funktioniert auch mit dem Inspektor "Benutzerdefinierte Laufzeitattribute"
Avi Cherry
Funktioniert auch schnell! Ändern Sie einfach JA in wahr.
Andrew Thomas
119

Sie können durch diese RunTime-Attribute erreichen

Geben Sie hier die Bildbeschreibung ein

Wir können benutzerdefinierte Schaltflächen erstellen. Siehe Screenshot im Anhang.

Bitte beachten Sie:

Befolgen Sie in Laufzeitattributen zum Ändern der Rahmenfarbe die Anweisungen

  1. Erstellen Sie eine Kategorieklasse von CALayer

  2. in h Datei

    @property(nonatomic, assign) UIColor* borderIBColor;
  3. in m Datei:

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

Jetzt können Sie den Screenshot für die Farbprüfung der Rahmen festlegen

aktualisierte Antwort

Vielen Dank

Krutarth Patel
quelle
4
Nur ich oder sind die Informationen in der Antwort unvollständig? Es funktioniert nicht wirklich. Update: Es funktioniert solange ich nicht spezifiziere borderColor. Aber dann wird immer Schwarz für die borderColor verwendet.
Jonny
3
Erweiterte Antwort: Die im IB festgelegte Farbe ist wahrscheinlich vom Typ UIColor, der nicht mit borderColor, das von CGColorRef ist, funktioniert. Oder etwas ähnliches. Eine Lösung besteht also darin, eine Kategorie auf CALayer mit etwas wie @property(nonatomic, assign) UIColor* borderIBColor;(das nicht mit einem anderen Namen kollidiert) in der Header-Datei zu erstellen. Die Implementierung lautet:-(void)setBorderIBColor:(UIColor*)color{self.borderColor = color.CGColor;} -(UIColor*)borderIBColor{return [UIColorcolorWithCGColor:self.borderColor];}
Jonny
1
Wenn Sie keine Rahmenfarbe möchten, setzen Sie den borderRadius auf 0 und Sie werden keine haben!
Jungledev
Was ist mit Swift?
Jayprakash Dubey
1
@ JayprakashDubey Ich erstelle eine Erweiterung von CALayer.
Krutarth Patel
14

Vielleicht möchten Sie meine Bibliothek namens DCKit überprüfen . Es ist auf der neuesten Version von Swift geschrieben .

Sie können direkt über den Interface Builder eine Schaltfläche / ein Textfeld mit abgerundeten Ecken erstellen:

DCKit: abgerundete Taste

Es hat auch viele andere coole Funktionen, wie Textfelder mit Validierung, Steuerelemente mit Rahmen, gestrichelte Rahmen, Kreis- und Haaransichten usw.

Andrey Gordeev
quelle
11

Schieben Sie den Eckenradius nach oben, um einen Kreis zu erhalten:

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

Geben Sie hier die Bildbeschreibung ein

Wenn der Schaltflächenrahmen ein Quadrat ist, spielt es keine Rolle, ob Frame.Höhe oder Frame.Breite. Verwenden Sie andernfalls den größten von beiden.

Javier Calatrava Llavería
quelle
7

Importieren Sie das QuartCore-Framework, wenn es in Ihrem vorhandenen Projekt nicht vorhanden ist, und importieren Sie es #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;
iAnkit
quelle
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
Vinay Mahipal
quelle
4

Stellen Sie zuerst die Breite = 100 und die Höhe = 100 der Taste ein

Ziel C Lösung

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

Swift 4-Lösung

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

Wenn Sie eine abgerundete Ecke nur zu einer Ecke oder zwei Ecken usw. möchten, lesen Sie diesen Beitrag:

[ObjC] - UIButton mit abgerundeter Ecke - http://goo.gl/kfzvKP

Es ist eine XIB / Storyboard-Unterklasse. Importieren und Festlegen von Rahmen ohne Schreibcode.

elp
quelle
2

Für Swift:

button.layer.cornerRadius = 10.0
Pableiros
quelle
2

aktualisiert für Swift 3:

wird unter dem folgenden Code verwendet, um die UIButton-Ecke rund zu machen:

 yourButtonOutletName.layer.cornerRadius = 0.3 *
        yourButtonOutletName.frame.size.height
Kiran Jadhav
quelle
2

Probieren Sie meinen Code aus. Hier können Sie alle Eigenschaften von UIButton wie Textfarbe, Hintergrundfarbe, Eckenradius usw. festlegen.

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

Rufen Sie jetzt so an

yourBtnName.btnCorner()
iOS
quelle
0

Für iOS SWift 4

button.layer.cornerRadius = 25;
button.layer.masksToBounds = true;
Jayesh Nai
quelle
0

Geben Sie hier die Bildbeschreibung ein

Für Ziel C :

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

Für Swift :

submitButton.layer.cornerRadius = 5
submitButton.clipsToBounds = true
Mr.Javed Multani
quelle
0

Swift 4 Update

Ich habe auch viele Optionen ausprobiert, aber ich konnte meinen UIButton nicht in die Enge treiben. Ich habe den viewDidLayoutSubviews()Eckradiuscode in " Gelöstes Problem" hinzugefügt .

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

Wir können den CornerRadius auch wie folgt einstellen

func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        anyButton.layer.cornerRadius = 10 //Any suitable number as you prefer can be applied 
    }
Adwait Gaikwad
quelle