Comment créer une bordure dans UIButton?

J'utilise le bouton personnalisé dans mon application nommé "addButton" et je souhaite le bordé de couleur blanche. Comment puis-je obtenir la bordure de couleur blanche autour de mon bouton personnalisé?

Vous pouvez définir les propriétés de bordure sur le CALayer en accédant à la propriété layer du bouton.

Tout d'abord, ajoutez Quartz

#import <QuartzCore/QuartzCore.h>

Définir les propriétés:

myButton.layer.borderWidth = 2.0f;
myButton.layer.borderColor = [UIColor greenColor].CGColor;

Voir:

https://developer.apple.com/documentation/quartzcore/calayer#//apple_ref/occ/cl/CALayer

Le CALayer dans le lien ci-dessus vous permet de définir d'autres propriétés telles que le rayon de coin, maskToBounds, etc.

Aussi, un bon article sur le plaisir des boutons:

https://web.archive.org/web/20161221132308/http://www.apptite.be/tutorial_custom_uibuttons.php

C'est très simple, ajoutez simplement l'en-tête quartzCore dans votre fichier (pour cela, vous devez ajouter le framework quartz à votre projet)

et puis fais ça

[[button layer] setCornerRadius:8.0f];

[[button layer] setMasksToBounds:YES];

[[button layer] setBorderWidth:1.0f];

vous pouvez modifier les valeurs flottantes selon vos besoins.

prendre plaisir.

Voici un code moderne typique ...

self.buttonTag.layer.borderWidth = 1.0f;
self.buttonCancel.layer.borderWidth = 1.0f;

self.buttonTag.layer.borderColor = [UIColor blueColor].CGColor;
self.buttonCancel.layer.borderColor = [UIColor blueColor].CGColor;

self.buttonTag.layer.cornerRadius = 4.0f;
self.buttonCancel.layer.cornerRadius = 4.0f;

c'est un aspect similaire aux contrôles segmentés.

MISE À JOUR pour Swift:

• Pas besoin d'ajouter "QuartzCore"

Faites simplement:

button.layer.cornerRadius = 8.0
button.layer.borderWidth = 1.0
button.layer.borderColor = UIColor.black.cgColor

Et rapidement, vous n'avez pas besoin d'importer "QuartzCore / QuartzCore.h"

Utilisez simplement:

button.layer.borderWidth = 0.8
button.layer.borderColor = (UIColor( red: 0.5, green: 0.5, blue:0, alpha: 1.0 )).cgColor

ou

button.layer.borderWidth = 0.8
button.layer.borderColor = UIColor.grayColor().cgColor

Le problème en définissant les calques borderWidthet borderColorest que lorsque vous appuyez sur le bouton, la bordure n'anime pas l'effet de surbrillance.

Bien sûr, vous pouvez observer les événements du bouton et modifier la couleur de la bordure en conséquence, mais cela semble inutile.

Une autre option consiste à créer une UIImage extensible et à la définir comme image d'arrière-plan du bouton. Vous pouvez créer un ensemble d'images dans vos images.xcassets comme ceci:

Ensuite, vous le définissez comme image d'arrière-plan du bouton:

Si votre image est une image modèle, vous pouvez définir la couleur de teinte du bouton et la bordure changera:

Maintenant, la bordure sera mise en évidence avec le reste du bouton lorsque vous la touchez.

Pour changer le rayon, la couleur et la largeur du bouton, je définis comme ceci:

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;

Voici une version mise à jour ( Swift 3.0.1 ) de la réponse de Ben Packard .

import UIKit

@IBDesignable class BorderedButton: UIButton {

    @IBInspectable var borderColor: UIColor? {
        didSet {
            if let bColor = borderColor {
                self.layer.borderColor = bColor.cgColor
            }
        }
    }

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

    override var isHighlighted: Bool {
        didSet {
            guard let currentBorderColor = borderColor else {
                return
            }

            let fadedColor = currentBorderColor.withAlphaComponent(0.2).cgColor

            if isHighlighted {
                layer.borderColor = fadedColor
            } else {

                self.layer.borderColor = currentBorderColor.cgColor

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

Le bouton résultant peut être utilisé dans votre StoryBoard grâce aux balises @IBDesignableet @IBInspectable.

Les deux propriétés définies vous permettent également de définir la largeur et la couleur de la bordure directement sur le générateur d'interface et de prévisualiser le résultat.

D'autres propriétés pourraient être ajoutées de la même manière, pour le rayon de la bordure et le temps de décoloration de la mise en évidence.

Vous n'avez pas besoin d'importer QuartzCore.hmaintenant. Prise d'iOS 8 sdk et Xcode 6.1 en référence.

Utilisez directement:

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

Voici un UIButton sous-classe qui prend en charge l'animation d'état en surbrillance sans utiliser d'images. Il 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 highlighted: Bool {
        didSet {
            let fadedColor = tintColor.colorWithAlphaComponent(0.2).CGColor

            if highlighted {
                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.addAnimation(animation, forKey: "")
            }
        }
    }
}

Usage:

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

Apparence:

Cela peut être réalisé de différentes manières dans Swift 3.0.Travaillé sur la dernière version août - 2017

Option 1:

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

  btnUserButtonName.layer.borderWidth = 1.0

Définir 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 propriété de bordure pour le bouton d'interface utilisateur:

btnUserButtonName.layer.borderColor = UIColor.red

Définissez la couleur définie par l'utilisateur pour les valeurs de propriété de bordure du bouton d'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ée]

Utilisez la méthode Extension, de sorte que le Button tout au long de l'application aura l'air cohérent et qu'il n'est 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 du bouton de méthode d'extension:

Mettre à jour avec Swift 3

    button.layer.borderWidth = 0.8
    button.layer.borderColor = UIColor.blue.cgColor

**** Dans Swift 3 ****

Pour créer une bordure

 btnName.layer.borderWidth = 1
 btnName.layer.borderColor = UIColor.black.cgColor

Pour arrondir le coin

 btnName.layer.cornerRadius = 5

Swift 5

button.layer.borderWidth = 2

Pour changer la couleur de la bordure, utilisez

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