วิธีการวาดเส้นขอบรอบ ๆ 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 :( หากคุณต้องการเพียงวิธีแก้ปัญหาอย่างรวดเร็วสำหรับการแก้ไขจุดบกพร่องคุณสามารถตั้งค่าพื้นหลังสีกึ่งโปร่งใสสำหรับฉลากของคุณได้
Vladimir

36
หากคอมไพเลอร์บ่นคุณคงลืมไปแล้ว#import <QuartzCore/QuartzCore.h>
Stefan Arentz

1
@Vladimir โซลูชันนี้กำลังเพิ่มเส้นขอบให้กับทุกด้านของฉลาก เราสามารถเพิ่มเส้นขอบด้านขวาของป้ายกำกับได้หรือไม่?
chinthakad

1
@chinthakad หมายเลข ฉันคิดว่าคุณจะต้องมีคลาสย่อยของป้ายกำกับที่กำหนดเองพร้อมรูปวาดที่กำหนดเอง
Vladimir

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

QuartzCoreโปรดสังเกตว่าในสวิฟท์มีความจำเป็นต้องนำเข้าไม่มี

ดูสิ่งนี้ด้วย


1
คุณจะได้รับแผ่นเหล่านั้นได้อย่างไร? ข้อความของฉันแตะกับเส้นขอบ ...
eestein

1
@ eestin ฉันคิดว่าฉันเพิ่งลากขนาดป้ายกำกับที่ใหญ่กว่าในเครื่องมือสร้างส่วนต่อประสาน หรือฉันอาจมีข้อ จำกัด เกี่ยวกับขนาดที่ตั้งไว้
Suragch

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

7

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

คุณสามารถใช้ repo นี้: 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 ซึ่งขนาดใหญ่ขึ้นเล็กน้อยเพื่อสร้างเส้นขอบ วิธีนี้เร็วกว่าการสร้างมุมมอง


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.