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?
Hoe maak ik een ronde in het nauw gedreven UILabel op de iPhone?
bron van user newtonapple
In andere talen...
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:
- Maak een
UIViewsubklasse en noem maar ietsRoundRectView. - Bij
RoundRectView'sdrawRect: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. - Maak een
UILabelvoorbeeld en maak er een subweergave van de RoundRectView. - 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.
Voor apparaten met iOS 7.1 of hoger, moet u toe te voegen:
yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Voor Swift IOS8 verder gebaseerd op OScarsWyck antwoord:
yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
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>
- je hebt een
UILabelgenaamd:myLabel. - in uw "m" of "h" bestand importeren:
#import <QuartzCore/QuartzCore.h> 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
xCode 7.3.1 iOS 9.3.2
_siteLabel.layer.masksToBounds = true;
_siteLabel.layer.cornerRadius = 8;
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.
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
label.text = @"Your String.";
label.layer.cornerRadius = 8.0;
[self.view addSubview:label];
Ik maakte een snelle UILabelsubklasse om dit effect te bereiken. Daarnaast automatisch ingesteld ik de tekstkleur in zwart of wit voor maximaal contrast.
Resultaat
Gebruikt SO-berichten:
- Hoe maak je rand rond een UILabel tekenen?
- Voeg een rand buiten een UIView
- Controleer of UIColor is donker of licht?
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())
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:
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.
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;
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.
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.
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
}
Afhankelijk van wat je precies je doet een beeld kon maken en instellen als de achtergrond programmatisch.



