Як створити круглий кутовий UILabel на iPhone?

Чи є вбудований спосіб створення круглокутних UILabels? Якщо відповідь «ні», як би ви могли створити такий об’єкт?

iOS 3.0 та новіших версій

iPhone OS 3.0 і пізніших версій підтримує cornerRadiusвластивість CALayerкласу. Кожен вид має CALayerекземпляр, яким ви можете маніпулювати. Це означає, що ви можете отримати закруглені кути в одному рядку:

view.layer.cornerRadius = 8;

Вам потрібно буде #import <QuartzCore/QuartzCore.h>Для отримання доступу до заголовків та властивостей CALayer вам зв’язатися з рамкою QuartzCore.

До iOS 3.0

Один із способів зробити це, який я нещодавно використовував, - це створити підклас UIView, який просто малює округлий прямокутник, а потім робить UILabel або, в моєму випадку, UITextView, підперегляд всередині нього. Конкретно:

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

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

Для пристроїв із iOS 7.1 або новішою версією потрібно додати:

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

Для Swift IOS8 на основі відповіді OScarsWyck:

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

1. у вас є UILabelпід назвою: myLabel.
2. в імпорті файлів "m" або "h": #import <QuartzCore/QuartzCore.h>

3. у вашому viewDidLoadзаписі цього рядка:self.myLabel.layer.cornerRadius = 8;

   • залежить від того, як ви хочете, ви можете змінити значення cornerRadius з 8 на інше число :)

Удачі

Ви можете зробити закруглену межу з шириною межі будь-якого елемента управління таким чином: -

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>

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

Результат

Використані повідомлення SO:

• Як намалювати межу навколо UILabel?
• Додайте рамку поза UIView
• Перевірте, чи UIColor темний чи світлий?

Ігровий майданчик

Просто вставте це в майданчик для 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())

Інший метод - розмістити png за UILabel. У мене перегляди з декількома мітками, які накладають один фон png, який містить усі ілюстрації для окремих міток.

xCode 7.3.1 iOS 9.3.2

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

Якщо ви хочете , закруглений кут призначеного для користувача інтерфейсу об'єкти , такі як ( UILabel, UIView, UIButton, UIImageView) з допомогою розкадровки потім встановити clip to boundsістинні і встановити User Defined Runtime Attributesключ шлях як layer.cornerRadius, тип = Число і значення = 9 (як ваша вимога)

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

Швидкий 3

Якщо ви хочете округлу мітку з кольором тла, крім більшості інших відповідей, вам також потрібно встановити layerколір тла. Це не працює при встановленні viewкольору фону.

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

Якщо ви використовуєте автоматичний макет, хочете трохи замінити навколо мітки і не хочете встановлювати розмір мітки вручну, ви можете створити підклас UILabel і змінити intrinsincContentSizeвластивість:

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

Щоб поєднати два, вам також потрібно буде встановити label.textAlignment = center, інакше текст залишиться вирівняним.

У Monotouch / Xamarin.iOS я вирішив ту саму проблему, як ця:

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

    @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

    }

Ви спробували скористатися UIButtonвід конструктора інтерфейсу (який має закруглені кути) та експериментували з налаштуваннями, щоб він виглядав як мітка. якщо все, що вам потрібно, це відображення статичного тексту всередині.

Чудово працює в Xcode 8.1.2 за допомогою Swift 3, випробуваний під час серпня 2017 року

"cornerRadius" є ключовою властивістю встановити закруглені краї, де, якщо ви використовуєте однаковий стиль для всіх міток у вашій програмі, я рекомендував би метод розширення.

Код:

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

Вихід:

Чому метод розширення?

Створіть файл Swift та додайте наступний код, у якому є метод Extention до класу "UILabel", де цей метод визначений користувачем, але він буде працювати для всіх міток у вашій програмі та допоможе зберегти послідовність та чистий код, якщо ви змінити будь-який стиль в майбутньому потрібно лише в методі розширення.

Залежно від того, що саме ви робите, ви можете створити зображення і встановити його як фоновий режим програмно.