personalizado - ios 12 animoji

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

Question

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

Answer 1

Funciona bien en Xcode 8.1.2 con Swift 3, probado en agosto de 2017

"cornerRadius" es la propiedad clave para establecer los bordes redondeados, donde si 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?

Cree un archivo Swift y agregue el siguiente código, que tiene el método de extensión a la clase "UILabel", donde este método está definido por el usuario, pero funcionará para toda la etiqueta en su aplicación y ayudará a mantener la coherencia y el código limpio, si cambiar cualquier estilo en el futuro requiere solo en el método de extensión.

Answer 2

Swift 3

Si desea una etiqueta redondeada con un color de fondo, además de la mayoría de las otras respuestas, también debe establecer el color de fondo de la layer . No funciona al configurar el color de fondo de view .

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

Si está utilizando el diseño automático, quiere algo de relleno alrededor de la etiqueta y no desea configurar el tamaño de la etiqueta de forma manual, puede crear la subclase UILabel y anular la propiedad intrinsincContentSize :

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 necesitará establecer label.textAlignment = center , de lo contrario, el texto se alineará a la izquierda.

Answer 3

iOS 3.0 y posterior

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

view.layer.cornerRadius = 8;

Necesitarás #import <QuartzCore/QuartzCore.h> y vincularlo al framework 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 subclase UIView y UIView un nombre parecido a RoundRectView .
2. En el método drawRect: , dibuje una ruta alrededor de los límites de la vista usando las llamadas de Core Graphics como CGContextAddLineToPoint () para los bordes y CGContextAddArcToPoint () para las esquinas redondeadas.
3. Cree una instancia de UILabel y UILabel 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.

Answer 4

1. tienes un UILabel llamado: myLabel .
2. en su archivo "m" o "h" import: #import <QuartzCore/QuartzCore.h>

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

   • Depende de cómo quieras, puedes cambiar el valor de cornerRadius de 8 a otro número :)

Buena suerte

Answer 5

¿ UIButton utilizar UIButton desde el constructor 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.

Answer 6

Dependiendo de lo que está haciendo exactamente, podría crear una imagen y establecerla como fondo de forma programática.

Answer 7

En Monotouch / Xamarin.iOS resolví el mismo problema así:

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 8

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 9

Hice una subclase UILabel rápida para lograr este efecto. Además, configuro automáticamente el color del texto en negro o blanco para un contraste máximo.

Resultado

Puestos SO utilizados:

• Cómo dibujar un borde alrededor de un UILabel?
• Agregar un borde fuera de una UIView
• Compruebe si UIColor es oscuro o brillante

Patio de recreo

Simplemente pegue esto en un área de juegos de 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://.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://.com/a/15184257/784318
        frame = CGRectInset(self.frame, -borderWidth, -borderWidth)
    }
}


extension UIColor {
    // Credits to https://.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 10

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.

Answer 11

Para Swift IOS8 en adelante, basado en OScarsWyck, responda:

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

Answer 12

Para dispositivos con iOS 7.1 o posterior, debe agregar:

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

Answer 13

Puede hacer un borde redondeado 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]];

Simplemente reemplace lblName con su UILabel .

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

Answer 14

Si desea la esquina redondeada de los objetos UI como ( UILabel , UIView , UIButton , UIImageView ) por guión gráfico, establezca clip to bounds verdadero y establezca User Defined Runtime Attributes Key path como layer.cornerRadius , type = Number y value = 9 (como su requisito )

Answer 15

xCode 7.3.1 iOS 9.3.2

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

Answer 16

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