Hoe maak ik een ronde in het nauw gedreven UILabel op de iPhone?

stemmen
139

Is er een ingebouwde manier om rond in het nauw gedreven UILabels creëren? Als het antwoord nee is, hoe zou men gaan over het creëren van een dergelijk object?

De vraag is gesteld op 04/02/2009 om 08:19
bron van user
In andere talen...                            


16 antwoorden

stemmen
223

iOS 3.0 en hoger

iPhone OS 3.0 en hoger ondersteunt de cornerRadiuswoning op de CALayerclass. Elk standpunt heeft een CALayerexemplaar dat u kunt manipuleren. Dit betekent dat u afgeronde hoeken krijgen in een regel:

view.layer.cornerRadius = 8;

U moet #import <QuartzCore/QuartzCore.h>en link naar de QuartzCore kader om de toegang tot headers en eigenschappen CALayer te krijgen.

Voordat iOS 3.0

Een manier om dit te doen, die ik recent gebruikte, is om een ​​UIView subklasse die gewoon een afgeronde rechthoek tekent maken, en vervolgens de UILabel of, in mijn geval, UITextView, een subweergave binnenkant van het. Concreet:

  1. Maak een UIViewsubklasse en noem maar iets RoundRectView.
  2. Bij RoundRectView's drawRect:methode, teken een pad rond de grenzen van de weergave middels grafische kern oproepen zoals CGContextAddLineToPoint () voor de randen en CGContextAddArcToPoint en () de afgeronde hoeken.
  3. Maak een UILabelvoorbeeld en maak er een subweergave van de RoundRectView.
  4. Stel de framesnelheid van het label om een paar pixels inzet van de grenzen RoundRectView's. (Bijvoorbeeld label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

U kunt de RoundRectView plaatsen op het oog met behulp van Interface Builder als u een generieke UIView maken en verander de klas met behulp van de inspecteur. U zult de rechthoek niet zien totdat je compileren en uw app draaien, maar minstens zult u in staat om de subview te plaatsen en sluit deze aan op verkooppunten of acties indien nodig.

antwoordde op 04/02/2009 om 10:22
bron van user

stemmen
130

Voor apparaten met iOS 7.1 of hoger, moet u toe te voegen:

yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
antwoordde op 04/04/2014 om 08:54
bron van user

stemmen
17

Voor Swift IOS8 verder gebaseerd op OScarsWyck antwoord:

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
antwoordde op 17/08/2015 om 16:08
bron van user

stemmen
11

U kunt afgeronde grens te maken met een breedte van de grens van enige controle op deze manier: -

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


Vervang enkel lblNamemet je UILabel.

Opmerking: - Vergeet niet om te importeren<QuartzCore/QuartzCore.h>

antwoordde op 13/02/2014 om 09:09
bron van user

stemmen
11
  1. je hebt een UILabelgenaamd: myLabel.
  2. in uw "m" of "h" bestand importeren: #import <QuartzCore/QuartzCore.h>
  3. in uw viewDidLoadschrijven deze lijn:self.myLabel.layer.cornerRadius = 8;

    • hangt af van hoe u wilt kunt u cornerRadius waarde te veranderen van 8 tot en ander nummer :)

Succes

antwoordde op 04/12/2012 om 11:08
bron van user

stemmen
6

xCode 7.3.1 iOS 9.3.2

 _siteLabel.layer.masksToBounds = true;
  _siteLabel.layer.cornerRadius = 8;
antwoordde op 21/07/2016 om 11:22
bron van user

stemmen
6

Een andere methode is het PNG achter de UILabel plaatsen. Ik heb uitzicht met een aantal labels die een enkele achtergrond png dat al het artwork voor de afzonderlijke labels heeft bedekken.

antwoordde op 04/02/2009 om 18:24
bron van user

stemmen
4
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    label.text = @"Your String.";
    label.layer.cornerRadius = 8.0;
    [self.view addSubview:label];
antwoordde op 21/05/2014 om 07:44
bron van user

stemmen
3

Als u wilt afgeronde hoek van UI objecten zoals ( UILabel, UIView, UIButton, UIImageView) door storyboard vervolgens clip to boundstrue en stel User Defined Runtime AttributesKey pad als layer.cornerRadius, type = Aantal en waarde = 9 (als uw vereiste)

Stel clip grenzen als Set User Defined Runtime Attributen als

antwoordde op 28/06/2017 om 10:49
bron van user

stemmen
3

Ik maakte een snelle UILabelsubklasse om dit effect te bereiken. Daarnaast automatisch ingesteld ik de tekstkleur in zwart of wit voor maximaal contrast.

Resultaat

kleuren afgerond-borders

Gebruikt SO-berichten:

Speelplaats

Net plak deze in een 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())
antwoordde op 30/03/2016 om 14:16
bron van user

stemmen
2

Werkt prima in Xcode 8.1.2 met Swift 3, getest in augustus 2017

"CornerRadius" is de sleutel woning aan de afgeronde hoeken, waar als u gebruik maakt van dezelfde stijl voor alle labels in uw aanvraag te stellen, zou ik adviseren om een ​​verlenging methode.

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

Output:

voer image beschrijving hier

Waarom Extension methode?

Maak een Swift-bestand en voeg de volgende code, die de Uitbreiding methode om de "UILabel" class, waarbij deze methode is door de gebruiker gedefinieerde, maar zal werken voor alle label in uw toepassing en zal bijdragen tot de samenhang en schone code te houden, als u heeft veranderen elke stijl in de toekomst nodig hebben alleen in de extension method.

antwoordde op 15/08/2017 om 13:25
bron van user

stemmen
2

In MonoTouch / Xamarin.iOS opgelost ik hetzelfde probleem als volgt uit:

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;
antwoordde op 14/01/2016 om 14:23
bron van user

stemmen
2

Heb je geprobeerd met behulp van de UIButtonuit de Interface Builder (dat heeft afgeronde hoeken) en experimenteren met de instellingen zodat het lijkt als een label. als alles wat je wilt is om statische tekst in te geven.

antwoordde op 09/03/2009 om 21:45
bron van user

stemmen
1

Swift 3

Als u afgeronde label met achtergrondkleur wilt, in aanvulling op de meeste van de andere antwoorden, moet u eerst de layer's achtergrondkleur eveneens. Het werkt niet bij het instellen van viewde achtergrondkleur.

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

Als u gebruik maakt van automatische lay-out, willen sommige padding rond het label en willen niet om de grootte van het label handmatig in te stellen, kunt u UILabel subklasse maken en overschrijven intrinsincContentSizeeigenschap:

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

Om de twee te combineren moet u ook in te stellen label.textAlignment = center, anders wordt de tekst zou worden links uitgelijnd.

antwoordde op 29/05/2017 om 21:52
bron van user

stemmen
1

Werkt perfect 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

    }
antwoordde op 16/04/2016 om 22:02
bron van user

stemmen
0

Afhankelijk van wat je precies je doet een beeld kon maken en instellen als de achtergrond programmatisch.

antwoordde op 05/11/2011 om 01:55
bron van user

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