Comment puis-je faire en sorte qu'un bouton ait une bordure arrondie dans Swift?

Je crée une application à l'aide de swift dans la dernière version de Xcode 6, et j'aimerais savoir comment je peux modifier mon bouton afin qu'il puisse avoir une bordure arrondie que je pourrais ajuster moi-même si nécessaire. Une fois cela fait, comment puis-je changer la couleur de la bordure elle-même sans y ajouter d'arrière-plan? En d'autres termes, je veux un bouton légèrement arrondi sans arrière-plan, seulement une bordure de 1 pt d'une certaine couleur.

Utilisez button.layer.cornerRadius, button.layer.borderColoret button.layer.borderWidth. Notez que borderColornécessite un CGColor, vous pouvez donc dire (Swift 3/4):

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

Pour faire ce travail dans le storyboard (Interface Builder Inspector)

Avec l'aide de IBDesignable, nous pouvons ajouter plus d'options à Interface Builder Inspector UIButtonet les modifier sur le storyboard. Tout d'abord, ajoutez le code suivant à votre projet.

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

Ensuite, définissez simplement les attributs des boutons sur le storyboard.

J'ai créé une sous-classe UIButton simple qui utilise le tintColorpour ses couleurs de texte et de bordure et lorsqu'elle est mise en surbrillance, change son arrière-plan en 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)
}
}

Cela utilise une extension UIImage qui crée une image à partir d'une couleur, j'ai trouvé ce code ici: https://stackoverflow.com/a/33675160

Il fonctionne mieux lorsqu'il est défini sur le type Personnalisé dans le générateur d'interface, car le type de système par défaut modifie légèrement les couleurs lorsque le bouton est mis en surbrillance.

Cette classe est basée sur tous les commentaires et suggestions dans les réponses, et peut également être conçue directement à partir de xcode. Copiez dans votre projet et insérez n'importe quel bouton UIB et modifiez pour utiliser une classe personnalisée, il vous suffit maintenant de sélectionner la couleur de la bordure ou de l'arrière-plan de xcode pour les états normaux et / ou en surbrillance.

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

Sur la base de la réponse @returntrue, j'ai réussi à l'implémenter dans Interface Builder.

Pour obtenir le bouton des coins arrondis à l'aide d'Interface Builder, ajoutez une clé Path = "layer.cornerRadius"avec Type = "Number"et Value = "10"(ou toute autre valeur requise) dans le " User Defined RunTime Attribute" du Identity Inspectorbouton.

Vous pouvez utiliser cette sous-classe d'UIButton pour personnaliser UIButton selon vos besoins.

visitez ce repo github pour référence

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

Je pense que la manière la plus simple et la plus propre est d'utiliser le protocole pour éviter l'héritage et la répétition du code. Vous pouvez modifier ces propriétés directement à partir du 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 }
    }
}

Mettre à jour

Dans ce lien, vous pouvez trouver un exemple avec l'utilité du protocole Traceable

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

comme astuce de côté, assurez-vous que votre bouton n'est pas une sous-classe d'une classe personnalisée dans le story-board, dans un tel cas, votre meilleur emplacement de code devrait être dans une classe personnalisée, le code à lui seul ne fonctionne que hors de la classe personnalisée si votre bouton est une sous-classe par défaut Classe UIButton et sortie de celui-ci, j'espère que cela peut aider quelqu'un à se demander pourquoi les radios d'angle ne s'appliquent pas à mon bouton à partir du code.

@IBOutlet weak var button: UIButton!

...

Je pense que pour le rayon juste assez ce paramètre:

button.layer.cornerRadius = 5

ESSAYEZ CECI Bordure de bouton avec coins arrondis

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

Vous pouvez sous UIButton- classer et y ajouter des @IBInspectablevariables afin de pouvoir configurer les paramètres des boutons personnalisés via le StoryBoard "Attribute Inspector". Ci-dessous, j'écris ce code.

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

}

Je pense que c'est la forme simple

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