Jak narysować ramkę wokół UILabel?


140

Czy istnieje sposób, aby UILabel narysował wokół siebie granicę? Jest to przydatne dla mnie do debugowania umiejscowienia tekstu i sprawdzenia miejsca docelowego oraz faktycznej wielkości etykiety.

Odpowiedzi:


260

Możesz ustawić obramowanie etykiety za pomocą jej podstawowej właściwości 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
są dostępne dopiero od wersji SDK 3.0 :( Jeśli potrzebujesz tylko szybkiego rozwiązania do debugowania, możesz ustawić półprzezroczyste kolorowe tło dla swojej etykiety.
Vladimir,

36
Jeśli kompilator narzeka, to prawdopodobnie zapomniałeś#import <QuartzCore/QuartzCore.h>
Stefan Arentz,

1
@Vladimir To rozwiązanie polega na dodaniu obramowania ze wszystkich boków etykiety. Czy możemy dodać obramowanie tylko po prawej stronie etykiety ???
chinthakad

1
@chinthakad, no. Myślę, że do tego potrzebna będzie podklasa niestandardowej etykiety z niestandardowym rysunkiem
Vladimir,

3
W Swift pierwsza linijka brzmiałaby:myLabel.layer.borderColor = UIColor.greenColor().CGColor
Roshambo

71

Oto kilka rzeczy, które możesz zrobić z UILabeljego granicami.

wprowadź opis obrazu tutaj

Oto kod tych etykiet:

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

Zauważ, że w Swift nie ma potrzeby importowania QuartzCore.

Zobacz też


1
Jak udało ci się zdobyć te obicia? Mój tekst dotyka granic ...
eestein

1
@eestein, myślę, że właśnie przeciągnąłem rozmiar etykiety w programie Interface Builder. Albo mogłem ustawić dla nich ograniczenia rozmiaru.
Suragch

19

Wersja Swift:

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

Dla Swift 3:

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

1
będziemyLabel.layer.borderColor = UIColor.blackColor().CGColor!
Shruti

7

Swift 3/4 z @IBDesignable


Prawie wszystkie powyższe rozwiązania działają dobrze, ale sugerowałbym do tego @IBDesignableniestandardową klasę.

@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

Możesz użyć tego repozytorium: GSBorderLabel

To całkiem proste:

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

Dotyczy to obramowania wokół rzeczywistych znaków w tekście, pytanie dotyczy obramowań wokół prostokąta, w którym znajduje się tekst.
jjxtra

1

Właściwości UILabel borderColor, borderWidth, cornerRadius w języku 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
}

1

Rozwiązanie dla Swift 4:

yourLabel.layer.borderColor = UIColor.green.cgColor


0

to naprawdę zależy od tego, ile osób używa granic w Twoim widoku, czasami po prostu dodaj UIVIEW, którego rozmiar jest nieco większy, aby utworzyć obramowanie. metoda jest szybsza niż tworzenie widoku


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.