¿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.

Bendición
fuente

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
Vladimir
fuente
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

Suragch
fuente
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
Esqarrouth
fuente
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
        }
    }
}
Vakas
fuente
2

Puedes usar este repositorio: GSBorderLabel

Es bastante simple:

GSBorderLabel *myLabel = [[GSBorderLabel alloc] initWithTextColor:aColor
                                                     andBorderColor:anotherColor
                                                     andBorderWidth:2];
JAA
fuente
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
}
Sanjay Mali
fuente
1

Solución para Swift 4:

yourLabel.layer.borderColor = UIColor.green.cgColor

Exitare
fuente
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

chings228
fuente
0

El uso de una cadena NSAttributedString para sus etiquetas atribuidas El texto es probablemente su mejor opción. Mira este ejemplo.

Bueno
fuente