¿Cómo dibujar un borde alrededor de un UILabel?


140

¿Hay alguna manera de que UILabel dibuje un borde a su alrededor? Esto es útil para mí para depurar la ubicación del texto y para ver la ubicación y qué tan grande es realmente la etiqueta.

Respuestas:


260

Puede establecer el borde de la etiqueta a través de su propiedad CALayer subyacente:

#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
están disponibles solo a partir del SDK 3.0 :( Si desea una solución rápida para la depuración, puede establecer un fondo de color semitransparente para su etiqueta.
Vladimir

36
Si el compilador se queja, entonces probablemente se te olvidó#import <QuartzCore/QuartzCore.h>
Stefan Arentz

1
@Vladimir Esta solución está agregando el borde a todos los lados de la etiqueta. ¿Podemos agregar el borde solo al lado derecho de la etiqueta?
chinthakad

1
@chinthakad, no. Creo que necesitarás una subclase de etiquetas personalizadas con un dibujo personalizado para eso
Vladimir el

3
En Swift, la primera línea decía:myLabel.layer.borderColor = UIColor.greenColor().CGColor
Roshambo

71

Aquí hay algunas cosas que puede hacer con UILabelsus fronteras.

ingrese la descripción de la imagen aquí

Aquí está el código para esas etiquetas:

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

Tenga en cuenta que en Swift no hay necesidad de importar QuartzCore.

Ver también


1
¿Cómo pudiste conseguir esos rellenos? Mi texto toca las fronteras ...
eestein

1
@eestein, creo que acabo de arrastrar el tamaño de la etiqueta más grande en el Creador de interfaces. O podría haber establecido restricciones de tamaño en ellos.
Suragch

19

Versión rápida:

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

Para Swift 3:

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

1
serámyLabel.layer.borderColor = UIColor.blackColor().CGColor!
Shruti

7

Swift 3/4 con @IBDesignable


Si bien casi todas las soluciones anteriores funcionan bien, sugeriría una @IBDesignableclase personalizada para esto.

@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

Puedes usar este repositorio: GSBorderLabel

Es bastante simple:

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

Esto se refiere a la frontera alrededor de los personajes reales en el texto, la cuestión está hablando de bordes alrededor del rectángulo, el texto está contenido en.
jjxtra

1

Propiedades de UILabel borderColor, borderWidth, cornerRadius en 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

Solución para Swift 4:

yourLabel.layer.borderColor = UIColor.green.cgColor


0

realmente depende de cuántos usuarios usen en su vista, a veces, simplemente agregue un UIVIEW cuyo tamaño es un poco más grande para crear el borde. el método es más rápido que producir una vista


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.