Bagaimana cara membuat UILabel yang terpojok di iPhone?

Apakah ada cara yang dibuat untuk membuat UILabel yang terpojok? Jika jawabannya tidak, bagaimana cara membuat objek seperti itu?

iOS 3.0 dan yang lebih baru

iPhone OS 3.0 dan yang lebih baru mendukung cornerRadiusproperti di CALayerkelasnya. Setiap tampilan memiliki CALayerinstance yang dapat Anda manipulasi. Ini berarti Anda bisa mendapatkan sudut bulat dalam satu baris:

view.layer.cornerRadius = 8;

Anda perlu #import <QuartzCore/QuartzCore.h>dan menautkan ke kerangka kerja QuartzCore untuk mendapatkan akses ke header dan properti CALayer.

Sebelum iOS 3.0

Salah satu cara untuk melakukannya, yang saya gunakan baru-baru ini, adalah membuat subclass UIView yang hanya menggambar persegi panjang bulat, dan kemudian membuat UILabel atau, dalam kasus saya, UITextView, subview di dalamnya. Secara khusus:

1. Buat UIViewsubkelas dan beri nama seperti itu RoundRectView.
2. Dalam RoundRectView's drawRect:metode, menggambar jalan di sekitar batas-batas pandangan menggunakan panggilan Graphics Core seperti CGContextAddLineToPoint () untuk tepi dan dan CGContextAddArcToPoint () untuk sudut bulat.
3. Buat UILabelinstance dan menjadikannya subview dari RoundRectView.
4. Atur bingkai label menjadi inset beberapa piksel dari batas RoundRectView. (Misalnya, label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

Anda bisa menempatkan RoundRectView pada tampilan menggunakan Interface Builder jika Anda membuat UIView umum dan kemudian mengubah kelasnya menggunakan inspektur. Anda tidak akan melihat kotak sampai Anda mengkompilasi dan menjalankan aplikasi Anda, tetapi setidaknya Anda akan dapat menempatkan subview dan menghubungkannya ke outlet atau tindakan jika diperlukan.

Untuk perangkat dengan iOS 7.1 atau yang lebih baru, Anda perlu menambahkan:

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

Untuk Swift IOS8 dan selanjutnya berdasarkan jawaban OScarsWyck:

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

1. Anda memiliki UILabelyang disebut: myLabel.
2. dalam impor file "m" atau "h" Anda: #import <QuartzCore/QuartzCore.h>

3. di viewDidLoadbaris Anda tulis ini:self.myLabel.layer.cornerRadius = 8;

   • tergantung pada bagaimana Anda mau, Anda dapat mengubah nilai cornerRadius dari 8 ke nomor lain :)

Semoga berhasil

Anda dapat membuat batas bulat dengan lebar batas kontrol apa pun dengan cara ini: -

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]];

Ganti saja lblNamedengan UILabel.

Catatan: - Jangan lupa untuk mengimpor<QuartzCore/QuartzCore.h>

Saya membuat UILabelsubclass cepat untuk mencapai efek ini. Selain itu saya secara otomatis mengatur warna teks menjadi hitam atau putih untuk kontras maksimal.

Hasil

Posting SO yang Digunakan:

• Bagaimana cara menggambar perbatasan di sekitar UILabel?
• Tambahkan perbatasan di luar UIView
• Periksa apakah UIColor gelap atau cerah?

Tempat bermain

Cukup tempel ini ke Playground 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())

Metode lain adalah menempatkan png di belakang label UIL. Saya memiliki pandangan dengan beberapa label yang menampilkan png latar belakang tunggal yang memiliki semua karya seni untuk masing-masing label.

xCode 7.3.1 iOS 9.3.2

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

Jika Anda ingin sudut bulat dari UI objek seperti ( UILabel, UIView, UIButton, UIImageView) oleh storyboard kemudian menetapkan clip to boundsbenar dan mengatur User Defined Runtime Attributesjalur Key sebagai layer.cornerRadius, jenis = Jumlah dan nilai = 9 (sebagai kebutuhan Anda)

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

Cepat 3

Jika Anda ingin label bulat dengan warna latar belakang, selain sebagian besar jawaban lain, Anda perlu mengatur layerwarna latar belakang juga. Ini tidak berfungsi saat mengatur viewwarna latar belakang.

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

Jika Anda menggunakan tata letak otomatis, ingin beberapa lapisan di sekitar label dan tidak ingin mengatur ukuran label secara manual, Anda dapat membuat UILabel subclass dan menimpa intrinsincContentSizeproperti:

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

Untuk menggabungkan keduanya, Anda juga perlu mengatur label.textAlignment = center, jika tidak, teks akan dibiarkan rata.

Di Monotouch / Xamarin.iOS saya memecahkan masalah yang sama seperti ini:

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;

Berfungsi sempurna di 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

    }

Apakah Anda mencoba menggunakan UIButtondari pembuat antarmuka (yang memiliki sudut membulat) dan bereksperimen dengan pengaturan untuk membuatnya terlihat seperti label. jika yang Anda inginkan adalah menampilkan teks statis di dalamnya.

Bekerja dengan baik di Xcode 8.1.2 dengan Swift 3, Diuji selama AGUSTUS 2017

"cornerRadius" adalah properti utama untuk mengatur ujung membulat, di mana jika Anda menggunakan gaya yang sama untuk semua label dalam aplikasi Anda, saya akan merekomendasikan metode ekstensi.

Kode:

 // 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
    }
}

Keluaran:

Mengapa Perlu Metode Ekstensi?

Buat file Swift dan tambahkan kode berikut, yang memiliki metode Extention ke kelas "UILabel", di mana metode ini ditentukan pengguna tetapi akan bekerja untuk semua label dalam aplikasi Anda dan akan membantu menjaga konsistensi dan membersihkan kode, jika Anda mengubah gaya apa pun di masa depan hanya membutuhkan metode ekstensi.

Tergantung pada apa yang sebenarnya Anda lakukan, Anda dapat membuat gambar dan mengaturnya sebagai latar belakang secara terprogram.