Come creare un semplice pulsante arrotondato in Storyboard?

Ho appena iniziato a imparare lo sviluppo di iOS, non riesco a trovare come creare semplici pulsanti arrotondati. Trovo risorse per le vecchie versioni. Devo impostare uno sfondo personalizzato per un pulsante? In Android, userei solo una patch 9, ma so che iOS non ha questa capacità.

Per farlo nello storyboard, è necessario utilizzare un'immagine per il pulsante.

In alternativa puoi farlo in codice:

 btn.layer.cornerRadius = 10
 btn.clipsToBounds = true

Risposta breve: SI

Puoi assolutamente creare un semplice pulsante arrotondato senza la necessità di un'immagine di sfondo aggiuntiva o di scrivere alcun codice per lo stesso. Basta seguire lo screenshot riportato di seguito, per impostare gli attributi di runtime per il pulsante, per ottenere il risultato desiderato.

Non verrà visualizzato in Storyboardma funzionerà correttamente quando si esegue il progetto.

Nota:
il "Percorso chiave" layer.cornerRadius e il valore sono 5. Il valore deve essere modificato in base all'altezza e alla larghezza del pulsante. La formula è l'altezza del pulsante * 0,50. Quindi gioca intorno al valore per vedere il pulsante arrotondato previsto nel simulatore o sul dispositivo fisico. Questa procedura sembrerà noiosa quando avrai più di un pulsante da arrotondare nello storyboard.

Puoi fare qualcosa del genere:

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

Imposta la classe su MyButtonin Identity Inspectore in IB avrai roundedproprietà:

1. Crea una lezione Cocoa Touch.

2. Inserisci il codice nella classe RoundButton.

   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. Riferisci l'immagine.

Ho trovato il modo più semplice per farlo, è impostare il cornerRadius a metà dell'altezza della vista.

button.layer.cornerRadius = button.bounds.size.height/2

Puoi connettere il IBOutlettuo pulsante dallo storyboard.

Quindi puoi impostare il corner radiustuo pulsante per arrotondare l'angolo.

ad esempio, il tuo outletè myButton,

Obj - C

 self.myButton.layer.cornerRadius = 5.0 ;

veloce

  myButton.layer.cornerRadius = 5.0

Se si desidera un pulsante rotondo esatto, il pulsante widthe heightdeve essere equale cornerRadiusdeve essere uguale all'altezza o alla larghezza / 2 (metà della larghezza o dell'altezza).

Come altre risposte hanno suggerito di eseguire la maggior parte di questo lavoro in codice, solo una risposta ha effettivamente fornito un modo per visualizzare le modifiche nell'interfaccia IB dello storyboard. La mia risposta va oltre quella risposta permettendoti di cambiare l'angoloRaggio della vista, pulsante, immagine, ecc.

Si prega di dare un'occhiata al seguente codice. Per usare questo codice crea un nuovo file swift chiamato RoundedView o come vuoi chiamarlo, quindi vai al tuo storyboard e cambia la classe in "RoundedView", "RoundedImageView" o "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
    }
}

Durante l'aggiunta layer.cornerRadiusnello storyboard assicurati di non avere spazi iniziali o finali. Se fai copia incolla, potresti ottenere degli spazi inseriti. Sarebbe bello se XCode dicesse una sorta di avviso o errore.

Prova questo!!

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

L'estensione è l'opzione migliore per questo problema. Crea un'estensione di View o Button

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

Chiamalo dal codice

button.roundCorners()

Sto usando Xcode versione 11.4

Nella finestra di ispezione degli attributi, puoi definire il raggio dell'angolo.

Non verrà visualizzato nello Storyboard ma funzionerà correttamente quando esegui il progetto.

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