Как создать UILabel с круглыми углами на iPhone?

Question

Есть ли способ создания UILabels с закругленными углами? Если ответ «нет», как можно было бы создать такой объект?

Answer 1

iOS 3.0 и более поздние версии

iPhone OS 3.0 и более поздние версии поддерживают свойство cornerRadius класса CALayer. Каждое представление имеет экземпляр CALayer, которым вы можете манипулировать. Это означает, что вы можете получить закругленные углы в одну строку:

view.layer.cornerRadius = 8;

Вам потребуется #import <QuartzCore/QuartzCore.h> и ссылка на платформу QuartzCore, чтобы получить доступ к заголовкам и свойствам CALayer.

До iOS 3.0

Одним из способов сделать это, который я недавно использовал, является создание подкласса UIView, который просто рисует скругленный прямоугольник, а затем создание UILabel или, в моем случае, UITextView, внутри него. В частности:

1. Создайте UIView подкласс и назовите его как RoundRectView.
2. В методе RoundRectView drawRect: нарисуйте контур вокруг границ представления, используя вызовы Core Graphics, например CGContextAddLineToPoint () для краев и CGContextAddArcToPoint () для закругленных углов.
3. Создайте UILabel экземпляр и сделайте его подпредставлением RoundRectView.
4. Установите рамку метки на несколько пикселей от границ RoundRectView. (Например, label.frame = CGRectInset(roundRectView.bounds, 8, 8);)

Вы можете поместить RoundRectView в представление с помощью Interface Builder, если вы создадите универсальный UIView, а затем измените его класс с помощью инспектора. Вы не увидите прямоугольник до тех пор, пока не скомпилируете и не запустите свое приложение, но, по крайней мере, сможете разместить подпредставление и при необходимости подключить его к розеткам или действиям.

Answer 2

Для устройств с iOS 7.1 или новее необходимо добавить:

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

Answer 3

Для Swift IOS8 и выше на основе ответа OScarsWyck:

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

Answer 4

Вы можете сделать закругленную границу с шириной границы любого элемента управления следующим образом: -

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

Просто замените lblName на UILabel.

Примечание: - Не забудьте импортировать <QuartzCore/QuartzCore.h>

Answer 5

1. у вас есть UILabel, который называется: myLabel.
2. в вашем импортируемом файле "m" или "h": #import <QuartzCore/QuartzCore.h>

3. в вашем viewDidLoad напишите эту строку: self.myLabel.layer.cornerRadius = 8;

   • зависит от того, как вы хотите изменить значение cornerRadius с 8 на другое число:)

Удачи

Answer 6

xCode 7.3.1 iOS 9.3.2

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

Answer 7

Другой метод - поместить png за UILabel. У меня есть представления с несколькими метками, которые перекрывают один фоновый png, в котором есть все изображения для отдельных меток.

Answer 8

Я создал быстрый подкласс UILabel для достижения этого эффекта. Кроме того, я автоматически устанавливаю цвет текста на черный или белый для максимальной контрастности.

Результат

Используемые SO-сообщения:

• Как нарисовать границу вокруг UILabel?
• Добавить границу за пределами UIView
• Проверьте, является ли UIColor темным или светлым?

Детская площадка

Просто вставьте это в 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())

Answer 9

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

Answer 10

Если вы хотите, чтобы закругленный угол объектов пользовательского интерфейса, таких как (UILabel, UIView, UIButton, UIImageView) по раскадровке, установите clip to bounds true и установите User Defined Runtime Attributes Key path as layer.cornerRadius, тип = число и значение = 9 (как ваше требование)