Come posso fare in modo che un pulsante abbia un bordo arrotondato in Swift?

Sto costruendo un'app usando swift nell'ultima versione di Xcode 6 e vorrei sapere come posso modificare il mio pulsante in modo che possa avere un bordo arrotondato che potrei adattare da solo se necessario. Una volta fatto, come posso cambiare il colore del bordo stesso senza aggiungere uno sfondo ad esso? In altre parole, voglio un pulsante leggermente arrotondato senza sfondo, solo un bordo 1pt di un certo colore.

Utilizzare button.layer.cornerRadius, button.layer.borderColore button.layer.borderWidth. Nota che borderColorrichiede un CGColor, quindi potresti dire (Swift 3/4):

button.backgroundColor = .clear
button.layer.cornerRadius = 5
button.layer.borderWidth = 1
button.layer.borderColor = UIColor.black.cgColor

Per fare questo lavoro nello storyboard (Interface Builder Inspector)

Con l'aiuto di IBDesignable, possiamo aggiungere più opzioni a Interface Builder Inspector per UIButtone modificarle sullo storyboard. Innanzitutto, aggiungi il seguente codice al tuo progetto.

@IBDesignable extension UIButton {

    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }

    @IBInspectable var cornerRadius: CGFloat {
        set {
            layer.cornerRadius = newValue
        }
        get {
            return layer.cornerRadius
        }
    }

    @IBInspectable var borderColor: UIColor? {
        set {
            guard let uiColor = newValue else { return }
            layer.borderColor = uiColor.cgColor
        }
        get {
            guard let color = layer.borderColor else { return nil }
            return UIColor(cgColor: color)
        }
    }
}

Quindi imposta semplicemente gli attributi per i pulsanti sullo storyboard.

Ho creato una semplice sottoclasse di UIButton che usa il tintColorper i suoi colori di testo e bordo e quando evidenziato cambia il suo sfondo in tintColor.

class BorderedButton: UIButton {

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    layer.borderWidth = 1.0
    layer.borderColor = tintColor.CGColor
    layer.cornerRadius = 5.0
    clipsToBounds = true
    contentEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
    setTitleColor(tintColor, forState: .Normal)
    setTitleColor(UIColor.whiteColor(), forState: .Highlighted)
    setBackgroundImage(UIImage(color: tintColor), forState: .Highlighted)
}
}

Questo fa uso di un'estensione UIImage che crea un'immagine da un colore, ho trovato quel codice qui: https://stackoverflow.com/a/33675160

Funziona meglio quando impostato su Tipo personalizzato nel builder di interfaccia poiché il tipo di sistema predefinito modifica leggermente i colori quando il pulsante è evidenziato.

Questa classe si basa su tutti i commenti e suggerimenti nelle risposte e può anche essere configurabile direttamente da xcode. Copia nel tuo progetto e inserisci qualsiasi UIButton e modifica per utilizzare la classe personalizzata, ora seleziona solo il bordo o il colore di sfondo da xcode per gli stati normali e / o evidenziati.

//
//  RoundedButton.swift
//

import UIKit

@IBDesignable
class RoundedButton:UIButton {

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
    //Normal state bg and border
    @IBInspectable var normalBorderColor: UIColor? {
        didSet {
            layer.borderColor = normalBorderColor?.CGColor
        }
    }

    @IBInspectable var normalBackgroundColor: UIColor? {
        didSet {
            setBgColorForState(normalBackgroundColor, forState: .Normal)
        }
    }


    //Highlighted state bg and border
    @IBInspectable var highlightedBorderColor: UIColor?

    @IBInspectable var highlightedBackgroundColor: UIColor? {
        didSet {
            setBgColorForState(highlightedBackgroundColor, forState: .Highlighted)
        }
    }


    private func setBgColorForState(color: UIColor?, forState: UIControlState){
        if color != nil {
            setBackgroundImage(UIImage.imageWithColor(color!), forState: forState)

        } else {
            setBackgroundImage(nil, forState: forState)
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        layer.cornerRadius = layer.frame.height / 2
        clipsToBounds = true

        if borderWidth > 0 {
            if state == .Normal && !CGColorEqualToColor(layer.borderColor, normalBorderColor?.CGColor) {
                layer.borderColor = normalBorderColor?.CGColor
            } else if state == .Highlighted && highlightedBorderColor != nil{
                layer.borderColor = highlightedBorderColor!.CGColor
            }
        }
    }

}

//Extension Required by RoundedButton to create UIImage from UIColor
extension UIImage {
    class func imageWithColor(color: UIColor) -> UIImage {
        let rect: CGRect = CGRectMake(0, 0, 1, 1)
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(1, 1), false, 1.0)
        color.setFill()
        UIRectFill(rect)
        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

Basato sulla risposta di @returntrue, sono riuscito a implementarlo in Interface Builder.

Per ottenere il pulsante degli angoli arrotondati usando Interface Builder aggiungi una chiave Path = "layer.cornerRadius"con Type = "Number"e Value = "10"(o altro valore come richiesto) nella " User Defined RunTime Attribute" del Identity Inspectorpulsante.

È possibile utilizzare questa sottoclasse di UIButton per personalizzare UIButton secondo le proprie esigenze.

visitare questo repository github per riferimento

class RoundedRectButton: UIButton {

    var selectedState: Bool = false

    override func awakeFromNib() {
        super.awakeFromNib()
        layer.borderWidth = 2 / UIScreen.main.nativeScale
        layer.borderColor = UIColor.white.cgColor
        contentEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
    }


    override func layoutSubviews(){
        super.layoutSubviews()
        layer.cornerRadius = frame.height / 2
        backgroundColor = selectedState ? UIColor.white : UIColor.clear
        self.titleLabel?.textColor = selectedState ? UIColor.green : UIColor.white
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        selectedState = !selectedState
        self.layoutSubviews()
    }
}

Penso che il modo più semplice e pulito sia usare il protocollo per evitare l'ereditarietà e la ripetizione del codice. Puoi modificare queste proprietà direttamente dallo storyboard

protocol Traceable {
    var cornerRadius: CGFloat { get set }
    var borderColor: UIColor? { get set }
    var borderWidth: CGFloat { get set }
}

extension UIView: Traceable {

    @IBInspectable var cornerRadius: CGFloat {
        get { return layer.cornerRadius }
        set {
            layer.masksToBounds = true
            layer.cornerRadius = newValue
        }
    }

    @IBInspectable var borderColor: UIColor? {
        get {
            guard let cgColor = layer.borderColor else { return nil }
            return  UIColor(cgColor: cgColor)
        }
        set { layer.borderColor = newValue?.cgColor }
    }

    @IBInspectable var borderWidth: CGFloat {
        get { return layer.borderWidth }
        set { layer.borderWidth = newValue }
    }
}

Aggiornare

In questo collegamento è possibile trovare un esempio con l'utilità del protocollo tracciabile

   @IBOutlet weak var yourButton: UIButton! {
        didSet{
            yourButton.backgroundColor = .clear
            yourButton.layer.cornerRadius = 10
            yourButton.layer.borderWidth = 2
            yourButton.layer.borderColor = UIColor.white.cgColor
        }
    }

come suggerimento a parte assicurati che il tuo pulsante non sia una sottoclasse di alcuna classe personalizzata nella storyboard, in tal caso il tuo posto migliore per il codice dovrebbe essere nella classe personalizzata perché il codice di auto causa funziona solo fuori dalla classe personalizzata se il tuo pulsante è una sottoclasse di default Classe UIButton e presa di esso, spero che questo possa aiutare chiunque si chieda perché le radio d'angolo non si applicano al mio pulsante dal codice.

@IBOutlet weak var button: UIButton!

...

Penso che per il raggio basta questo parametro:

button.layer.cornerRadius = 5

PROVA QUESTO Bordo Bottone Con Angoli Arrotondati

anyButton.backgroundColor = .clear

anyButton.layer.cornerRadius = anyButton.frame.height / 2

anyButton.layer.borderWidth = 1

anyButton.layer.borderColor = UIColor.black.cgColor

import UIKit

@IBDesignable
class RoundedButton: UIButton {
    
    @IBInspectable var cornerRadius: CGFloat = 8
    @IBInspectable var borderColor: UIColor? = .lightGray
    
    override func draw(_ rect: CGRect) {
        layer.cornerRadius = cornerRadius
        layer.masksToBounds = true
        layer.borderWidth = 1
        layer.borderColor = borderColor?.cgColor
        
    }
    
    
}

È possibile eseguire la sottoclasse UIButtone aggiungere @IBInspectablevariabili in modo da poter configurare i parametri dei pulsanti personalizzati tramite StoryBoard "Attribute Inspector". Di seguito scrivo quel codice.

@IBDesignable
class BHButton: UIButton {

    /*
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
    }
    */

    @IBInspectable lazy var isRoundRectButton : Bool = false

    @IBInspectable public var cornerRadius : CGFloat = 0.0 {
        didSet{
            setUpView()
        }
    }

    @IBInspectable public var borderColor : UIColor = UIColor.clear {
        didSet {
            self.layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable public var borderWidth : CGFloat = 0.0 {
        didSet {
            self.layer.borderWidth = borderWidth
        }
    }

    //  MARK:   Awake From Nib

    override func awakeFromNib() {
        super.awakeFromNib()
        setUpView()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        setUpView()
    }

    func setUpView() {
        if isRoundRectButton {
            self.layer.cornerRadius = self.bounds.height/2;
            self.clipsToBounds = true
        }
        else{
            self.layer.cornerRadius = self.cornerRadius;
            self.clipsToBounds = true
        }
    }

}

Penso che questa sia la forma semplice

        Button1.layer.cornerRadius = 10(Half of the length and width)
        Button1.layer.borderWidth = 2