Esiste un modo integrato per creare UILabels con angoli arrotondati? Se la risposta è no, come si potrebbe creare un oggetto del genere?
Esiste un modo integrato per creare UILabels con angoli arrotondati? Se la risposta è no, come si potrebbe creare un oggetto del genere?
Risposte:
iPhone OS 3.0 e versioni successive supporta la cornerRadius
proprietà della CALayer
classe. Ogni vista ha CALayer
un'istanza che puoi manipolare. Ciò significa che puoi ottenere gli angoli arrotondati in una riga:
view.layer.cornerRadius = 8;
Avrai bisogno di #import <QuartzCore/QuartzCore.h>
e collegarsi al framework QuartzCore per accedere alle intestazioni e alle proprietà di CALayer.
Un modo per farlo, che ho usato di recente, è creare una sottoclasse UIView che disegna semplicemente un rettangolo arrotondato e quindi trasforma UILabel o, nel mio caso, UITextView, una sottoview al suo interno. In particolare:
UIView
sottoclasse e chiamala come qualcosa del genereRoundRectView
.RoundRectView
'sdrawRect:
metodo, disegnare un percorso attorno ai confini della vista utilizzando chiamate core grafico come CGContextAddLineToPoint () per i bordi e CGContextAddArcToPoint e () per gli angoli arrotondati.UILabel
un'istanza e rendila una sottoview di RoundRectView.label.frame = CGRectInset(roundRectView.bounds, 8, 8);
)È possibile posizionare RoundRectView su una vista utilizzando Interface Builder se si crea una vista UIV generica e quindi si modifica la sua classe mediante la finestra di ispezione. Non vedrai il rettangolo finché non compili ed esegui la tua app, ma almeno sarai in grado di posizionare la sottoview e collegarla a punti vendita o azioni se necessario.
Per i dispositivi con iOS 7.1 o successivo, è necessario aggiungere:
yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Per Swift IOS8 in poi basato sulla risposta OScarsWyck:
yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
YES
in true
.
UILabel
chiamata: myLabel
.#import <QuartzCore/QuartzCore.h>
nel tuo viewDidLoad
scrivere questa riga:self.myLabel.layer.cornerRadius = 8;
In bocca al lupo
È possibile creare un bordo arrotondato con la larghezza del bordo di qualsiasi controllo in questo modo: -
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]];
Sostituisci semplicemente lblName
con il tuo UILabel
.
Nota: - Non dimenticare di importare<QuartzCore/QuartzCore.h>
Ho creato una UILabel
sottoclasse rapida per ottenere questo effetto. Inoltre, imposto automaticamente il colore del testo su bianco o nero per il massimo contrasto.
Messaggi SO usati:
Basta incollarlo in un parco giochi iOS:
//: 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())
xCode 7.3.1 iOS 9.3.2
_siteLabel.layer.masksToBounds = true;
_siteLabel.layer.cornerRadius = 8;
Se si vuole angolo arrotondato di UI oggetti come ( UILabel
, UIView
, UIButton
, UIImageView
) per storyboard quindi impostare clip to bounds
vera e impostare User Defined Runtime Attributes
il percorso chiave come
layer.cornerRadius
, type = Numero e valore = 9 (come vostro requisito)
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
label.text = @"Your String.";
label.layer.cornerRadius = 8.0;
[self.view addSubview:label];
Se si desidera un'etichetta arrotondata con il colore di sfondo, oltre alla maggior parte delle altre risposte, è necessario impostare anche layer
il colore di sfondo. Non funziona quando si imposta il view
colore di sfondo.
label.layer.cornerRadius = 8
label.layer.masksToBounds = true
label.layer.backgroundColor = UIColor.lightGray.cgColor
Se si utilizza il layout automatico, si desidera un po 'di riempimento intorno all'etichetta e non si desidera impostare manualmente la dimensione dell'etichetta, è possibile creare la sottoclasse UILabel e sovrascrivere la intrinsincContentSize
proprietà:
class LabelWithPadding: UILabel {
override var intrinsicContentSize: CGSize {
let defaultSize = super.intrinsicContentSize
return CGSize(width: defaultSize.width + 12, height: defaultSize.height + 8)
}
}
Per combinare i due dovrai anche impostare label.textAlignment = center
, altrimenti il testo verrebbe allineato a sinistra.
In Monotouch / Xamarin.iOS ho risolto lo stesso problema in questo modo:
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;
Funziona perfettamente 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
}
Funziona bene in Xcode 8.1.2 con Swift 3, testato ad AGOSTO 2017
"cornerRadius" è la proprietà chiave per impostare i bordi arrotondati, dove se si utilizza lo stesso stile per tutte le etichette dell'applicazione, si consiglia un metodo di estensione.
Codice:
// 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
}
}
Produzione:
Perché metodo di estensione?
Crea un file Swift e aggiungi il seguente codice, che ha il metodo Extention alla classe "UILabel", in cui questo metodo è definito dall'utente ma funzionerà per tutte le etichette della tua applicazione e ti aiuterà a mantenere la coerenza e il codice pulito, se cambiare qualsiasi stile in futuro è necessario solo nel metodo di estensione.
A seconda di cosa stai esattamente facendo, potresti creare un'immagine e impostarla come sfondo programmaticamente.