Jak mohu vytvořit kolo kouta UILabel na iPhone?

hlasů
139

Je tu vestavěný způsob, jak vytvořit kulaté rohy UILabels? Je-li odpověď ne, jak by se dalo jít o vytvoření takového objektu?

Položena 04/02/2009 v 08:19
zdroj uživatelem
V jiných jazycích...                            


16 odpovědí

hlasů
223

iOS 3.0 a novější

iPhone OS 3.0 a novější podporuje cornerRadiusvlastnost na CALayertřídě. Každý pohled má CALayerinstanci, kterou lze manipulovat. To znamená, že můžete dostat zaoblené rohy v jednom řádku:

view.layer.cornerRadius = 8;

Budete potřebovat #import <QuartzCore/QuartzCore.h>i odkaz na rámec QuartzCore získat přístup k záhlaví a vlastností CALayer je.

Před iOS 3.0

Jedním ze způsobů, jak to udělat, které jsem použil v poslední době, je vytvořit UIView podtřídy, které prostě přitahuje zaoblený obdélník, a proveďte UILabel nebo v mém případě, UITextView, je subview uvnitř ní. konkrétně:

  1. Vytvořte UIViewpodtřídy a název něco podobného RoundRectView.
  2. V RoundRectView‚s drawRect:metodou, nakreslit cestu kolem meze z pohledu pomocí základní grafické volá jako CGContextAddLineToPoint () pro hrany a a CGContextAddArcToPoint () pro zaoblenými rohy.
  3. Vytvoření UILabelinstance a učinit z něj subview z RoundRectView.
  4. Nastavit rámeček popisku být několik pixelů vsazení RoundRectView jeho mezích. (Například label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

Můžete umístit RoundRectView na zobrazení pomocí Interface Builder, pokud si vytvořit generické UIView a změnit jeho třídu pomocí inspektoru. Neuvidíte obdélník, dokud sestavit a spustit aplikaci, ale aspoň budete mít možnost umístit subview av případě potřeby jej připojte do zásuvky nebo akcí.

Odpovězeno 04/02/2009 v 10:22
zdroj uživatelem

hlasů
130

Pro zařízení s iOS 7.1 nebo novější, je třeba přidat:

yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Odpovězeno 04/04/2014 v 08:54
zdroj uživatelem

hlasů
17

Pro Swift IOS8 roku na základě OScarsWyck odpověď:

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
Odpovězeno 17/08/2015 v 16:08
zdroj uživatelem

hlasů
11

Můžete si vytvořit zaoblený okraj o šířce hranice jakékoliv kontroly tímto způsobem: -

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


Stačí vyměnit pouze lblNameu Vašeho přání UILabel.

Poznámka: - Nezapomeňte dovézt<QuartzCore/QuartzCore.h>

Odpovězeno 13/02/2014 v 09:09
zdroj uživatelem

hlasů
11
  1. máte UILabels názvem: myLabel.
  2. v „M“ nebo „H“ importu souboru: #import <QuartzCore/QuartzCore.h>
  3. ve svém viewDidLoadzápisu tento řádek:self.myLabel.layer.cornerRadius = 8;

    • záleží na tom, jak chcete, můžete změnit cornerRadius hodnotu od 8 do jiného čísla :)

Hodně štěstí

Odpovězeno 04/12/2012 v 11:08
zdroj uživatelem

hlasů
6

Xcode 7.3.1 iOS 9.3.2

 _siteLabel.layer.masksToBounds = true;
  _siteLabel.layer.cornerRadius = 8;
Odpovězeno 21/07/2016 v 11:22
zdroj uživatelem

hlasů
6

Další metodou je umístit png za UILabel. Mám názory s několika značek, které překrývají jeden pozadí png, že má k dispozici všechny kresby pro jednotlivé štítky.

Odpovězeno 04/02/2009 v 18:24
zdroj uživatelem

hlasů
4
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    label.text = @"Your String.";
    label.layer.cornerRadius = 8.0;
    [self.view addSubview:label];
Odpovězeno 21/05/2014 v 07:44
zdroj uživatelem

hlasů
3

Pokud chcete, zaoblený roh UI objektů jako ( UILabel, UIView, UIButton, UIImageView) podle scénáře poté nastavenou clip to boundshodnotu true a nastavte User Defined Runtime AttributesKey cestu jako layer.cornerRadius, type = počet a hodnota = 9 (jako váš požadavek)

Nastavit klip hranic je Nastavit User Defined Runtime atributy as

Odpovězeno 28/06/2017 v 10:49
zdroj uživatelem

hlasů
3

Udělal jsem rychlý UILabelpodtřídy k dosažení tohoto efektu. Kromě toho jsem se automaticky nastaví barvu textu buď černé nebo bílé pro maximální kontrast.

Výsledek

Barvy-obešel-borders

Použité SO-Příspěvky:

Hřiště

Stačí vložit toto 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())
Odpovězeno 30/03/2016 v 14:16
zdroj uživatelem

hlasů
2

Funguje dobře v Xcode 8.1.2 s Swift 3, Testováno v průběhu srpna 2017

„CornerRadius“ je klíčová vlastnost nastavit zaoblené hrany, kde v případě, že používají stejný styl pro všechny popisky v aplikaci bych doporučil pro metodu prodloužení.

Kód:

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

Výstup:

zadejte popis obrázku zde

Proto metoda Extension?

Vytvořte Swift soubor a přidejte následující kód, který má metodu přístavby na třídu „UILabel“, kde tato metoda je uživatelem definované, ale bude fungovat pro všechny štítku v aplikaci a přispěje k zachování konzistence a čistý kód, pokud jste změnit jakýkoliv styl v budoucnu vyžadovat pouze ve způsobu prodloužení.

Odpovězeno 15/08/2017 v 13:25
zdroj uživatelem

hlasů
2

V MonoTouch / Xamarin.iOS jsem řešil stejný problém, jako je tento:

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;
Odpovězeno 14/01/2016 v 14:23
zdroj uživatelem

hlasů
2

Už jste vyzkoušeli použití UIButtonod stavitele rozhraní (který má zaoblené rohy) a experimentovat s nastavením, aby to vypadalo jako štítek. pokud vše, co chci, je zobrazit statický text uvnitř.

Odpovězeno 09/03/2009 v 21:45
zdroj uživatelem

hlasů
1

Swift 3

Pokud chcete, zaoblený štítek s barvou pozadí, kromě většiny ostatních odpovědí, je třeba nastavit layer‚s barvu pozadí stejně. To nefunguje při nastavení viewbarvy pozadí.

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

Pokud používáte automatické rozvržení chtít nějakou polstrování kolem štítku a nechtějí ručně nastavit velikost štítku, můžete vytvořit UILabel podtřídu a přepsat intrinsincContentSizevlastnost:

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

Chcete-li spojit dva budete také muset nastavit label.textAlignment = center, jinak se text by měla zůstat zarovnány.

Odpovězeno 29/05/2017 v 21:52
zdroj uživatelem

hlasů
1

Pracuje dokonalé 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

    }
Odpovězeno 16/04/2016 v 22:02
zdroj uživatelem

hlasů
0

V závislosti na tom, co přesně jste děláš mohl udělat obrázek a nastavit jej jako pozadí programatically.

Odpovězeno 05/11/2011 v 01:55
zdroj uživatelem

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