Как нарисовать границу вокруг UILabel?


145

Есть ли способ для UILabel нарисовать границу вокруг себя? Это полезно для меня, чтобы отладить размещение текста и увидеть размещение и размер метки на самом деле.

Ответы:


266

Вы можете установить границу метки через его базовое свойство CALayer:

#import <QuartzCore/QuartzCore.h>

myLabel.layer.borderColor = [UIColor greenColor].CGColor
myLabel.layer.borderWidth = 3.0

Swift 5:

myLabel.layer.borderColor = UIColor.darkGray.cgColor
myLabel.layer.borderWidth = 3.0

2
они доступны только начиная с SDK 3.0 :( Если вам нужно просто быстрое решение для отладки, вы можете установить полупрозрачный цветной фон для своей метки.
Владимир

36
Если компилятор жалуется, значит, вы, вероятно, забыли об этом#import <QuartzCore/QuartzCore.h>
Стефан Арентц

1
@Vladimir Это решение добавляет границу ко всем сторонам этикетки. Можно ли добавить границу только с правой стороны метки ???
chinthakad

1
@chinthakad, нет. Думаю, для этого вам понадобится подкласс custom label с индивидуальным рисунком
Владимир

3
В Swift первая строка будет гласить:myLabel.layer.borderColor = UIColor.greenColor().CGColor
Roshambo

71

Вот некоторые вещи, с которыми вы можете сделать, UILabelи его границы.

введите описание изображения здесь

Вот код этих ярлыков:

import UIKit
class ViewController: UIViewController {

    @IBOutlet weak var label1: UILabel!
    @IBOutlet weak var label2: UILabel!
    @IBOutlet weak var label3: UILabel!
    @IBOutlet weak var label4: UILabel!
    @IBOutlet weak var label5: UILabel!
    @IBOutlet weak var label6: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

        // label 1
        label1.layer.borderWidth = 1.0

        // label 2
        label2.layer.borderWidth = 5.0
        label2.layer.borderColor = UIColor.blue.cgColor

        // label 3
        label3.layer.borderWidth = 2.0
        label3.layer.cornerRadius = 8

        // label 4
        label4.backgroundColor = UIColor.cyan

        // label 5
        label5.backgroundColor = UIColor.red
        label5.layer.cornerRadius = 8
        label5.layer.masksToBounds = true

        // label 6
        label6.layer.borderWidth = 2.0
        label6.layer.cornerRadius = 8
        label6.backgroundColor = UIColor.yellow
        label6.layer.masksToBounds = true
    }
}

Обратите внимание, что в Swift нет необходимости импортировать QuartzCore.

Смотрите также


1
Как вам удалось получить эти набивки? Мой текст касается границ ...
Эстейн

1
@eestein, я думаю, я просто перетащил размер метки больше в Интерфейсном Разработчике. Или я мог бы установить для них ограничения по размеру.
Suragch

19

Быстрая версия:

myLabel.layer.borderWidth = 0.5
myLabel.layer.borderColor = UIColor.greenColor().CGColor

Для Swift 3:

myLabel.layer.borderWidth = 0.5
myLabel.layer.borderColor = UIColor.green.cgColor

1
это будетmyLabel.layer.borderColor = UIColor.blackColor().CGColor!
Shruti

8

Swift 3/4 с @IBDesignable


Хотя почти все вышеперечисленные решения работают нормально, я бы предложил @IBDesignableдля этого специальный класс.

@IBDesignable
class CustomLabel: UILabel {

    /*
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
    }
    */

    @IBInspectable var borderColor: UIColor = UIColor.white {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable var borderWidth: CGFloat = 2.0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }
}

2

Вы можете использовать это репо: GSBorderLabel

Это довольно просто:

GSBorderLabel *myLabel = [[GSBorderLabel alloc] initWithTextColor:aColor
                                                     andBorderColor:anotherColor
                                                     andBorderWidth:2];

Это касается границы вокруг реальных символов в тексте, вопрос касается границ вокруг прямоугольника, в котором содержится текст.
jjxtra

1

Свойства UILabel borderColor, borderWidth, cornerRadius в Swift 4

@IBOutlet weak var anyLabel: UILabel!
   override func viewDidLoad() {
        super.viewDidLoad()
        anyLabel.layer.borderColor = UIColor.black.cgColor
        anyLabel.layer.borderWidth = 2
        anyLabel.layer.cornerRadius = 5
        anyLabel.layer.masksToBounds = true
}


0

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.