Comment dessiner une bordure autour d'un UILabel?

140

Y a-t-il un moyen pour UILabel de dessiner une bordure autour de lui? Ceci est utile pour moi pour déboguer le placement du texte et pour voir le placement et la taille réelle de l'étiquette.

Aubaine
la source

Réponses:

260

Vous pouvez définir la bordure de l'étiquette via sa propriété CALayer sous-jacente:

#import <QuartzCore/QuartzCore.h>

myLabel.layer.borderColor = [UIColor greenColor].CGColor
myLabel.layer.borderWidth = 3.0

Swift 5:

myLabel.layer.borderColor = UIColor.darkGray.cgColor
myLabel.layer.borderWidth = 3.0
Vladimir
la source
2
ils ne sont disponibles qu'à partir du SDK 3.0: (Si vous voulez juste une solution rapide à des fins de débogage, vous pouvez définir un arrière-plan coloré semi-transparent pour votre étiquette.
Vladimir
36
Si le compilateur se plaint, vous avez probablement oublié#import <QuartzCore/QuartzCore.h>
Stefan Arentz
1
@Vladimir Cette solution consiste à ajouter la bordure sur tous les côtés de l'étiquette. Pouvons-nous ajouter la bordure uniquement sur le côté droit de l'étiquette ???
chinthakad
1
@chinthakad, non. Je pense que vous aurez besoin d'une sous-classe d'étiquettes personnalisées avec un dessin personnalisé pour cela
Vladimir
3
Dans Swift, la première ligne se lirait comme suit:myLabel.layer.borderColor = UIColor.greenColor().CGColor
Roshambo
71

Voici certaines choses que vous pouvez faire avec UILabelses limites.

entrez la description de l'image ici

Voici le code de ces étiquettes:

import UIKit
class ViewController: UIViewController {

    @IBOutlet weak var label1: UILabel!
    @IBOutlet weak var label2: UILabel!
    @IBOutlet weak var label3: UILabel!
    @IBOutlet weak var label4: UILabel!
    @IBOutlet weak var label5: UILabel!
    @IBOutlet weak var label6: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

        // label 1
        label1.layer.borderWidth = 1.0

        // label 2
        label2.layer.borderWidth = 5.0
        label2.layer.borderColor = UIColor.blue.cgColor

        // label 3
        label3.layer.borderWidth = 2.0
        label3.layer.cornerRadius = 8

        // label 4
        label4.backgroundColor = UIColor.cyan

        // label 5
        label5.backgroundColor = UIColor.red
        label5.layer.cornerRadius = 8
        label5.layer.masksToBounds = true

        // label 6
        label6.layer.borderWidth = 2.0
        label6.layer.cornerRadius = 8
        label6.backgroundColor = UIColor.yellow
        label6.layer.masksToBounds = true
    }
}

Notez que dans Swift, il n'est pas nécessaire d'importer QuartzCore.

Voir également

Suragch
la source
1
Comment avez-vous pu obtenir ces rembourrages? Mon texte touche les frontières ...
eestein
1
@eestein, je pense que je viens de faire glisser la taille de l'étiquette plus grande dans Interface Builder. Ou je pourrais avoir mis des contraintes de taille sur eux.
Suragch
19

Version Swift:

myLabel.layer.borderWidth = 0.5
myLabel.layer.borderColor = UIColor.greenColor().CGColor

Pour Swift 3:

myLabel.layer.borderWidth = 0.5
myLabel.layer.borderColor = UIColor.green.cgColor
Esqarrouth
la source
1
ce seramyLabel.layer.borderColor = UIColor.blackColor().CGColor!
Shruti
7

Swift 3/4 avec @IBDesignable


Bien que presque toutes les solutions ci-dessus fonctionnent bien, je suggérerais une @IBDesignableclasse personnalisée pour cela.

@IBDesignable
class CustomLabel: UILabel {

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

    @IBInspectable var borderColor: UIColor = UIColor.white {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }

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

    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }
}
Vakas
la source
2

Vous pouvez utiliser ce dépôt : GSBorderLabel

C'est assez simple:

GSBorderLabel *myLabel = [[GSBorderLabel alloc] initWithTextColor:aColor
                                                     andBorderColor:anotherColor
                                                     andBorderWidth:2];
JAA
la source
Cela concerne la bordure autour des caractères réels du texte, la question parle des bordures autour du rectangle dans
lequel
1

Propriétés UILabel borderColor, borderWidth, cornerRadius dans Swift 4

@IBOutlet weak var anyLabel: UILabel!
   override func viewDidLoad() {
        super.viewDidLoad()
        anyLabel.layer.borderColor = UIColor.black.cgColor
        anyLabel.layer.borderWidth = 2
        anyLabel.layer.cornerRadius = 5
        anyLabel.layer.masksToBounds = true
}
Sanjay Mali
la source
1

Solution pour Swift 4:

yourLabel.layer.borderColor = UIColor.green.cgColor

Sortie
la source
0

cela dépend vraiment du nombre de pensionnaires utilisés dans votre vue, parfois, ajoutez simplement un UIVIEW dont la taille est un peu plus grande pour créer la bordure. la méthode est plus rapide que de produire une vue

chings228
la source
0

L'utilisation d'une chaîne NSAttributedString pour vos étiquettes attribuéesText est probablement votre meilleur choix. Regardez cet exemple.

Bueno
la source