Come faccio a creare un giro spalle al muro UILabel su iPhone?

voti
139

C'è un costruito in modo da creare UILabels rotonde punte? Se la risposta è no, come si potrebbe fare per creare un oggetto del genere?

È pubblicato 04/02/2009 alle 08:19
fonte dall'utente
In altre lingue...                            


16 risposte

voti
223

iOS 3.0 e versioni successive

iPhone OS 3.0 e versioni successive supporta la cornerRadiusproprietà sulla CALayerclasse. Ogni vista ha un CALayeresempio che è possibile manipolare. Ciò significa che è possibile ottenere angoli arrotondati in una sola riga:

view.layer.cornerRadius = 8;

Sarà necessario #import <QuartzCore/QuartzCore.h>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 UIViewsottoclasse e denominarlo qualcosa di simile RoundRectView.
  2. In RoundRectView's drawRect:metodo, disegnare un percorso attorno ai confini della vista utilizzando core grafico chiamate come CGContextAddLineToPoint () per i bordi ed e CGContextAddArcToPoint () per gli angoli arrotondati.
  3. Creare un UILabelesempio e ne fanno una visualizzazione secondaria della RoundRectView.
  4. Impostare la cornice dell'etichetta essere alcuni pixel incastonate limite del RoundRectView. (Ad esempio, label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

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

Risposto il 04/02/2009 a 10:22
fonte dall'utente

voti
130

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

yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Risposto il 04/04/2014 a 08:54
fonte dall'utente

voti
17

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

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
Risposto il 17/08/2015 a 16:08
fonte dall'utente

voti
11

È 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 lblNamecon la vostra UILabel.

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

Risposto il 13/02/2014 a 09:09
fonte dall'utente

voti
11
  1. si dispone di una UILabelchiamata: myLabel.
  2. nel vostro o importare file "h" "m": #import <QuartzCore/QuartzCore.h>
  3. nella vostra viewDidLoadscrittura di questa linea: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

Risposto il 04/12/2012 a 11:08
fonte dall'utente

voti
6

xCode 7.3.1 iOS 9.3.2

 _siteLabel.layer.masksToBounds = true;
  _siteLabel.layer.cornerRadius = 8;
Risposto il 21/07/2016 a 11:22
fonte dall'utente

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

Risposto il 04/02/2009 a 18:24
fonte dall'utente

voti
4
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    label.text = @"Your String.";
    label.layer.cornerRadius = 8.0;
    [self.view addSubview:label];
Risposto il 21/05/2014 a 07:44
fonte dall'utente

voti
3

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

Impostare clip per limiti come Set User Defined Runtime attributi come

Risposto il 28/06/2017 a 10:49
fonte dall'utente

voti
3

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

Risultato

colori a tutto tondo-borders

Usato SO-Messaggi:

Terreno di gioco

Basta incollare questo in un iOS Parco giochi:

//: 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())
Risposto il 30/03/2016 a 14:16
fonte dall'utente

voti
2

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

Produzione:

entrare descrizione dell'immagine qui

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 modificare qualsiasi stile, in futuro, richiedono solo nel metodo di estensione.

Risposto il 15/08/2017 a 13:25
fonte dall'utente

voti
2

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;
Risposto il 14/01/2016 a 14:23
fonte dall'utente

voti
2

Hai provato con il UIButtondal 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.

Risposto il 09/03/2009 a 21:45
fonte dall'utente

voti
1

Swift 3

Se si desidera che l'etichetta arrotondato con colore di sfondo, oltre alla maggior parte delle altre risposte, è necessario impostare layeril colore di sfondo 's pure. Non funziona quando si imposta viewil colore di sfondo.

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

Se si utilizza il layout automatico, vogliono un po 'di imbottitura attorno all'etichetta e non vogliono impostare la dimensione dell'etichetta manualmente, è possibile creare UILabel sottoclasse e sovrascrivere intrinsincContentSizeproprietà:

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

Per unire le due cose si dovrà anche impostare label.textAlignment = center, altrimenti il testo sarà allineato a sinistra.

Risposto il 29/05/2017 a 21:52
fonte dall'utente

voti
1

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

    }
Risposto il 16/04/2016 a 22:02
fonte dall'utente

voti
0

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

Risposto il 05/11/2011 a 01:55
fonte dall'utente

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