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

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.

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

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.

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.

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:

1. Erstellen Sie eine Cocoa Touch-Klasse.

2. 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
           }
       }
   }

3. Beziehen Sie sich auf das Bild.

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

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.

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
    }
}

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.

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");
}

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()

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.

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)
        }
    }
}