Come posso creare una UILabel con angoli arrotondati su iPhone?

Question

Esiste un modo integrato per creare UILabel con angoli arrotondati?Se la risposta è no, come si potrebbe realizzare un oggetto del genere?

Answer 1

iOS 3.0 e versioni successive

iPhone OS 3.0 e versioni successive supportano la cornerRadius proprietà sul CALayer di classe. Ogni vista ha un'istanza #import <QuartzCore/QuartzCore.h> che si può manipolare. Ciò significa che è possibile ottenere angoli arrotondati in una sola riga:

view.layer.cornerRadius = 8;

Sarà necessario UIView e collegamento al quadro QuartzCore per ottenere l'accesso alle intestazioni e le proprietà di CALayer.

Prima di iOS 3.0

Un modo per farlo, che ho usato di recente, è quello di creare una sottoclasse UIView che disegna semplicemente un rettangolo arrotondato, e poi fare l'UILabel o, nel mio caso, UITextView, una visualizzazione secondaria all'interno di esso. In particolare:

1. Creare una sottoclasse RoundRectView e denominarlo qualcosa come drawRect:.
2. Nel metodo UILabel s 'label.frame = CGRectInset(roundRectView.bounds, 8, 8);, disegnare un percorso intorno ai confini della vista utilizzando core grafico chiede come CGContextAddLineToPoint () per i bordi ed e CGContextAddArcToPoint () per gli angoli arrotondati.
3. Crea un'istanza <=> e renderlo una visualizzazione secondaria del RoundRectView.
4. Impostare la cornice dell'etichetta sia qualche pixel incastonate limite del RoundRectView. (Per esempio, <=>)

È possibile posizionare il RoundRectView su una vista utilizzando Interface Builder, se si crea un UIView generico e quindi modificare la sua classe utilizzando la finestra di ispezione. Non vedrete il rettangolo fino compilate ed eseguite la vostra applicazione, ma almeno sarete in grado di collocare la visualizzazione secondaria e collegarlo a prese o azioni, se necessario.

Answer 2

Per i dispositivi con iOS 7.1 o versione successiva, è necessario aggiungere:

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

Answer 3

Per Swift iOS 8 in poi sulla base di OScarsWyck risposta:

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

Answer 4

1. si dispone di un UILabel chiamato:. myLabel
2. in "m" o l'importazione di file "h": #import <QuartzCore/QuartzCore.h>

3. nel vostro viewDidLoad scrivere questa riga: self.myLabel.layer.cornerRadius = 8;

   • dipende da come si vuole si può cambiare il valore cornerRadius da 8 a altro numero:)

In bocca al lupo

Answer 5

È possibile effettuare bordo arrotondato con una larghezza di bordo di qualsiasi controllo in questo modo: -

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 sostituire lblName con il UILabel.

Nota: - Non dimenticare di importare <QuartzCore/QuartzCore.h>

Answer 6

Un altro metodo è quello di mettere un png dietro l'UILabel. Ho opinioni con diverse etichette che si sovrappongono una singola PNG di sfondo che ha tutte le opere d'arte per le singole etichette.

Answer 7

xCode 7.3.1 iOS 9.3.2

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

Answer 8

Ho fatto una sottoclasse UILabel rapido per ottenere questo effetto. Inoltre ho impostato automaticamente il colore del testo bianco o nero per il contrasto massimo.

Risultato

Utilizzato SO-Post:

• Come disegnare un bordo intorno UILabel?
• Aggiungere un bordo esterno di un UIView
• Verificare se UIColor è scuro o chiaro?

Parco giochi

Basta incollare questo in un parco giochi 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

Se si vuole angolo arrotondato di UI oggetti come (UILabel, UIView, UIButton, UIImageView) di storyboard quindi impostare clip to bounds vera e impostare User Defined Runtime Attributes percorso chiave come layer.cornerRadius, type = Numero e valore = 9 (come vostro requisito)

Answer 11

In MonoTouch / Xamarin.iOS ho risolto lo stesso problema in questo modo:

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

Funziona perfettamente in 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

Hai provato utilizzando il UIButton dal costruttore di interfaccia (che ha gli angoli arrotondati) e sperimentare con le impostazioni per farlo sembrare come un'etichetta. se invece si è per visualizzare il testo statico all'interno.

Answer 14

Veloce 3

Se desideri un'etichetta arrotondata con colore di sfondo, oltre alla maggior parte delle altre risposte, devi impostare layeranche il colore di sfondo.Non funziona durante l'impostazione view colore di sfondo.

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

Se stai utilizzando il layout automatico, desideri del riempimento attorno all'etichetta e non vuoi impostare manualmente la dimensione dell'etichetta, puoi creare la sottoclasse UILabel e sovrascrivere intrinsincContentSize proprietà:

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

Per combinare i due dovrai anche impostare label.textAlignment = center, altrimenti il ​​testo verrebbe allineato a sinistra.

Answer 15

  

funziona bene in Xcode 8.1.2 con Swift 3, provato durante agosto 2017

"cornerRadius" è la proprietà chiave per impostare i bordi arrotondati, dove se si utilizza lo stesso stile per tutte le etichette nell'applicazione, mi sento di raccomandare per un metodo di estensione.

Codice:

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

Output:

Perché metodo di estensione?

Creare un file di Swift e aggiungere il codice seguente, che ha il metodo Estensione alla classe "UILabel", dove questo metodo è definito dall'utente, ma funzionerà per tutta l'etichetta nell'applicazione e contribuirà a mantenere la coerenza e codice pulito , se si modifica qualsiasi stile in futuro uno sforzo solo nel metodo di estensione.

Answer 16

A seconda di cosa esattamente si sta facendo si potrebbe fare un'immagine e impostarla come sfondo programatically.