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

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

D'abord, ajoutez le 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 comme le rayon des coins, maskToBounds etc...

Egalement, un bon article sur le plaisir des boutons :

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

Answer 2

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

et ensuite faire ceci

[[button layer] setCornerRadius:8.0f];

[[button layer] setMasksToBounds:YES];

[[button layer] setBorderWidth:1.0f];

vous pouvez modifier les valeurs flottantes selon vos besoins.

profiter.

---

Voici un exemple typique de code moderne ...

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 :

• Il n'est pas nécessaire d'ajouter "QuartzCore".

Fais-le :

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

Answer 3

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

Il suffit d'utiliser :

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

Answer 4

Le problème de la mise en place de la couche borderWidth et borderColor est que lorsque vous touchez 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 votre Images.xcassets comme ceci :

Ensuite, vous la définissez comme l'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 lorsqu'on le touchera.

Answer 5

Voici une version mise à jour ( Swift 3.0.1 ) de Ben Packard respuesta .

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é à l'intérieur de votre StoryBoard grâce à la fonction @IBDesignable et @IBInspectable tags.

Les deux propriétés définies vous permettent également de définir la largeur et la couleur de la bordure directement sur le constructeur 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 d'évanouissement de l'éclairage.