web-dev-qa-db-de.com

Wie erstelle ich ein rundes UILabel auf dem iPhone?

Gibt es eine eingebaute Möglichkeit, um abgerundete UILabels zu erstellen? Wenn die Antwort nein ist, wie würde man so ein Objekt erstellen?

149
newtonapple

iOS 3.0 und höher

iPhone OS 3.0 und höher unterstützt die Eigenschaft cornerRadius für die Klasse CALayer. Jede Ansicht verfügt über eine CALayer -Instanz, die Sie bearbeiten können. Dies bedeutet, dass Sie abgerundete Ecken in einer Zeile erhalten können:

view.layer.cornerRadius = 8;

Sie müssen #import <QuartzCore/QuartzCore.h> Und eine Verknüpfung zum QuartzCore-Framework herstellen, um auf die Überschriften und Eigenschaften von CALayer zugreifen zu können.

Vor iOS 3.0

Eine Möglichkeit, die ich kürzlich verwendet habe, besteht darin, eine UIView-Unterklasse zu erstellen, die einfach ein abgerundetes Rechteck zeichnet, und dann das UILabel oder in meinem Fall UITextView zu einer Unteransicht darin zu machen. Speziell:

  1. Erstellen Sie eine UIView -Unterklasse und nennen Sie sie etwa RoundRectView.
  2. Zeichnen Sie in der Methode drawRect: Von RoundRectView einen Pfad um die Grenzen der Ansicht. Verwenden Sie dabei die Aufrufe von Core Graphics wie CGContextAddLineToPoint () für die Kanten und CGContextAddArcToPoint () für die abgerundeten Ecken.
  3. Erstellen Sie eine UILabel -Instanz und machen Sie sie zu einer Unteransicht von RoundRectView.
  4. Stellen Sie den Rahmen der Beschriftung so ein, dass er einige Pixel vom RoundRectView-Rand entfernt ist. (Zum Beispiel label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

Sie können RoundRectView mithilfe von Interface Builder in einer Ansicht platzieren, wenn Sie eine generische UIView erstellen und ihre Klasse dann mithilfe des Inspektors ändern. Sie werden das Rechteck erst sehen, wenn Sie Ihre App kompilieren und ausführen, aber Sie können die Unteransicht zumindest platzieren und sie bei Bedarf mit Outlets oder Aktionen verbinden.

227
benzado

Für Geräte mit iOS 7.1 oder höher müssen Sie Folgendes hinzufügen:

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

Für Swift IOS8 ab OScarsWyck Antwort:

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
19
VBaarathi
  1. sie haben ein UILabel mit dem Namen: myLabel.
  2. in Ihrer "m" oder "h" -Datei importieren: #import <QuartzCore/QuartzCore.h>
  3. schreiben Sie in Ihr viewDidLoad diese Zeile: self.myLabel.layer.cornerRadius = 8;

    • hängt davon ab, wie du willst, du kannst den Wert von cornerRadius von 8 auf eine andere Zahl ändern :)

Viel Glück

11
Gabriel

Sie können einen abgerundeten Rand mit der Breite des Randes eines beliebigen Steuerelements auf folgende Weise erstellen:

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]];


Ersetzen Sie einfach lblName durch Ihr UILabel.

Hinweis: - Vergessen Sie nicht, <QuartzCore/QuartzCore.h> Zu importieren.

11
Piyush Dubey

xCode 7.3.1 iOS 9.3.2

 _siteLabel.layer.masksToBounds = true;
  _siteLabel.layer.cornerRadius = 8;
6
Ahmed Abdallah

Eine andere Methode besteht darin, ein PNG hinter dem UILabel zu platzieren. Ich habe Ansichten mit mehreren Beschriftungen, die eine einzelne Hintergrund-PNG überlagern, die alle Grafiken für die einzelnen Beschriftungen enthält.

6
Alpinista

Ich habe eine Swift UILabel -Unterklasse erstellt, um diesen Effekt zu erzielen. Außerdem habe ich die Textfarbe für maximalen Kontrast automatisch auf Schwarz oder Weiß gesetzt.

Ergebnis

colors-rounded-borders

Gebrauchte SO-Posts:

Spielplatz

Fügen Sie dies einfach in einen iOS-Spielplatz ein:

//: 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())
5
Besi
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    label.text = @"Your String.";
    label.layer.cornerRadius = 8.0;
    [self.view addSubview:label];
4
Gaurav Gilani

Wenn Sie eine abgerundete Ecke von UI-Objekten wie (UILabel, UIView, UIButton, UIImageView) per Storyboard möchten, setzen Sie clip to bounds true und set User Defined Runtime Attributes Schlüsselpfad als layer.cornerRadius, Typ = Zahl und Wert = 9 (als Ihre Anforderung)

Set clip to bounds asSet User Defined Runtime Attributes as

3

Schnell 3

Wenn Sie eine gerundete Beschriftung mit Hintergrundfarbe wünschen, müssen Sie zusätzlich zu den meisten anderen Antworten die Hintergrundfarbe von layer festlegen. Es funktioniert nicht, wenn Sie die Hintergrundfarbe view einstellen.

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

Wenn Sie das automatische Layout verwenden, das Etikett mit einem gewissen Abstand voneinander versehen und die Größe des Etiketts nicht manuell festlegen möchten, können Sie eine UILabel-Unterklasse erstellen und die intrinsincContentSize -Eigenschaft überschreiben:

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

Um die beiden zu kombinieren, müssen Sie auch label.textAlignment = center, sonst würde der Text linksbündig sein.

2
Marián Černý

Funktioniert perfekt 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

    }
2
Naishta

Funktioniert gut in Xcode 8.1.2 mit Swift 3, getestet im AUGUST 2017

"cornerRadius" ist die Schlüsseleigenschaft zum Festlegen der abgerundeten Kanten. Wenn Sie für alle Beschriftungen in Ihrer Anwendung denselben Stil verwenden, würde ich eine Erweiterungsmethode empfehlen.

Code:

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

Ausgabe:

enter image description here

Warum Erweiterungsmethode?

Erstellen Sie eine Datei Swift und fügen Sie den folgenden Code mit der Extention-Methode zur "UILabel" -Klasse hinzu, wobei diese Methode benutzerdefiniert ist, jedoch für alle Beschriftungen in Ihrer Anwendung funktioniert und hilfreich ist Um die Konsistenz zu wahren und den Code zu bereinigen, müssen Sie, wenn Sie einen Stil in Zukunft ändern, nur die Erweiterungsmethode verwenden.

In Monotouch/Xamarin.iOS habe ich das gleiche Problem wie folgt gelöst:

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;
2
Daniele D.

Haben Sie versucht, UIButton aus dem Builder für Benutzeroberfläche (mit abgerundeten Ecken) zu verwenden und mit den Einstellungen zu experimentieren, damit es wie eine Beschriftung aussieht? wenn Sie nur statischen Text anzeigen möchten.

2
Naren

Je nachdem, was genau Sie tun, können Sie ein Bild erstellen und es programmgesteuert als Hintergrund festlegen.

0
Steven Mayer