İPhone'da yuvarlak köşeli UILabel'i nasıl oluştururum?

Yuvarlak köşeli UILabel'ler oluşturmak için yerleşik bir yol var mı? Cevap hayırsa, böyle bir nesne nasıl yaratılır?

iOS 3.0 ve üstü

iPhone OS 3.0 ve üzeri cornerRadius, CALayersınıftaki özelliği destekler . Her görünümde değiştirebileceğiniz bir CALayerörnek vardır. Bu, bir satırda yuvarlatılmış köşeler alabileceğiniz anlamına gelir:

view.layer.cornerRadius = 8;

#import <QuartzCore/QuartzCore.h>CALayer başlıklarına ve özelliklerine erişmek için QuartzCore çerçevesine bağlanmanız ve bağlantı kurmanız gerekir .

İOS 3.0'dan önce

Son zamanlarda kullandığım bir yol, sadece yuvarlak bir dikdörtgen çizen bir UIView alt sınıfı oluşturmak ve daha sonra UILabel veya benim durumumda içinde bir alt görünüm yapmaktır. özellikle:

1. Bir UIViewalt sınıf oluşturun ve buna benzer bir ad verin RoundRectView.
2. Gelen RoundRectViewbireyin drawRect:yöntemi, yuvarlak köşeler için kenarları ve ve CGContextAddArcToPoint () için CGContextAddLineToPoint gibi Çekirdek Grafik çağrı üzerinden, sınırları () etrafında bir yol çizer.
3. Bir UILabelörnek oluşturun ve onu RoundRectView öğesinin alt görünümü yapın.
4. Etiketin çerçevesini RoundRectView sınırlarına birkaç piksel ek olacak şekilde ayarlayın. (Örneğin, label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

Genel bir UIView oluşturursanız ve ardından denetçiyi kullanarak sınıfını değiştirirseniz, RoundRectView'ü Interface Builder'ı kullanarak bir görünüme yerleştirebilirsiniz. Uygulamanızı derleyene ve çalışana kadar dikdörtgeni görmezsiniz, ancak en azından alt görünümü yerleştirebilir ve gerekirse çıkışlara veya eylemlere bağlayabilirsiniz.

İOS 7.1 veya daha yenisine sahip cihazlar için şunları eklemeniz gerekir:

yourUILabel.layer.masksToBounds = YES;
yourUILabel.layer.cornerRadius = 8.0;

Swift IOS8'den itibaren OScarsWyck cevabını temel alan:

yourUILabel.layer.masksToBounds = true
yourUILabel.layer.cornerRadius = 8.0

1. Bir var UILabelseslendi: myLabel.
2. "m" veya "h" dosya içe aktarma işleminizde: #import <QuartzCore/QuartzCore.h>

3. sizin de viewDidLoadyazma bu satırı:self.myLabel.layer.cornerRadius = 8;

   • cornerRadius değerini 8'den başka bir sayıya nasıl değiştirmek istediğinize bağlıdır :)

İyi şanslar

Bu şekilde herhangi bir kontrolün kenarlık genişliği ile yuvarlak kenarlık 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: - İçe aktarmayı unutmayın<QuartzCore/QuartzCore.h>

UILabelBu etkiyi elde etmek için hızlı bir alt sınıf yaptım . Ayrıca, maksimum kontrast için metin rengini otomatik olarak siyah veya beyaz olarak ayarladım.

Sonuç

Kullanılan SO-Gönderiler:

• UILabel çevresine nasıl sınır çizilir?
• UIView dışına kenarlık ekleme
• UIColor'un koyu veya parlak olup olmadığını kontrol edin?

Oyun alanı

Bunu bir iOS Oyun Alanına yapıştırın:

//: 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())

Başka bir yöntem UILabel arkasına bir png yerleştirmektir. Tek tek etiketler için tüm sanat eserleri içeren tek bir arka plan png bindiren birkaç etiketli görünümler var.

xCode 7.3.1 iOS 9.3.2

 _siteLabel.layer.masksToBounds = true;
  _siteLabel.layer.cornerRadius = 8;

İsterseniz UI yuvarlak köşe gibi nesneleri ( UILabel, UIView, UIButton, UIImageView) storyboard tarafından daha sonra belirlenen clip to boundsgerçek ve set User Defined Runtime Attributesgibi önemli yolu layer.cornerRadius(gereği olarak) type = Number ve değer = 9,

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 30)];
    label.text = @"Your String.";
    label.layer.cornerRadius = 8.0;
    [self.view addSubview:label];

Hızlı 3

Arka plan rengine sahip yuvarlak etiket istiyorsanız, diğer yanıtların çoğuna ek olarak, layerarka plan rengini de ayarlamanız gerekir . viewArka plan rengini ayarlarken çalışmaz .

label.layer.cornerRadius = 8
label.layer.masksToBounds = true
label.layer.backgroundColor = UIColor.lightGray.cgColor

Otomatik mizanpaj kullanıyorsanız, etiketin çevresinde biraz dolgu olmasını ve etiketin boyutunu manuel olarak ayarlamak istemiyorsanız UILabel alt sınıfını oluşturabilir ve intrinsincContentSizeözelliği geçersiz kılabilirsiniz :

class LabelWithPadding: UILabel {
    override var intrinsicContentSize: CGSize {
        let defaultSize = super.intrinsicContentSize
        return CGSize(width: defaultSize.width + 12, height: defaultSize.height + 8)
    }
}

İkisini birleştirmek için de ayarlamanız gerekir label.textAlignment = center, aksi takdirde metin sola hizalanır.

Monotouch / Xamarin.iOS da aynı sorunu şu şekilde çözdüm:

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;

Swift 2.0'da 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

    }

Kullandığınız denedin mi UIButton(yuvarlatılmış köşeler vardır) Arayüz oluşturucudaki ve ayarlarla denemeler bir etiket gibi görünmesi için. İstediğiniz tek şey içinde statik metin görüntülemekse.

AĞUSTOS 2017 sırasında test edilen Swift 3 ile Xcode 8.1.2'de iyi çalışıyor

"cornerRadius" yuvarlatılmış kenarları ayarlamak için anahtar özelliktir, burada uygulamanızdaki tüm etiketler için aynı stili kullanıyorsanız, bir uzantı yöntemi için tavsiye ederim.

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 Genişletme yöntemi?

Bir Swift dosyası oluşturun ve "UILabel" sınıfına Extention yöntemi olan aşağıdaki kodu ekleyin, burada bu yöntem kullanıcı tanımlıdır, ancak uygulamanızdaki tüm etiket için çalışır ve tutarlılık ve temiz kodun korunmasına yardımcı olur. ileride herhangi bir stili değiştirmek sadece uzatma yönteminde gerektirir.

Tam olarak ne yaptığınıza bağlı olarak, bir görüntü oluşturabilir ve programlı olarak arka plan olarak ayarlayabilirsiniz.