Jak mogę utworzyć rundę opanowany UILabel na iPhone?

głosy
139

Jest tam wbudowany w sposób tworzenia okrągłych tny UILabels? Jeśli odpowiedź brzmi nie, jak można by go o stworzenie takiego obiektu?

Utwórz 04/02/2009 o 08:19
źródło użytkownik
W innych językach...                            


16 odpowiedzi

głosy
223

iOS 3.0 i nowsze

iPhone OS 3.0 i później obsługuje cornerRadiuswłaściwość na CALayerklasy. Każdy widok ma CALayerinstancji, że można manipulować. Oznacza to, że można uzyskać zaokrąglone narożniki w jednym wierszu:

view.layer.cornerRadius = 8;

Trzeba będzie #import <QuartzCore/QuartzCore.h>i link do ram QuartzCore aby uzyskać dostęp do nagłówków i właściwości CALayer użytkownika.

Przed iOS 3.0

Jednym ze sposobów, aby to zrobić, których użyłem niedawna jest utworzenie podklasy UIView które po prostu rysuje zaokrąglony prostokąt, a następnie dokonać UILabel lub, w moim przypadku, UITextView, podrzędny wewnątrz niego. Konkretnie:

  1. Utworzyć UIViewpodklasę i nazwać to coś podobnego RoundRectView.
  2. W RoundRectView„s drawRect:sposobu zwrócić krążący wokół granice widoku z użyciem rdzenia graficznego wywołuje jak CGContextAddLineToPoint () dla krawędzi i CGContextAddArcToPoint (i) o zaokrąglonych narożach.
  3. Tworzenie UILabelinstancji i sprawiają, że podrzędny z RoundRectView.
  4. Ustaw kadr etykiety powinien być o kilka pikseli odsadzenie ograniczającą RoundRectView użytkownika. (Na przykład, label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

Można umieścić RoundRectView na widoku za pomocą interfejsu Builder jeśli utworzyć rodzajowego UIView, a następnie zmienić jego klasę pomocą Inspektora. Nie będzie widać prostokąt aż skompilować i uruchomić aplikację, ale przynajmniej będziesz mógł umieścić podrzędny i podłączyć je do gniazdek lub działań w razie potrzeby.

Odpowiedział 04/02/2009 o 10:22
źródło użytkownik

głosy
130

W przypadku urządzeń z systemem iOS 7.1 lub nowszym, należy dodać:

yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Odpowiedział 04/04/2014 o 08:54
źródło użytkownik

głosy
17

Dla systemów iOS 8 Swift roku na podstawie OScarsWyck odpowiedzi:

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
Odpowiedział 17/08/2015 o 16:08
źródło użytkownik

głosy
11

Można dokonać zaokrąglone obramowanie o szerokości granicy jakiejkolwiek kontroli w ten sposób: -

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


Wystarczy zastąpić lblNamepomocą swojego konta UILabel.

Uwaga: - Nie zapomnij importować<QuartzCore/QuartzCore.h>

Odpowiedział 13/02/2014 o 09:09
źródło użytkownik

głosy
11
  1. ty mieć UILabelo nazwie: myLabel.
  2. w „m” lub „H” importu pliku: #import <QuartzCore/QuartzCore.h>
  3. w viewDidLoadnapisanie tej linii:self.myLabel.layer.cornerRadius = 8;

    • zależy od tego, jak chcesz, możesz zmienić wartość cornerRadius od 8 do innego numeru :)

Powodzenia

Odpowiedział 04/12/2012 o 11:08
źródło użytkownik

głosy
6

Xcode 7.3.1 iOS 9.3.2

 _siteLabel.layer.masksToBounds = true;
  _siteLabel.layer.cornerRadius = 8;
Odpowiedział 21/07/2016 o 11:22
źródło użytkownik

głosy
6

Inną metodą jest umieszczenie png tył UILabel. Mam poglądy z kilku wytwórni, że nakładki pojedynczego png tła, który ma całą kompozycję dla poszczególnych etykiet.

Odpowiedział 04/02/2009 o 18:24
źródło użytkownik

głosy
4
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    label.text = @"Your String.";
    label.layer.cornerRadius = 8.0;
    [self.view addSubview:label];
Odpowiedział 21/05/2014 o 07:44
źródło użytkownik

głosy
3

Jeśli chcesz zaokrąglony narożnik UI obiektów jak ( UILabel, UIView, UIButton, UIImageView) przez ujęć następnie ustawić clip to boundsprawdziwe i ustawić User Defined Runtime Attributesścieżkę klucza jako layer.cornerRadiustype = liczba i wartość = 9 (jako wymóg)

Ustaw jako klip do granic Set User Defined Runtime Atrybuty jako

Odpowiedział 28/06/2017 o 10:49
źródło użytkownik

głosy
3

Zrobiłem szybki UILabelpodklasy, aby osiągnąć ten efekt. Ponadto ja automatycznie ustawić kolor tekstu na czarny lub biały dla maksymalnego kontrastu.

Wynik

Kolory zaokrąglone-granic

Używane SO-Wiadomości:

Plac zabaw

Wystarczy wkleić do IOS Playground:

//: 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())
Odpowiedział 30/03/2016 o 14:16
źródło użytkownik

głosy
2

Współpracuje w Xcode 8.1.2 z Swift 3, testowane w sierpniu 2017

„CornerRadius” jest kluczem nieruchomość ustawić zaokrąglone krawędzie, gdzie jeśli używasz tego samego stylu dla wszystkich etykiet w swojej aplikacji, polecam dla metodę rozszerzenia.

Kod:

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

Wydajność:

wprowadzić opis obrazu tutaj

Dlaczego metoda Extension?

Tworzenie Swift plik i dodaj następujący kod, który ma metodę przedłużeniu do klasy „UILabel”, gdzie metoda ta jest zdefiniowana przez użytkownika, ale będzie działać na wszystkich etykietach w aplikacji i pomoże utrzymać spójność i czystego kodu, jeśli zmienić dowolny styl w przyszłości wymagać jedynie w metodzie wydłużania.

Odpowiedział 15/08/2017 o 13:25
źródło użytkownik

głosy
2

W MonoTouch / Xamarin.iOS I rozwiązać ten sam problem jak poniżej:

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;
Odpowiedział 14/01/2016 o 14:23
źródło użytkownik

głosy
2

Próbowałaś używając UIButtonz konstruktora Interface (który ma zaokrąglone rogi) i eksperymentować z ustawieniami, aby wyglądał jak etykiecie. jeśli chcesz to do wyświetlania tekstu statycznego wewnątrz.

Odpowiedział 09/03/2009 o 21:45
źródło użytkownik

głosy
1

Swift 3

Jeśli chcesz zaokrąglony etykietę z kolorem tła, oprócz większość innych odpowiedzi, należy ustawić layer„s kolor tła, jak również. To nie działa, gdy ustawienie viewkoloru tła.

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

Jeśli używasz układu auto, chcesz trochę wyściółka wokół wytwórni i nie chcesz, aby ręcznie ustawić rozmiar etykiety, można utworzyć podklasę UILabel i zastąpić intrinsincContentSizewłaściwość:

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

Aby połączyć dwa będzie trzeba także ustawić label.textAlignment = center, inaczej tekst będzie wyrównany do lewej.

Odpowiedział 29/05/2017 o 21:52
źródło użytkownik

głosy
1

Działa idealnie w 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

    }
Odpowiedział 16/04/2016 o 22:02
źródło użytkownik

głosy
0

W zależności od tego, co dokładnie robisz was mógłby zrobić zdjęcie i ustawić je jako tło programowo.

Odpowiedział 05/11/2011 o 01:55
źródło użytkownik

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