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?
Cum pot crea o rundă încolțit UILabel pe iPhone?
sursa de către utilizator newtonapple
În alte limbi...
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:
- Creați o
UIViewsubclasă și nume ceva de genulRoundRectView. - In
RoundRectViewedrawRect:metoda, trage o cale în jurul limitele vederii folosind Core Graphics apeluri ca și CGContextAddLineToPoint () pentru margini și și CGContextAddArcToPoint () pentru colțuri rotunjite. - Creați o
UILabelinstanță și face o subview a RoundRectView. - 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.
Pentru dispozitivele cu iOS 7.1 sau mai târziu, trebuie să adăugați:
yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Pentru Swift iOS8 bazat pe OScarsWyck începând răspunsului:
yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
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>
- aveți un
UILabelnumit:myLabel. - în „m“ sau „h“ fișier de import:
#import <QuartzCore/QuartzCore.h> î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
Xcode 7.3.1 iOS 9.3.2
_siteLabel.layer.masksToBounds = true;
_siteLabel.layer.cornerRadius = 8;
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.
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
label.text = @"Your String.";
label.layer.cornerRadius = 8.0;
[self.view addSubview:label];
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
Folosit SO-Mesaje:
- Cum să atragă un chenar în jurul unei UILabel?
- Adăugați un chenar în afara unui UIView
- Verificați dacă UIColor este întunecat sau luminos?
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())
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:
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.
Î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;
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.
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.
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
}
În funcție de ce anume faci ai putea face o imagine și setați ca fundal programatic.



