Comment créer une bordure dans UIButton ?

Question

J'utilise un bouton personnalisé dans mon application nommé "addButton" et je veux l'entourer d'une bordure blanche. Comment puis-je obtenir une bordure blanche autour de mon bouton personnalisé ?

Answer 1

Pour modifier le rayon, la couleur et la largeur des boutons, je procède comme suit :

self.myBtn.layer.cornerRadius = 10;
self.myBtn.layer.borderWidth = 1;
self.myBtn.layer.borderColor =[UIColor colorWithRed:189.0/255.0f green:189.0/255.0f blue:189.0/255.0f alpha:1.0].CGColor;

Answer 2

Ceci peut être réalisé par différentes méthodes dans Swift 3.0. Travaillé sur la dernière version août - 2017.

Option 1 :

Attribuez directement les valeurs de la propriété borderWidth pour le bouton de l'interface utilisateur :

  btnUserButtonName.layer.borderWidth = 1.0

Définissez le titre avec les valeurs de couleur par défaut pour le bouton de l'interface utilisateur :

btnUserButtonName.setTitleColor(UIColor.darkGray, for: .normal)

Définissez la bordure avec la couleur par défaut pour les valeurs de la propriété de la bordure pour le bouton de l'interface utilisateur :

btnUserButtonName.layer.borderColor = UIColor.red

Définit la couleur définie par l'utilisateur pour les valeurs de la propriété de la bordure du bouton de l'interface utilisateur :

   let myGrayColor = UIColor(red: 0.889415, green: 0.889436, blue:0.889424, alpha: 1.0 )
   btnUserButtonName.layer.borderColor = myGrayColor.cgColor

Option 2 : [Recommandé]

Utilisez la méthode d'extension, afin que le bouton soit cohérent dans toute l'application et qu'il ne soit pas nécessaire de répéter plusieurs lignes de code partout.

//Create an extension class in any of the swift file

extension UIButton {
func setBordersSettings() {
        let c1GreenColor = (UIColor(red: -0.108958, green: 0.714926, blue: 0.758113, alpha: 1.0))
        self.layer.borderWidth = 1.0
        self.layer.cornerRadius = 5.0
        self.layer.borderColor = c1GreenColor.cgColor
        self.setTitleColor(c1GreenColor, for: .normal)
        self.layer.masksToBounds = true
    }
}

Utilisation dans le code :

//use the method and call whever the border has to be applied

btnUserButtonName.setBordersSettings()

Sortie de la méthode d'extension Bouton :

Answer 3

Vous n'avez pas besoin d'importer QuartzCore.h maintenant. Je prends le sdk iOS 8 et Xcode 6.1 en référence.

A utiliser directement :

[[myButton layer] setBorderWidth:2.0f];
[[myButton layer] setBorderColor:[UIColor greenColor].CGColor];

Answer 4

Voici un UIButton qui prend en charge l'animation de l'état en surbrillance sans utiliser d'images. Elle met également à jour la couleur de la bordure lorsque le mode de teinte de la vue change.

class BorderedButton: UIButton {
    override init(frame: CGRect) {
        super.init(frame: frame)

        layer.borderColor = tintColor.cgColor
        layer.borderWidth = 1
        layer.cornerRadius = 5

        contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("NSCoding not supported")
    }

    override func tintColorDidChange() {
        super.tintColorDidChange()

        layer.borderColor = tintColor.cgColor
    }

    override var isHighlighted: Bool {
        didSet {
            let fadedColor = tintColor.withAlphaComponent(0.2).cgColor

            if isHighlighted {
                layer.borderColor = fadedColor
            } else {
                layer.borderColor = tintColor.cgColor

                let animation = CABasicAnimation(keyPath: "borderColor")
                animation.fromValue = fadedColor
                animation.toValue = tintColor.cgColor
                animation.duration = 0.4
                layer.add(animation, forKey: nil)
            }
        }
    }
}

Uso:

let button = BorderedButton(style: .System) //style .System is important

Apparence :

Answer 5

Swift 5

button.layer.borderWidth = 2

Pour modifier la couleur de la bordure, utilisez

button.layer.borderColor = CGColor(srgbRed: 255/255, green: 126/255, blue: 121/255, alpha: 1)