Come si disegna un bordo attorno a UILabel?


140

Esiste un modo per UILabel di disegnare un bordo attorno a se stesso? Questo è utile per me per eseguire il debug del posizionamento del testo e per vedere il posizionamento e la dimensione effettiva dell'etichetta.

Risposte:


260

È possibile impostare il bordo dell'etichetta tramite la proprietà CALayer sottostante:

#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

2
sono disponibili solo a partire dall'SDK 3.0 :( Se si desidera solo una soluzione rapida per scopi di debug, è possibile impostare uno sfondo colorato semitrasparente per la propria etichetta.
Vladimir

36
Se il compilatore si lamenta, probabilmente ti sei dimenticato di#import <QuartzCore/QuartzCore.h>
Stefan Arentz,

1
@Vladimir Questa soluzione aggiunge il bordo a tutti i lati dell'etichetta. Possiamo aggiungere al bordo solo il lato destro dell'etichetta ???
Chinthakad,

1
@chinthakad, no. Penso che avrai bisogno di una sottoclasse di etichette personalizzate con un disegno personalizzato per questo
Vladimir

3
In Swift la prima riga recitava:myLabel.layer.borderColor = UIColor.greenColor().CGColor
Roshambo,

71

Ecco alcune cose che puoi fare con i UILabelsuoi confini.

inserisci qui la descrizione dell'immagine

Ecco il codice per quelle etichette:

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

Nota che in Swift non è necessario importare QuartzCore.

Guarda anche


1
Come hai potuto ottenere quei padding? Il mio testo sta toccando i confini ...
est

1
@Eestein, penso di aver appena trascinato la dimensione dell'etichetta più grande in Interface Builder. Oppure avrei potuto impostare vincoli di dimensione su di essi.
Suragch,

19

Versione rapida:

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

Per Swift 3:

myLabel.layer.borderWidth = 0.5
myLabel.layer.borderColor = UIColor.green.cgColor

1
saràmyLabel.layer.borderColor = UIColor.blackColor().CGColor!
Shruti il

7

Swift 3/4 con @IBDesignable


Mentre quasi tutte le soluzioni sopra funzionano bene, ma suggerirei una @IBDesignableclasse personalizzata per questo.

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

2

È possibile utilizzare questo repository: GSBorderLabel

È abbastanza semplice:

GSBorderLabel *myLabel = [[GSBorderLabel alloc] initWithTextColor:aColor
                                                     andBorderColor:anotherColor
                                                     andBorderWidth:2];

Si tratta del bordo attorno ai caratteri effettivi nel testo, la domanda riguarda i bordi attorno al rettangolo in cui è contenuto il testo.
jjxtra

1

Proprietà UILabel borderColor, borderWidth, cornerRadius in 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
}

1

Soluzione per Swift 4:

yourLabel.layer.borderColor = UIColor.green.cgColor


0

dipende davvero da quanti boarder usano nella tua vista, a volte, basta aggiungere una UIVIEW la cui dimensione è un po 'più grande per creare il bordo. il metodo è più veloce di produrre una vista


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.