¿Cómo creo una UILabel con esquinas redondeadas en el iPhone?

Question

¿Existe una forma integrada de crear UILabels con esquinas redondeadas?Si la respuesta es no, ¿cómo se podría crear un objeto así?

Answer 1

iOS 3.0 y posterior

iPhone OS 3.0 y posteriores son compatibles con cornerRadius propiedad en el CALayer clase.Cada vista tiene un CALayer instancia que puedes manipular.Esto significa que puedes obtener esquinas redondeadas en una línea:

view.layer.cornerRadius = 8;

Necesitaras #import <QuartzCore/QuartzCore.h> y enlace al marco QuartzCore para obtener acceso a los encabezados y propiedades de CALayer.

Antes de iOS 3.0

Una forma de hacerlo, que usé recientemente, es crear una subclase UIView que simplemente dibuja un rectángulo redondeado y luego crea UILabel o, en mi caso, UITextView, una subvista dentro de él.Específicamente:

1. Crear un UIView subclase y asígnele un nombre como RoundRectView.
2. En RoundRectView's drawRect: método, dibuje una ruta alrededor de los límites de la vista usando llamadas de Core Graphics como CGContextAddLineToPoint() para los bordes y CGContextAddArcToPoint() para las esquinas redondeadas.
3. Crear un UILabel instancia y conviértala en una subvista de RoundRectView.
4. Establezca el marco de la etiqueta para que esté unos pocos píxeles insertados en los límites de RoundRectView.(Por ejemplo, label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

Puede colocar RoundRectView en una vista usando Interface Builder si crea una UIView genérica y luego cambia su clase usando el inspector.No verá el rectángulo hasta que compile y ejecute su aplicación, pero al menos podrá colocar la subvista y conectarla a salidas o acciones si es necesario.

Answer 2

Para los dispositivos con iOS 7.1 o posterior, es necesario agregar:

yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;

Answer 3

Para Swift IOS8 en adelante sobre la base de la respuesta OScarsWyck:

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0

Answer 4

1. que usted tiene una llamada UILabel:. myLabel
2. en su "m" o "h" de importación de archivos: #import <QuartzCore/QuartzCore.h>

3. en su viewDidLoad escribir esta línea: self.myLabel.layer.cornerRadius = 8;

   • depende de cómo se desea se puede cambiar el valor CornerRadius del 8 al otro número:)

Buena suerte

Answer 5

Puede hacer que redondeó la frontera con el ancho del borde de cualquier control de esta manera: -

CALayer * l1 = [lblName layer];
[l1 setMasksToBounds:YES];
[l1 setCornerRadius:5.0];

// You can even add a border
[l1 setBorderWidth:5.0];
[l1 setBorderColor:[[UIColor darkGrayColor] CGColor]];

Basta con sustituir lblName con su UILabel.

Nota: - No se olvide de importar <QuartzCore/QuartzCore.h>

Answer 6

Otro método consiste en colocar un png detrás del UILabel. Tengo puntos de vista con varias etiquetas que cubren una sola png fondo que tiene toda la obra de arte para las etiquetas individuales.

Answer 7

xCode 7.3.1 iOS 9.3.2

 _siteLabel.layer.masksToBounds = true;
  _siteLabel.layer.cornerRadius = 8;

Answer 8

Hice una subclase rápida UILabel para lograr este efecto. Además puedo configurar automáticamente el color del texto a negro o blanco para el contraste máximo.

Resultados

Se utiliza SO-Mensajes:

• Cómo dibujar un borde alrededor de UILabel?
• Añadir una frontera exterior de un UIView
• Compruebe si UIColor es oscuro o claro?

Zona de juegos

Sólo pega esto en un patio de juegos para iOS:

//: Playground - noun: a place where people can play

import UIKit

class PillLabel : UILabel{

    @IBInspectable var color = UIColor.lightGrayColor()
    @IBInspectable var cornerRadius: CGFloat = 8
    @IBInspectable var labelText: String = "None"
    @IBInspectable var fontSize: CGFloat = 10.5

    // This has to be balanced with the number of spaces prefixed to the text
    let borderWidth: CGFloat = 3

    init(text: String, color: UIColor = UIColor.lightGrayColor()) {
        super.init(frame: CGRectMake(0, 0, 1, 1))
        labelText = text
        self.color = color
        setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    func setup(){
        // This has to be balanced with the borderWidth property
        text = "  \(labelText)".uppercaseString

        // Credits to https://stackoverflow.com/a/33015915/784318
        layer.borderWidth = borderWidth
        layer.cornerRadius = cornerRadius
        backgroundColor = color
        layer.borderColor = color.CGColor
        layer.masksToBounds = true
        font = UIFont.boldSystemFontOfSize(fontSize)
        textColor = color.contrastColor
        sizeToFit()

        // Credits to https://stackoverflow.com/a/15184257/784318
        frame = CGRectInset(self.frame, -borderWidth, -borderWidth)
    }
}


extension UIColor {
    // Credits to https://stackoverflow.com/a/29044899/784318
    func isLight() -> Bool{
        var green: CGFloat = 0.0, red: CGFloat = 0.0, blue: CGFloat = 0.0, alpha: CGFloat = 0.0
        self.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        let brightness = ((red * 299) + (green * 587) + (blue * 114) ) / 1000

        return brightness < 0.5 ? false : true
    }

    var contrastColor: UIColor{
        return self.isLight() ? UIColor.blackColor() : UIColor.whiteColor()
    }
}

var label = PillLabel(text: "yellow", color: .yellowColor())

label = PillLabel(text: "green", color: .greenColor())

label = PillLabel(text: "white", color: .whiteColor())

label = PillLabel(text: "black", color: .blackColor())

Answer 9

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    label.text = @"Your String.";
    label.layer.cornerRadius = 8.0;
    [self.view addSubview:label];

Answer 10

Si desea esquina redondeada de la interfaz de usuario como objetos (UILabel, UIView, UIButton, UIImageView) por el guión gráfico a continuación, establezca clip to bounds verdadera y establecer User Defined Runtime Attributes ruta clave como layer.cornerRadius, tipo = Número y valor = 9 (como su requisito)

Answer 11

En MonoTouch / Xamarin.iOS He resuelto el mismo problema como este:

UILabel exampleLabel = new UILabel(new CGRect(0, 0, 100, 50))
        {
            Text = "Hello Monotouch red label"
        };
        exampleLabel.Layer.MasksToBounds = true;
        exampleLabel.Layer.CornerRadius = 8;
        exampleLabel.Layer.BorderColor = UIColor.Red.CGColor;
        exampleLabel.Layer.BorderWidth = 2;

Answer 12

Funciona perfecto en Swift 2.0

    @IBOutlet var theImage: UIImageView! //you can replace this with any UIObject eg: label etc


    override func viewDidLoad() {
        super.viewDidLoad()
//Make sure the width and height are same
        self.theImage.layer.cornerRadius = self.theImage.frame.size.width / 2
        self.theImage.layer.borderWidth = 2.0
        self.theImage.layer.borderColor = UIColor.whiteColor().CGColor
        self.theImage.clipsToBounds = true

    }

Answer 13

¿Usted intentó utilizar el UIButton del constructor de interfaz (que tiene las esquinas redondeadas) y experimentar con los ajustes para que se vea como una etiqueta. Si lo que quieres es para mostrar texto estático dentro.

Answer 14

Swift 3

Si quieres etiqueta redondeada con color de fondo, además de la mayoría de las otras respuestas, es necesario establecer layer 's color de fondo también. No funciona al establecer view color de fondo.

label.layer.cornerRadius = 8
label.layer.masksToBounds = true
label.layer.backgroundColor = UIColor.lightGray.cgColor

Si está utilizando el diseño de automóviles, quieren algo de relleno alrededor de la etiqueta y no quieren para establecer el tamaño de la etiqueta manualmente, puede crear UILabel subclase y anular intrinsincContentSize propiedad:

class LabelWithPadding: UILabel {
    override var intrinsicContentSize: CGSize {
        let defaultSize = super.intrinsicContentSize
        return CGSize(width: defaultSize.width + 12, height: defaultSize.height + 8)
    }
}

Para combinar los dos también tendrá que establecer label.textAlignment = center, de lo contrario el texto se alinea a la izquierda.

Answer 15

  

funciona bien en Xcode 8.1.2 con Swift 3, probado durante agosto 2017

"CornerRadius" es la propiedad clave para fijar los bordes redondeados, donde si se está utilizando el mismo estilo para todas las etiquetas en su aplicación, lo recomendaría para un método de extensión.

Código:

 // extension Class
extension UILabel {

    // extension user defined Method
    func setRoundEdge() {
        let myGreenColor = (UIColor(red: -0.108958, green: 0.714926, blue: 0.758113, alpha: 1.0))
        //Width of border
        self.layer.borderWidth = 1.0
        //How much the edge to be rounded
        self.layer.cornerRadius = 5.0

        // following properties are optional
        //color for border
        self.layer.borderColor = myGreenColor.cgColor
        //color for text
        self.textColor = UIColor.red
        // Mask the bound
        self.layer.masksToBounds = true
        //clip the pixel contents
        self.clipsToBounds = true
    }
}

Salida:

¿Por qué método de extensión?

Crear un archivo Swift y agregue el código siguiente, que tiene el método de Extensión a la clase "UILabel", donde este método es definido por el usuario, pero funcionará para todo el sello en su solicitud y le ayudará a mantener la coherencia y código limpio , si cambia cualquier estilo en el futuro requerirá sólo en el método de extensión.

Answer 16

En función de qué es exactamente lo que está haciendo usted podría hacer una imagen y establecerla como fondo de la programación.