yuvarlak köşeli UILabels oluşturmak için bir şekilde inşa var mı? Cevap hayır ise, nasıl böyle bir nesneyi oluşturma hakkında gitmek?
Nasıl iPhone'da UILabel köşeye yuvarlak oluşturulur?
iOS 3.0 ve üzeri
Daha sonra iPhone OS 3.0 ve destekler cornerRadiusüzerinde mülkiyet CALayersınıfına. Her görünümde, sahip CALayerişleyebilirsiniz örneği. Bu şekilde tek bir çizgide yuvarlatılmış köşeler almak anlamına gelir:
view.layer.cornerRadius = 8;
Sen gerekecektir #import <QuartzCore/QuartzCore.h>CALayer en başlıkları ve özelliklerine erişmek için QuartzCore çerçevesine ve bağlantı.
iOS 3.0 Önce
Geçenlerde kullanılan hangi bunu yapmanın bir yolu, benim durumumda, UITextView, bunun içinde bir subview içinde, sadece yuvarlatılmış bir dikdörtgen çizer bir UIView alt sınıfı oluşturmak ve sonra UILabel yapmaktır ya. özellikle:
- Bir oluşturma
UIViewalt sınıfı ve bu gibi bir isimRoundRectView. - Gelen
RoundRectViewsitesindekidrawRect:Çekirdek Graphics üzerinden, sınır yuvarlak köşeler için kenarları için CGContextAddLineToPoint () ve ve CGContextAddArcToPoint () gibi çağrıları çevresinde yöntem, bir yol çizer. - Bir oluşturma
UILabelörneği ve RoundRectView bir Subview olun. - RoundRectView en sınırlarının olarak yerleştirilir birkaç piksel etiketin çerçevesini ayarlayın. (Örneğin,
label.frame = CGRectInset(roundRectView.bounds, 8, 8);)
Eğer genel bir UIView oluşturmak ve daha sonra denetçisini kullanarak kendi sınıfını değiştirirseniz Interface Builder kullanarak bir görünümde RoundRectView yerleştirebilirsiniz. Eğer derleyip uygulamanızı çalıştırmak kadar dikdörtgen görmezsiniz, ama en azından subview yerleştirin ve gerekirse çıkışları veya eylemlerine bağlamak mümkün olacak.
iOS 7.1 veya daha yeni olan cihazlarda, eklemek gerekir:
yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;
Swift iOS8 için itibaren OScarsWyck Yanıta göre:
yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0
Bu şekilde herhangi bir kontrolün sınırının genişliğinde yuvarlak sınır yapabilirsiniz: -
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]];
Sadece yerine lblNameparmağınızı ile UILabel.
Not: - ithal etmeyi unutmayın<QuartzCore/QuartzCore.h>
- Bir var
UILabelseslendi:myLabel. - senin "m" veya "h" dosya ithalat:
#import <QuartzCore/QuartzCore.h> sizin de
viewDidLoadyazma bu satırı:self.myLabel.layer.cornerRadius = 8;- Eğer başka bir numara 8'den CornerRadius değerini değiştirebilir istiyorum nasıl bağlıdır :)
İyi şanslar
Xcode 7.3.1 iOS 9.3.2
_siteLabel.layer.masksToBounds = true;
_siteLabel.layer.cornerRadius = 8;
Diğer bir yöntem UILabel arkasında bir png yerleştirmektir. Ben bireysel etiketler için tüm sanat vardır tek bir arka plan png bindirmek birkaç etiketlerle görüşlere sahip.
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
label.text = @"Your String.";
label.layer.cornerRadius = 8.0;
[self.view addSubview:label];
Ben hızlı bir yapılan UILabelbu etkiyi elde etmek için alt sınıf. Ayrıca otomatik olarak siyah ya da maksimal kontrast için beyaz ya metin rengini ayarlayın.
Sonuç
Kullanılan SO-Mesajlar:
- Nasıl bir UILabel etrafında sınır çizmek?
- Bir UIView dışında kenarlık ekleme
- UIColor karanlık veya parlak olup olmadığını kontrol edin?
Oyun alanı
Sadece iOS Oyun yapıştırabilirsiniz:
//: 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())
AĞUSTOS 2017 döneminde Swift 3, test edilmiş olan Xcode 8.1.2 ince Works
"CornerRadius" Eğer uygulamadaki tüm etiketler için aynı stili kullanıyorsanız yuvarlak kenarları, ayarlamak için anahtar bir özelliktir, ben bir uzantısı yöntemi için öneriyoruz.
Kod:
// 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
}
}
Çıktı:
Neden Uzatma yöntemi?
Bu yöntem kullanıcı tanımlı ama eğer uygulamanızda tüm etiket için çalışacak ve tutarlılığı ve temiz kod korumak için yardımcı olacaktır "UILabel" sınıfına İnfertilite yöntemi vardır şu kod, bir Swift dosyası oluşturun ve ekleyin gelecekte herhangi stilini değiştirmek sadece uzatma yönteminde gerektirir.
MonoTouch / Xamarin.iOS ben böyle aynı sorunu çözüldü:
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;
Kullandığınız denedin mi UIButtonArayüz oluşturucudaki (yani yuvarlak köşeli) ve ayarlarla denemeler bir etiket gibi görünmesi için. İstediğin içinde statik metni görüntülemek için ise.
Swift 3
Eğer arka plan rengiyle yuvarlak etiketi istiyorsanız, diğer cevapların çoğuna ek olarak, ayarlamanız gerekir layeryanı 'ın arka plan rengini. Ayarlarken O çalışmıyor viewarka plan rengini.
label.layer.cornerRadius = 8
label.layer.masksToBounds = true
label.layer.backgroundColor = UIColor.lightGray.cgColor
Otomatik düzenini kullanıyorsanız, etiket çevresindeki bazı dolgu istiyor ve elle etiketin boyutunu ayarlamak istemiyorum, sen UILabel alt sınıfı oluşturmak ve geçersiz kılabilirsiniz intrinsincContentSizeözelliği:
class LabelWithPadding: UILabel {
override var intrinsicContentSize: CGSize {
let defaultSize = super.intrinsicContentSize
return CGSize(width: defaultSize.width + 12, height: defaultSize.height + 8)
}
}
Iki birleştirmek için ayrıca ayarlamanız gerekir label.textAlignment = centeraksi metin hizalanmış kalırdı.
Swift 2.0 mükemmel çalışır
@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
}
size tam olarak ne yaptığını bağlı bir resim yapması ve programlama arka plan olarak ayarlayabilirsiniz.

















