Cum pot crea o rundă încolțit UILabel pe iPhone?

voturi
139

Există o construit în mod de a crea UILabels încolțit-rotund? În cazul în care răspunsul nu este, cum ar fi un du-te despre crearea unui astfel de obiect?

Întrebat 04/02/2009 la 08:19
sursa de către utilizator
În alte limbi...                            


16 răspunsuri

voturi
223

iOS 3.0 și mai târziu

iPhone OS 3.0 și mai târziu sprijină cornerRadiusproprietatea asupra CALayerclasei. Fiecare are vedere o CALayerinstanță pe care le poate manipula. Acest lucru înseamnă că puteți obține colturi rotunjite într - o singură linie:

view.layer.cornerRadius = 8;

Va trebui să #import <QuartzCore/QuartzCore.h>și link - ul la cadrul QuartzCore pentru a obține acces la anteturile și proprietățile lui CALayer.

Înainte de a iOS 3.0

O modalitate de a face acest lucru, pe care am folosit recent, este de a crea o subclasă UIView care atrage pur și simplu un dreptunghi rotunjit, iar apoi face UILabel sau, în cazul meu, UITextView, un subview interior. Specific:

  1. Creați o UIViewsubclasă și nume ceva de genul RoundRectView.
  2. In RoundRectViewe drawRect:metoda, trage o cale în jurul limitele vederii folosind Core Graphics apeluri ca și CGContextAddLineToPoint () pentru margini și și CGContextAddArcToPoint () pentru colțuri rotunjite.
  3. Creați o UILabelinstanță și face o subview a RoundRectView.
  4. Setați cadrul etichetei trebuie să existe câțiva pixeli înserat din margineste RoundRectView lui. (De exemplu, label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

Puteți plasa RoundRectView pe o vizualizare folosind Interface Builder, dacă creați un UIView generice și apoi modificați clasa sa folosind inspectorul. Nu veți vedea dreptunghiului până când compila și rula aplicația, dar cel puțin vei putea plasa subview și conectați-l la puncte de vânzare sau acțiuni, dacă este necesar.

Publicat 04/02/2009 la 10:22
sursa de către utilizator

voturi
130

Pentru dispozitivele cu iOS 7.1 sau mai târziu, trebuie să adăugați:

yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Publicat 04/04/2014 la 08:54
sursa de către utilizator

voturi
17

Pentru Swift iOS8 bazat pe OScarsWyck începând răspunsului:

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
Publicat 17/08/2015 la 16:08
sursa de către utilizator

voturi
11

Puteți face de frontieră rotunjite cu lățimea de frontieră de sub orice control în acest fel: -

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


Doar înlocuiți lblNamecu dumneavoastră UILabel.

Notă: - Nu uita să importe<QuartzCore/QuartzCore.h>

Publicat 13/02/2014 la 09:09
sursa de către utilizator

voturi
11
  1. aveți un UILabelnumit: myLabel.
  2. în „m“ sau „h“ fișier de import: #import <QuartzCore/QuartzCore.h>
  3. în dumneavoastră viewDidLoadscrie această linie:self.myLabel.layer.cornerRadius = 8;

    • depinde de modul în care doriți puteți schimba valoarea cornerRadius de la 8 la alt număr :)

Mult noroc

Publicat 04/12/2012 la 11:08
sursa de către utilizator

voturi
6

Xcode 7.3.1 iOS 9.3.2

 _siteLabel.layer.masksToBounds = true;
  _siteLabel.layer.cornerRadius = 8;
Publicat 21/07/2016 la 11:22
sursa de către utilizator

voturi
6

O altă metodă este de a plasa un png în spatele UILabel. Am opinii cu mai multe etichete care se suprapun peste o singură png fundal care are toate lucrările de artă pentru etichetele individuale.

Publicat 04/02/2009 la 18:24
sursa de către utilizator

voturi
4
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    label.text = @"Your String.";
    label.layer.cornerRadius = 8.0;
    [self.view addSubview:label];
Publicat 21/05/2014 la 07:44
sursa de către utilizator

voturi
3

Dacă doriți de colț rotunjit de obiecte cum ar fi UI ( UILabel, UIView, UIButton, UIImageView) prin storyboard , apoi setați clip to boundstrue și setați User Defined Runtime Attributescalea cheie ca layer.cornerRadius, tipul = Numărul și valoarea = 9 (ca cerința dvs.)

Setați Clip la limite ca Setați User Defined Runtime ca Atributele

Publicat 28/06/2017 la 10:49
sursa de către utilizator

voturi
3

Am făcut o rapidă UILabelsubclasa pentru a realiza acest efect. În plus , am setat automat culoarea textului fie negru sau alb pentru un contrast maxim.

Rezultat

culori-rotunjite frontierele

Folosit SO-Mesaje:

Loc de joaca

Doar lipiți acest lucru într-un 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())
Publicat 30/03/2016 la 14:16
sursa de către utilizator

voturi
2

Funcționează bine în Xcode 8.1.2 cu Swift 3, testate în august 2017

„CornerRadius“ este proprietatea cheie pentru a seta marginile rotunjite, în cazul în care dacă utilizați același stil pentru toate etichetele din cererea dumneavoastră, aș recomanda o metodă de prelungire.

Cod:

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

ieşire:

introduceți descrierea imaginii aici

De ce metodă de extensie?

Creați un fișier Swift și adăugați codul următor, care are metoda Extention la clasa „UILabel“, în cazul în care această metodă este definit de utilizator, dar va lucra pentru toate eticheta în cererea dumneavoastră și va contribui la menținerea coerenței și codul de curat, dacă vă schimba orice stil în viitor necesită numai în metoda de extensie.

Publicat 15/08/2017 la 13:25
sursa de către utilizator

voturi
2

În MonoTouch / Xamarin.iOS am rezolvat aceeași problemă ca aceasta:

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;
Publicat 14/01/2016 la 14:23
sursa de către utilizator

voturi
2

Ai încercat folosind UIButtonde la constructor Interface (care are colțuri rotunjite) și experimentarea cu setările pentru a face să arate ca o etichetă. dacă tot ce doriți este să afișeze text static în interiorul.

Publicat 09/03/2009 la 21:45
sursa de către utilizator

voturi
1

Swift 3

Dacă doriți eticheta rotundă , cu o culoare de fundal, în plus față de cele mai multe dintre celelalte răspunsuri, trebuie să setați layere culoarea de fundal, de asemenea. Ea nu funcționează atunci când setarea de viewculoare de fundal.

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

Dacă utilizați aspect auto, doresc unele padding în jurul valorii de etichetă și nu doriți să setați manual dimensiunea etichetei, puteți crea UILabel subclasă și suprascrie intrinsincContentSizeproprietatea:

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

Pentru a combina cele doua va trebui , de asemenea , pentru a stabili label.textAlignment = center, în caz contrar, textul ar fi aliniate la stânga.

Publicat 29/05/2017 la 21:52
sursa de către utilizator

voturi
1

Funcționează perfect, în 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

    }
Publicat 16/04/2016 la 22:02
sursa de către utilizator

voturi
0

În funcție de ce anume faci ai putea face o imagine și setați ca fundal programatic.

Publicat 05/11/2011 la 01:55
sursa de către utilizator

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