Hogyan lehet létrehozni egy kerek sarokba UILabel az iPhone?

szavazat
139

Van egy beépített módon létrehozni lekerekített sarkú UILabels? Ha a válasz nem, hogyan megy egy létrehozásával egy ilyen tárgy?

A kérdést 04/02/2009 08:19
a forrás felhasználó
Más nyelveken...                            


16 válasz

szavazat
223

iOS 3.0 és újabb

iPhone OS 3.0 és későbbi támogatja a cornerRadiustulajdonság a CALayerkategóriában. Minden néző van egy CALayerpéldány, amit lehet manipulálni. Ez azt jelenti, hogy lekerekített sarkok egy sorban:

view.layer.cornerRadius = 8;

Meg kell majd #import <QuartzCore/QuartzCore.h>, és a linket a QuartzCore keretet kap hozzáférést CALayer fejléccel és tulajdonságait.

Mielőtt iOS 3.0

Az egyik módja annak, hogy csináld, amit régen használt, hogy hozzon létre egy UIView alosztály, amely egyszerűen kihúzzák a lekerekített téglalap, majd végezze el a UILabel vagy, az én esetemben, UITextView egy subview belsejébe. Kifejezetten:

  1. Hozzon létre egy UIViewalosztálya, és új név például RoundRectView.
  2. A RoundRectView„s drawRect:módszer, dolgozzon az utat körül a határait a nézet segítségével Core Graphics kéri, mint CGContextAddLineToPoint () a szélek és a és CGContextAddArcToPoint () a lekerekített sarkok.
  3. Hozzon létre egy UILabelpéldány, és ez egy subview a RoundRectView.
  4. Állítsa be a keret a címke, hogy néhány pixel elválik a RoundRectView a határokat. (Például label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

Akkor tegyük a RoundRectView egy nézet segítségével Interface Builder, ha létrehoz egy általános UIView majd módosítsa a kategóriájában a felügyelő. Nem fogja látni a téglalap, amíg meg összeállításához és futtatásához az alkalmazást, de legalább akkor képes lesz arra, hogy helyezze a subview és csatlakoztassa a piacok vagy szükség esetén intézkedések meghozatala.

Válaszolt 04/02/2009 10:22
a forrás felhasználó

szavazat
130

Eszközök esetében iOS 7.1 vagy újabb, akkor hozzá kell adni:

yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Válaszolt 04/04/2014 08:54
a forrás felhasználó

szavazat
17

Swift iOS 8 rendszeren alapuló től OScarsWyck választ:

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
Válaszolt 17/08/2015 16:08
a forrás felhasználó

szavazat
11

Tudod, hogy kerek határ keret szélessége bármely ellenőrző ily módon: -

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


Csak cserélje lblNameÖn UILabel.

Megjegyzés: - Ne felejtsük el, hogy a behozatali<QuartzCore/QuartzCore.h>

Válaszolt 13/02/2014 09:09
a forrás felhasználó

szavazat
11
  1. van egy UILabelúgynevezett: myLabel.
  2. az "m" vagy "h" file import: #import <QuartzCore/QuartzCore.h>
  3. az viewDidLoadírási ezt a sort:self.myLabel.layer.cornerRadius = 8;

    • attól függ, hogyan akarod változtatni cornerRadius értéke 8 és más szám :)

Sok szerencsét

Válaszolt 04/12/2012 11:08
a forrás felhasználó

szavazat
6

Xcode 7.3.1 iOS 9.3.2

 _siteLabel.layer.masksToBounds = true;
  _siteLabel.layer.cornerRadius = 8;
Válaszolt 21/07/2016 11:22
a forrás felhasználó

szavazat
6

Egy másik módszer az, hogy tegyen egy png mögött UILabel. Van nézetek több címke elfedő egyetlen háttér png, hogy az összes mű az egyes címkék.

Válaszolt 04/02/2009 18:24
a forrás felhasználó

szavazat
4
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    label.text = @"Your String.";
    label.layer.cornerRadius = 8.0;
    [self.view addSubview:label];
Válaszolt 21/05/2014 07:44
a forrás felhasználó

szavazat
3

Ha azt szeretnénk, lekerekített sarok UI tárgyak, mint a ( UILabel, UIView, UIButton, UIImageView) a storyboard majd állítsa clip to boundstrue és állítsa User Defined Runtime AttributesKey utat, mint layer.cornerRadiusa type = száma és értéke = 9 (mint a követelmény)

Állítsa klip határokat a Felhasználó által megadott futási tulajdonságok, mint

Válaszolt 28/06/2017 10:49
a forrás felhasználó

szavazat
3

Csináltam egy gyors UILabelalosztály elérni ezt a hatást. Ezen kívül azt automatikusan a szöveg színe fekete vagy fehér a maximális kontraszt.

Eredmény

színek lekerekített-határok

Használt SO-hozzászólás:

Játszótér

Csak illessze be az 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())
Válaszolt 30/03/2016 14:16
a forrás felhasználó

szavazat
2

Működik az Xcode 8.1.2 Swift 3, tesztelve alatt augusztus 2017

„CornerRadius” a kulcs tulajdonság beállításához lekerekített élek, ahol, ha ugyanazt a stílust az összes címke az alkalmazás, csak javasolni tudom meghosszabbítását módszer.

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

output:

írja kép leírása itt

Miért Extension módszer?

Hozzon létre egy Swift fájlt, és adjuk hozzá a következő kódot, amely a Extention módszer a „UILabel” osztályban, ahol ez a módszer a felhasználó által megadott, de működni fog az összes címkét a kérelmet, és segít fenntartani a következetességet és tiszta kódot, ha módosítsa a stílus a jövőben szükség csak a bővítés módszert.

Válaszolt 15/08/2017 13:25
a forrás felhasználó

szavazat
2

A MonoTouch / Xamarin.iOS oldottam ugyanaz a probléma, mint ez:

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;
Válaszolt 14/01/2016 14:23
a forrás felhasználó

szavazat
2

Próbáltad a UIButtonaz Interface Builder (amely lekerekített sarkokkal), és kísérleteznek a beállításokat, hogy úgy tűnjön, mintha egy címkét. Ha az összes kívánt megjeleníteni statikus szöveget.

Válaszolt 09/03/2009 21:45
a forrás felhasználó

szavazat
1

Swift 3

Ha azt szeretnénk, lekerekített címke háttérszíne, amellett, hogy a legtöbb más választ, akkor be kell állítani layer„s háttér színét is. Ez nem működik, amikor beállítja viewa háttér színe.

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

Ha használja az automatikus elrendezés, szeretnék néhány padding körül a címkét, és nem akarja, hogy a méret a címke kézzel, akkor létrehozhat UILabel alosztály és felülbírálja intrinsincContentSizetulajdonság:

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

Hogy összekapcsolják a két akkor is be kell állítani label.textAlignment = center, különben a szöveg lenne balra igazított.

Válaszolt 29/05/2017 21:52
a forrás felhasználó

szavazat
1

Tökéletesen működik a 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

    }
Válaszolt 16/04/2016 22:02
a forrás felhasználó

szavazat
0

Attól függően, hogy pontosan mit csinál tudna tenni egy képet, és állítsa be a háttérben programozottan.

Válaszolt 05/11/2011 01:55
a forrás felhasználó

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