UILabelの周りに境界線を描く方法は?


140

UILabel自体の周りに境界線を描画する方法はありますか?これは、テキストの配置をデバッグし、配置と実際のラベルの大きさを確認するのに役立ちます。

回答:


260

基礎となるCALayerプロパティを介してラベルの境界線を設定できます。

#import <QuartzCore/QuartzCore.h>

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

スウィフト5:

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

2
彼らは唯一のSDK 3.0を起動可能なだ:(あなたが目的をデバッグするためだけの迅速な解決を望むなら、あなたはあなたのラベルのための半透明色の背景を設定することができます。
ウラジミール

36
コンパイラーが文句を言うなら、あなたはおそらく忘れていました#import <QuartzCore/QuartzCore.h>
Stefan Arentz '22

1
@Vladimirこのソリューションは、ラベルのすべての側面に境界線を追加します。ラベルの右側のみに境界線を追加できますか???
chinthakad 2012

1
@chinthakad、いいえ。そのためのカスタム描画を備えたカスタムラベルサブクラスが必要になると思います
ウラジミール

3
スウィフトの最初の行は次のようになります。myLabel.layer.borderColor = UIColor.greenColor().CGColor
ジャンケン

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
どのようにしてこれらのパディングを取得できましたか?私のテキストは境界線に触れています...
eestein

1
@eestein、インターフェイスビルダーでラベルサイズを大きくドラッグしただけだと思います。または、それらにサイズ制限を設定した可能性があります。
Suragch 2016年

19

Swiftバージョン:

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 2015年

7

@IBDesignableを使用したSwift 3/4


上記のソリューションのほとんどすべてが正常に動作しますが@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 in 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

Swift 4のソリューション:

yourLabel.layer.borderColor = UIColor.green.cgColor


0

それは実際にビューで使用するボーダーの数に依存します。時には、ボーダーを作成するためにサイズが少し大きいUIVIEWを追加するだけです。この方法はビューを作成するよりも高速です


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.