Bagaimana cara membuat UILabel yang terpojok di iPhone?


Jawaban:


229

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.


1
view.layer.cornerRadius masih menarik seluruh tampilan (bukan layar saat diaktifkan) dan hanya pada lapisan CoreAnimation akan memotong tampilan Anda. Biayanya adalah membuat tampilan apa pun dengan itu diaktifkan di UIScrollView, bunuh kinerja pengguliran Anda.
Zac Bowling

Menggunakan cornerRadius di dalam UIScrollView akan mematikan kinerja pengguliran Anda? Saya mungkin percaya Anda jika kita berbicara tentang UITableView, tetapi tampilan sudut bulat tunggal tidak akan menggiling sistem menggambar tampilan berhenti.
benzado

20
Jika Anda ingin melakukan ini di Interface Builder alih-alih kode, Anda dapat mengatur Atribut Runtime yang Ditentukan Pengguna dengan jalur utama "layer.cornerRadius" di Identity Inspector.
Chris Vasselli

141

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

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

3
Atur radius sudut tetapi masksToBounds lambat untuk bergulir / animasi. Jika Anda mengatur warna latar belakang layer vs tampilan yang cukup bersama dengan layer cornerRadius pada 7.1 (di mana ia akan berhenti bekerja dengan hanya cornerRadius).
Aaron Zinman

22

Untuk Swift IOS8 dan selanjutnya berdasarkan jawaban OScarsWyck:

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

15
Tolong jangan mengacaukan Stack Overflow dengan terjemahan jawaban Objective-C ke Swift, terutama ketika satu-satunya perubahan dalam kasus ini berubah YESmenjadi true.
mluisbrown

7
Perubahan dalam kasus ini minimal, tetapi sebagai terjemahan titik umum dari Objective-C ke Swift sering sangat berguna.
CKP78

1
Bagaimana dengan mengedit jawaban asli dan menambahkan terjemahan Swift di sana?
Marián Černý

11
  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


11

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>


7

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

Hasil

perbatasan warna-bundar

Posting SO yang Digunakan:

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

6

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.


6

xCode 7.3.1 iOS 9.3.2

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

6

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)

Atur klip ke batas sebagai Tetapkan Atribut Runtime Buatan Pengguna sebagai


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

3

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.


2

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;

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

    }

2

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.


2

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:

masukkan deskripsi gambar di sini

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.


0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.