Van egy beépített módon létrehozni lekerekített sarkú UILabels? Ha a válasz nem, hogyan megy egy létrehozásával egy ilyen tárgy?
Hogyan lehet létrehozni egy kerek sarokba UILabel az iPhone?
iOS 3.0 és újabb
iPhone OS 3.0 és későbbi támogatja a cornerRadiustulajdonság a CALayerkategóriában. Minden néző van egy CALayerpéldány, amit lehet manipulálni. Ez azt jelenti, hogy lekerekített sarkok egy sorban:
view.layer.cornerRadius = 8;
Meg kell majd #import <QuartzCore/QuartzCore.h>, és a linket a QuartzCore keretet kap hozzáférést CALayer fejléccel és tulajdonságait.
Mielőtt iOS 3.0
Az egyik módja annak, hogy csináld, amit régen használt, hogy hozzon létre egy UIView alosztály, amely egyszerűen kihúzzák a lekerekített téglalap, majd végezze el a UILabel vagy, az én esetemben, UITextView egy subview belsejébe. Kifejezetten:
- Hozzon létre egy
UIViewalosztálya, és új név példáulRoundRectView. - A
RoundRectView„sdrawRect:módszer, dolgozzon az utat körül a határait a nézet segítségével Core Graphics kéri, mint CGContextAddLineToPoint () a szélek és a és CGContextAddArcToPoint () a lekerekített sarkok. - Hozzon létre egy
UILabelpéldány, és ez egy subview a RoundRectView. - Állítsa be a keret a címke, hogy néhány pixel elválik a RoundRectView a határokat. (Például
label.frame = CGRectInset(roundRectView.bounds, 8, 8);)
Akkor tegyük a RoundRectView egy nézet segítségével Interface Builder, ha létrehoz egy általános UIView majd módosítsa a kategóriájában a felügyelő. Nem fogja látni a téglalap, amíg meg összeállításához és futtatásához az alkalmazást, de legalább akkor képes lesz arra, hogy helyezze a subview és csatlakoztassa a piacok vagy szükség esetén intézkedések meghozatala.
Eszközök esetében iOS 7.1 vagy újabb, akkor hozzá kell adni:
yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Swift iOS 8 rendszeren alapuló től OScarsWyck választ:
yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
Tudod, hogy kerek határ keret szélessége bármely ellenőrző ily módon: -
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]];
Csak cserélje lblNameÖn UILabel.
Megjegyzés: - Ne felejtsük el, hogy a behozatali<QuartzCore/QuartzCore.h>
- van egy
UILabelúgynevezett:myLabel. - az "m" vagy "h" file import:
#import <QuartzCore/QuartzCore.h> az
viewDidLoadírási ezt a sort:self.myLabel.layer.cornerRadius = 8;- attól függ, hogyan akarod változtatni cornerRadius értéke 8 és más szám :)
Sok szerencsét
Xcode 7.3.1 iOS 9.3.2
_siteLabel.layer.masksToBounds = true;
_siteLabel.layer.cornerRadius = 8;
Egy másik módszer az, hogy tegyen egy png mögött UILabel. Van nézetek több címke elfedő egyetlen háttér png, hogy az összes mű az egyes címkék.
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
label.text = @"Your String.";
label.layer.cornerRadius = 8.0;
[self.view addSubview:label];
Csináltam egy gyors UILabelalosztály elérni ezt a hatást. Ezen kívül azt automatikusan a szöveg színe fekete vagy fehér a maximális kontraszt.
Eredmény
Használt SO-hozzászólás:
- Hogyan kell felhívni szegélyének UILabel?
- Add a határon kívül egy UIView
- Ellenőrizze, hogy UIColor sötét vagy világos?
Játszótér
Csak illessze be az 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())
Működik az Xcode 8.1.2 Swift 3, tesztelve alatt augusztus 2017
„CornerRadius” a kulcs tulajdonság beállításához lekerekített élek, ahol, ha ugyanazt a stílust az összes címke az alkalmazás, csak javasolni tudom meghosszabbítását módszer.
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
}
}
output:
Miért Extension módszer?
Hozzon létre egy Swift fájlt, és adjuk hozzá a következő kódot, amely a Extention módszer a „UILabel” osztályban, ahol ez a módszer a felhasználó által megadott, de működni fog az összes címkét a kérelmet, és segít fenntartani a következetességet és tiszta kódot, ha módosítsa a stílus a jövőben szükség csak a bővítés módszert.
A MonoTouch / Xamarin.iOS oldottam ugyanaz a probléma, mint ez:
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;
Próbáltad a UIButtonaz Interface Builder (amely lekerekített sarkokkal), és kísérleteznek a beállításokat, hogy úgy tűnjön, mintha egy címkét. Ha az összes kívánt megjeleníteni statikus szöveget.
Swift 3
Ha azt szeretnénk, lekerekített címke háttérszíne, amellett, hogy a legtöbb más választ, akkor be kell állítani layer„s háttér színét is. Ez nem működik, amikor beállítja viewa háttér színe.
label.layer.cornerRadius = 8
label.layer.masksToBounds = true
label.layer.backgroundColor = UIColor.lightGray.cgColor
Ha használja az automatikus elrendezés, szeretnék néhány padding körül a címkét, és nem akarja, hogy a méret a címke kézzel, akkor létrehozhat UILabel alosztály és felülbírálja intrinsincContentSizetulajdonság:
class LabelWithPadding: UILabel {
override var intrinsicContentSize: CGSize {
let defaultSize = super.intrinsicContentSize
return CGSize(width: defaultSize.width + 12, height: defaultSize.height + 8)
}
}
Hogy összekapcsolják a két akkor is be kell állítani label.textAlignment = center, különben a szöveg lenne balra igazított.
Tökéletesen működik a 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
}
Attól függően, hogy pontosan mit csinál tudna tenni egy képet, és állítsa be a háttérben programozottan.

















