Je tu vestavěný způsob, jak vytvořit kulaté rohy UILabels? Je-li odpověď ne, jak by se dalo jít o vytvoření takového objektu?
Jak mohu vytvořit kolo kouta UILabel na iPhone?
iOS 3.0 a novější
iPhone OS 3.0 a novější podporuje cornerRadiusvlastnost na CALayertřídě. Každý pohled má CALayerinstanci, kterou lze manipulovat. To znamená, že můžete dostat zaoblené rohy v jednom řádku:
view.layer.cornerRadius = 8;
Budete potřebovat #import <QuartzCore/QuartzCore.h>i odkaz na rámec QuartzCore získat přístup k záhlaví a vlastností CALayer je.
Před iOS 3.0
Jedním ze způsobů, jak to udělat, které jsem použil v poslední době, je vytvořit UIView podtřídy, které prostě přitahuje zaoblený obdélník, a proveďte UILabel nebo v mém případě, UITextView, je subview uvnitř ní. konkrétně:
- Vytvořte
UIViewpodtřídy a název něco podobnéhoRoundRectView. - V
RoundRectView‚sdrawRect:metodou, nakreslit cestu kolem meze z pohledu pomocí základní grafické volá jako CGContextAddLineToPoint () pro hrany a a CGContextAddArcToPoint () pro zaoblenými rohy. - Vytvoření
UILabelinstance a učinit z něj subview z RoundRectView. - Nastavit rámeček popisku být několik pixelů vsazení RoundRectView jeho mezích. (Například
label.frame = CGRectInset(roundRectView.bounds, 8, 8);)
Můžete umístit RoundRectView na zobrazení pomocí Interface Builder, pokud si vytvořit generické UIView a změnit jeho třídu pomocí inspektoru. Neuvidíte obdélník, dokud sestavit a spustit aplikaci, ale aspoň budete mít možnost umístit subview av případě potřeby jej připojte do zásuvky nebo akcí.
Pro zařízení s iOS 7.1 nebo novější, je třeba přidat:
yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Pro Swift IOS8 roku na základě OScarsWyck odpověď:
yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
Můžete si vytvořit zaoblený okraj o šířce hranice jakékoliv kontroly tímto způsobem: -
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]];
Stačí vyměnit pouze lblNameu Vašeho přání UILabel.
Poznámka: - Nezapomeňte dovézt<QuartzCore/QuartzCore.h>
- máte
UILabels názvem:myLabel. - v „M“ nebo „H“ importu souboru:
#import <QuartzCore/QuartzCore.h> ve svém
viewDidLoadzápisu tento řádek:self.myLabel.layer.cornerRadius = 8;- záleží na tom, jak chcete, můžete změnit cornerRadius hodnotu od 8 do jiného čísla :)
Hodně štěstí
Xcode 7.3.1 iOS 9.3.2
_siteLabel.layer.masksToBounds = true;
_siteLabel.layer.cornerRadius = 8;
Další metodou je umístit png za UILabel. Mám názory s několika značek, které překrývají jeden pozadí png, že má k dispozici všechny kresby pro jednotlivé štítky.
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
label.text = @"Your String.";
label.layer.cornerRadius = 8.0;
[self.view addSubview:label];
Udělal jsem rychlý UILabelpodtřídy k dosažení tohoto efektu. Kromě toho jsem se automaticky nastaví barvu textu buď černé nebo bílé pro maximální kontrast.
Výsledek
Použité SO-Příspěvky:
- Jak nakreslit rámeček kolem UILabel?
- Přidat ohraničení mimo UIView
- Zkontrolujte, zda UIColor je tmavý nebo světlý?
Hřiště
Stačí vložit toto do 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())
Funguje dobře v Xcode 8.1.2 s Swift 3, Testováno v průběhu srpna 2017
„CornerRadius“ je klíčová vlastnost nastavit zaoblené hrany, kde v případě, že používají stejný styl pro všechny popisky v aplikaci bych doporučil pro metodu prodloužení.
Kód:
// 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
}
}
Výstup:
Proto metoda Extension?
Vytvořte Swift soubor a přidejte následující kód, který má metodu přístavby na třídu „UILabel“, kde tato metoda je uživatelem definované, ale bude fungovat pro všechny štítku v aplikaci a přispěje k zachování konzistence a čistý kód, pokud jste změnit jakýkoliv styl v budoucnu vyžadovat pouze ve způsobu prodloužení.
V MonoTouch / Xamarin.iOS jsem řešil stejný problém, jako je tento:
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;
Už jste vyzkoušeli použití UIButtonod stavitele rozhraní (který má zaoblené rohy) a experimentovat s nastavením, aby to vypadalo jako štítek. pokud vše, co chci, je zobrazit statický text uvnitř.
Swift 3
Pokud chcete, zaoblený štítek s barvou pozadí, kromě většiny ostatních odpovědí, je třeba nastavit layer‚s barvu pozadí stejně. To nefunguje při nastavení viewbarvy pozadí.
label.layer.cornerRadius = 8
label.layer.masksToBounds = true
label.layer.backgroundColor = UIColor.lightGray.cgColor
Pokud používáte automatické rozvržení chtít nějakou polstrování kolem štítku a nechtějí ručně nastavit velikost štítku, můžete vytvořit UILabel podtřídu a přepsat intrinsincContentSizevlastnost:
class LabelWithPadding: UILabel {
override var intrinsicContentSize: CGSize {
let defaultSize = super.intrinsicContentSize
return CGSize(width: defaultSize.width + 12, height: defaultSize.height + 8)
}
}
Chcete-li spojit dva budete také muset nastavit label.textAlignment = center, jinak se text by měla zůstat zarovnány.
Pracuje dokonalé 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
}
V závislosti na tom, co přesně jste děláš mohl udělat obrázek a nastavit jej jako pozadí programatically.

















