Wie erstelle ich eine einfache abgerundete Schaltfläche in Storyboard?

104

Ich habe gerade angefangen, iOS-Entwicklung zu lernen und kann nicht herausfinden, wie man einfache abgerundete Schaltflächen erstellt. Ich finde Ressourcen für alte Versionen. Muss ich einen benutzerdefinierten Hintergrund für eine Schaltfläche festlegen? In Android würde ich nur einen 9-Patch verwenden, aber ich weiß, dass iOS diese Funktion nicht hat.

Geben Sie hier die Bildbeschreibung ein

Gintas_
quelle

Antworten:

82

Um dies im Storyboard zu tun, müssen Sie ein Bild für die Schaltfläche verwenden.

Alternativ können Sie dies im Code tun:

 btn.layer.cornerRadius = 10
 btn.clipsToBounds = true
realtimez
quelle
2
Warum werden clipsToBounds benötigt? Es scheint, dass der Schatten nicht funktioniert, bis ich ihn entferne.
Gintas_
1
Gute Antwort, aber Sie können es in IB ohne Bilder tun. Siehe unten.
Zontar
223

Kurze Antwort: JA

Sie können absolut einfach eine abgerundete Schaltfläche erstellen, ohne ein zusätzliches Hintergrundbild zu benötigen oder einen Code dafür zu schreiben. Folgen Sie einfach dem Screenshot unten, um die Laufzeitattribute für die Schaltfläche festzulegen und das gewünschte Ergebnis zu erzielen.

Es wird nicht in der Storyboardangezeigt, funktioniert aber einwandfrei, wenn Sie das Projekt ausführen.

Geben Sie hier die Bildbeschreibung ein

Hinweis:
Der 'Schlüsselpfad' layer.cornerRadius und Wert ist 5. Der Wert muss entsprechend der Höhe und Breite der Schaltfläche geändert werden. Die Formel dafür ist die Höhe der Schaltfläche * 0,50. Spielen Sie also um den Wert herum, um die erwartete abgerundete Schaltfläche im Simulator oder auf dem physischen Gerät anzuzeigen. Dieser Vorgang ist mühsam, wenn Sie mehr als eine Schaltfläche im Storyboard abrunden müssen.

Nishant
quelle
9
Bitte fügen Sie einen Kommentar hinzu, wenn Sie negativ abstimmen.
Nishant
7
Es ist enttäuschend, dass IB dies nicht wie eine Run-of-the-Mill-Zeichen-App zeigen kann.
William Cerniuk
2
@ WilliamCerniuk: Eigentlich kann es. Überprüfen Sie heraus nshipster.com/ibinspectable-ibdesignable
Nishant
Das Festlegen der benutzerdefinierten Laufzeitattribute funktioniert tatsächlich und kann nach dem Erstellen im Simulator angezeigt werden.
Nachteile Bulaquena
Wie in der akzeptierten Antwort angegeben, müssen Sie möglicherweise auch einen Booleschen Schlüsselpfad hinzufügen, clipsToBoundsdamit dies funktioniert.
Max
86

Sie können so etwas tun:

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? frame.size.height / 2 : 0
    }
}

Setzen Sie die Klasse auf MyButtonin Identity Inspectorund in IB haben Sie die roundedEigenschaft:

Geben Sie hier die Bildbeschreibung ein

ChikabuZ
quelle
4
Mit Abstand die beste Antwort. Habe heute etwas Neues gelernt, super!
Mark
2
Diese Antwort ist nicht vollständig. Wenn Sie Ihre App starten, verwendet xCode die Frame-Größe der Ansicht im Interface Builder und nicht die tatsächliche Frame-Größe, wenn die App ausgeführt wird.
Simon Backx
2
Sie können auch "didSet" anstelle von "willSet" verwenden und das Argument isRounded entfernen.
Simon Backx
1
Wenn Sie ein Hintergrundbild verwenden, setzen Sie layer.masksToBounds = trueauch
zontar
34
  1. Erstellen Sie eine Cocoa Touch-Klasse.

Geben Sie hier die Bildbeschreibung ein

  1. Fügen Sie den Code in die RoundButton-Klasse ein.

    import UIKit
    
    @IBDesignable
    class RoundButton: UIButton {
    
        @IBInspectable var cornerRadius: CGFloat = 0{
            didSet{
            self.layer.cornerRadius = cornerRadius
            }
        }
    
        @IBInspectable var borderWidth: CGFloat = 0{
            didSet{
                self.layer.borderWidth = borderWidth
            }
        }
    
        @IBInspectable var borderColor: UIColor = UIColor.clear{
            didSet{
                self.layer.borderColor = borderColor.cgColor
            }
        }
    }
  2. Beziehen Sie sich auf das Bild.

Geben Sie hier die Bildbeschreibung ein

Anson
quelle
Bitte hören Sie auf, dieselbe Antwort wiederholt zu veröffentlichen. Dies wird als Rauschen angesehen. Passen Sie Ihre Antworten entweder an die verschiedenen Fragen an oder, wenn es sich wirklich um dieselbe Frage handelt, können Sie sie als Duplikate kennzeichnen (und wenn Sie über einen ausreichenden Ruf verfügen, stimmen Sie ab, um sie zu schließen).
Elixenid
Ich weiß nicht, ob auch andere darauf gestoßen sind, aber sobald ich die Klasse auf eine Schaltfläche gesetzt und ihr einen Radius, eine Rahmenbreite und eine Rahmenfarbe gegeben habe, gibt Xcode (9.2) den Fehler aus, dass ein Renderfehler aufgetreten ist. Die App-Erstellung ist erfolgreich, aber das rote "!" wird weiterhin angezeigt. Ich sage nur ... Ich bin zurück zur Nur-Code-Lösung gewechselt (obwohl dies wirklich ein eleganter Weg war).
Aeger
10

Ich fand den einfachsten Weg, dies zu tun, indem ich den Eckradius auf die Hälfte der Höhe der Ansicht einstellte.

button.layer.cornerRadius = button.bounds.size.height/2
FrankkieNL
quelle
Nein, habe ich nicht. Wenn Ihre Höhe und Breite gleich sind (es wäre also quadratisch gewesen), würden Sie einen Kreis erhalten. Wenn die Breite jedoch größer als die Höhe ist, ist die Schaltfläche korrekt.
FrankkieNL
2
Sie haben Recht, ich habe das Bild in der Frage verpasst, das zeigt, was das Poster tatsächlich nach Übereinstimmungen mit Ihrer Antwort war, mehr als die akzeptierte Antwort - Upvote
Michael Hudson
4

Sie können IBOutletIhre Schaltfläche über das Storyboard verbinden.

Dann können Sie corner radiusIhren Knopf so einstellen , dass er eckig wird.

zum Beispiel Ihr outletist myButtondann,

Obj - C.

 self.myButton.layer.cornerRadius = 5.0 ;

Schnell

  myButton.layer.cornerRadius = 5.0

Wenn Sie genaue runde Taste wollen dann Taste ist widthund heightmuss sein equalund cornerRadiusmuss auf Höhe oder Breite / 2 ( die Hälfte der Breite oder Höhe) gleich sein.

Ketan Parmar
quelle
4

Wie andere Antworten vorgeschlagen haben, um den größten Teil dieser Arbeit im Code auszuführen, bot nur eine Antwort tatsächlich eine Möglichkeit, Ihre Änderungen in der Storyboard-IB-Oberfläche anzuzeigen. Meine Antwort geht über diese Antwort hinaus, indem Sie den Eckradius der Ansicht, der Schaltfläche, des Bildes usw. ändern können.

Bitte schauen Sie sich den folgenden Code an. Um diesen Code zu verwenden, erstellen Sie eine neue schnelle Datei mit dem Namen RoundedView oder wie auch immer Sie sie nennen möchten. Gehen Sie dann zu Ihrem Storyboard und ändern Sie die Klasse in "RoundedView", "RoundedImageView" oder "RoundedButton".

import UIKit

@IBDesignable class RoundedImage: UIImageView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedView: UIView
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}

@IBDesignable class RoundedButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()

        updateCornerRadius()
    }

    @IBInspectable var rounded: Bool = false {
        didSet {
            updateCornerRadius()
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.1 {
        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius() {
        layer.cornerRadius = rounded ? cornerRadius : 0
        layer.masksToBounds = rounded ? true : false
    }
}
Joseph Shenton
quelle
1

layer.cornerRadiusStellen Sie beim Hinzufügen im Storyboard sicher, dass Sie keine führenden oder nachfolgenden Leerzeichen haben. Wenn Sie kopieren und einfügen, werden möglicherweise Leerzeichen eingefügt. Wäre schön, wenn XCode eine Warnung oder einen Fehler sagt.

Venki Mohan
quelle
0

Versuche dies!!

 override func viewDidLoad() {
   super.viewDidLoad()

   var button = UIButton.buttonWithType(.Custom) as UIButton
   button.frame = CGRectMake(160, 100, 200,40)

   button.layer.cornerRadius =5.0
   button.layer.borderColor = UIColor.redColor().CGColor
   button.layer.borderWidth = 2.0

   button.setImage(UIImage(named:"Placeholder.png"), forState: .Normal)
   button.addTarget(self, action: "OnClickroundButton", forControlEvents: .TouchUpInside)
   button.clipsToBounds = true

   view.addSubview(button)
}
    func OnClickroundButton() {
   NSLog(@"roundButton Method Called");
}
Sanjeet Verma
quelle
0

Die Erweiterung ist die beste Option für dieses Problem. Erstellen Sie eine Erweiterung von Ansicht oder Schaltfläche

public extension UIView {
  //Round the corners
  func roundCorners(){
    let radius = bounds.maxX / 16
    layer.cornerRadius = radius
  }
}

Rufen Sie es aus dem Code

button.roundCorners()
Muhammad Usman
quelle
0

Ich verwende Xcode Version 11.4

Im Attributinspektor können Sie den Eckenradius definieren.

Es wird nicht im Storyboard angezeigt, funktioniert aber einwandfrei, wenn Sie das Projekt ausführen.

Geben Sie hier die Bildbeschreibung ein

Casillas
quelle
-1
import UIKit

@IBDesignable class MyButton: UIButton
{
    override func layoutSubviews() {
        super.layoutSubviews()


    }

    func updateCornerRadius(radius:CGFloat) {
        layer.cornerRadius = radius
    }
    @IBInspectable var cornerRadius:CGFloat = 0{
        didSet{
            updateCornerRadius(radius: cornerRadius)
        }
    }
}
Rodrigo Salomao
quelle