¿Cómo creo un UILabel acorralado redondo en el iPhone?

votos
139

¿Existe una forma integrada de crear UILabels con esquinas redondeadas? Si la respuesta es no, ¿cómo se puede crear uno de estos objetos?

Publicado el 04/02/2009 a las 08:19
fuente por usuario
En otros idiomas...                            


16 respuestas

votos
223

iOS 3.0 y posterior

iPhone OS 3.0 y versiones posteriores son compatibles con la cornerRadiuspropiedad de la CALayerclase. Cada vista tiene una CALayerinstancia que puedes manipular. Esto significa que puede obtener esquinas redondeadas en una línea:

view.layer.cornerRadius = 8;

Necesitará #import <QuartzCore/QuartzCore.h>y se vinculará con el marco QuartzCore para obtener acceso a los encabezados y propiedades de CALayer.

Antes de iOS 3.0

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

  1. Cree una UIViewsubclase y asígnele un nombre parecido RoundRectView.
  2. En RoundRectViewel drawRect:método de, dibuja un camino alrededor de los límites de la vista usando llamadas de gráficos centrales como CGContextAddLineToPoint () para los bordes y CGContextAddArcToPoint () para las esquinas redondeadas.
  3. Cree una UILabelinstancia y conviértala en una subvista de RoundRectView.
  4. Establezca el marco de la etiqueta como unos pocos píxeles en los límites de RoundRectView. (Por ejemplo, label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

Puede colocar el RoundRectView en una vista usando Interface Builder si crea un UIView genérico 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 las salidas o acciones si es necesario.

Respondida el 04/02/2009 a las 10:22
fuente por usuario

votos
130

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

yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Respondida el 04/04/2014 a las 08:54
fuente por usuario

votos
17

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

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
Respondida el 17/08/2015 a las 16:08
fuente por usuario

votos
11

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 lblNamecon su UILabel.

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

Respondida el 13/02/2014 a las 09:09
fuente por usuario

votos
11
  1. usted tiene una UILabelllama: myLabel.
  2. en su "m" o "h" de importación de archivos: #import <QuartzCore/QuartzCore.h>
  3. en su viewDidLoadescritura 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

Respondida el 04/12/2012 a las 11:08
fuente por usuario

votos
6

xCode 7.3.1 iOS 9.3.2

 _siteLabel.layer.masksToBounds = true;
  _siteLabel.layer.cornerRadius = 8;
Respondida el 21/07/2016 a las 08:22
fuente por usuario

votos
6

Otro método es colocar un png detrás de UILabel. Tengo vistas con varias etiquetas que se superponen a un png de fondo único que tiene todas las ilustraciones para las etiquetas individuales.

Respondida el 04/02/2009 a las 18:24
fuente por usuario

votos
4
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    label.text = @"Your String.";
    label.layer.cornerRadius = 8.0;
    [self.view addSubview:label];
Respondida el 21/05/2014 a las 07:44
fuente por usuario

votos
3

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

Establecer límites como clip para Ajuste de tiempo de ejecución definido por el usuario como atributos

Respondida el 28/06/2017 a las 07:49
fuente por usuario

votos
3

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

Resultado

colores--bordes redondeados

Utilizados SO-Mensajes:

Patio de recreo

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())
Respondida el 30/03/2016 a las 11:16
fuente por usuario

votos
2

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:

introducir descripción de la imagen aquí

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

Crear un archivo de 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 el código limpio, si cambiar cualquier estilo en el futuro requieren sólo en el método de extensión.

Respondida el 15/08/2017 a las 10:25
fuente por usuario

votos
2

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;
Respondida el 14/01/2016 a las 11:23
fuente por usuario

votos
2

¿Intentó utilizar el UIButtonconstructor Interfaz (que tiene esquinas redondeadas) y experimentando con la configuración para que parezca una etiqueta? si todo lo que desea es mostrar texto estático dentro.

Respondida el 09/03/2009 a las 21:45
fuente por usuario

votos
1

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 viewel 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 intrinsincContentSizela 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 quedaría el texto alineado.

Respondida el 29/05/2017 a las 18:52
fuente por usuario

votos
1

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

    }
Respondida el 16/04/2016 a las 19:02
fuente por usuario

votos
0

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

Respondida el 05/11/2011 a las 01:55
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more