วิธีการตั้งค่าสีเส้นขอบที่กำหนดเองของ UIView โดยทางโปรแกรม?


102

ฉันพยายามตั้งค่าสีเส้นขอบที่กำหนดเองของ UIView แบบเป็นโปรแกรมใน Swift


3
แสดงรหัสที่เกี่ยวข้องในคำถามของคุณ อธิบายว่าคุณประสบปัญหาอะไร
rmaddy

1
สำเนาของCocoa Touch ที่เป็นไปได้: จะเปลี่ยนสีและความหนาของเส้นขอบของ UIView ได้อย่างไร? คุณต้องใช้มันอย่างรวดเร็ว
Inder Kumar Rathore

คำตอบ:


204

หากคุณใช้ Swift 2.0+

self.yourView.layer.borderWidth = 1
self.yourView.layer.borderColor = UIColor(red:222/255, green:225/255, blue:227/255, alpha: 1).cgColor

หมายเหตุ: สิ่งนี้ดูเหมือนจะไม่ได้ผลสำหรับฉัน (อาจเป็นเพราะฉันใช้ Swift 3.1?) เวอร์ชันParas Joshi's ( stackoverflow.com/a/29701061/225813 ) ใช้งานได้
Ashley Coolman

ฉันแก้ไขคำตอบของฉัน แน่นอนว่าจะได้ผลสำหรับคุณ .. Ashley Coolman
Shashi Verma

2
คุณไม่จำเป็นต้องเรียก init อย่างชัดเจนใน swift 3
ibrahimab

เป็นไปได้ไหมที่จะใช้มากกว่าหนึ่งสี?
GökhanÇokkeçeci

4
มีความแตกต่างระหว่างสองเวอร์ชันของคุณหรือไม่?
Fogmeister

89

ในSwift 4คุณสามารถตั้งค่าสีและความกว้างของเส้นขอบเป็น UIControls โดยใช้โค้ดด้านล่าง

let yourColor : UIColor = UIColor( red: 0.7, green: 0.3, blue:0.1, alpha: 1.0 )
yourControl.layer.masksToBounds = true
yourControl.layer.borderColor = yourColor.CGColor
yourControl.layer.borderWidth = 1.0

<Swift 4คุณสามารถตั้งค่าความกว้างของเส้นขอบและสีเส้นขอบของ UIView ได้โดยใช้รหัสด้านล่าง

yourView.layer.borderWidth = 1

yourView.layer.borderColor = UIColor.red.cgColor

1
@ShashiVerma ยินดีต้อนรับค่ะ สำหรับรายละเอียดเชิงลึกเกี่ยวกับเลเยอร์โปรดอ่านเอกสารอ้างอิงคลาสของวัตถุที่แตกต่างกันของ Apple เพื่อที่จะเป็นประโยชน์สำหรับคุณ :)
Paras Joshi

16

ใช้@IBDesignableและ@IBInspectableเพื่อทำเช่นเดียวกัน

สามารถใช้ซ้ำได้และแก้ไขได้ง่ายจากตัวสร้างอินเทอร์เฟซและการเปลี่ยนแปลงจะแสดงใน Storyboard ทันที

ปรับแต่งวัตถุในสตอรีบอร์ดให้เข้ากับคลาสนั้น ๆ

ข้อมูลโค้ด:

@IBDesignable
class CustomView: UIView{

@IBInspectable var borderWidth: CGFloat = 0.0{

    didSet{

        self.layer.borderWidth = borderWidth
    }
}


@IBInspectable var borderColor: UIColor = UIColor.clear {

    didSet {

        self.layer.borderColor = borderColor.cgColor
    }
}

override func prepareForInterfaceBuilder() {

    super.prepareForInterfaceBuilder()
}

}

ช่วยให้แก้ไขได้ง่ายจาก Interface Builder:

ตัวสร้างอินเทอร์เฟซ


ฉันชอบโซลูชันนี้มากกว่าเนื่องจากเป็นโซลูชันที่ใช้ซ้ำได้โดยที่เราตั้งค่า UIView เป็นมุมมองที่กำหนดเอง แต่ยังคงมีการเปลี่ยนแปลงมากขึ้น
n0rm

นี่เป็นวิธีที่ฉันชอบที่สุดในการบรรลุเป้าหมาย แต่ด้วยโหมดมืดมันไม่ได้ผล ได้รับรูปแบบสีของ MacOS ปัจจุบันและใช้แบบคงที่ แต่สร้างขึ้นมา@IBDesignableและ@IBInspectableทั้งหมดทำงานได้ดีดังนั้นจึงควรมีวิธีสำหรับศุลกากรในการใช้ Colour Assets กับโหมดมืด / สว่างด้วย ~ มีใครรู้บ้างว่าจะบรรลุได้อย่างไร?
Nomad Developer

12

คุณสามารถเขียนส่วนขยายเพื่อใช้กับ UIViews ทั้งหมดเช่น UIButton, UILabel, UIImageView เป็นต้นคุณสามารถปรับแต่งวิธีการต่อไปนี้ได้ตามความต้องการของคุณ แต่ฉันคิดว่ามันจะใช้ได้ดีสำหรับคุณ

extension UIView{

    func setBorder(radius:CGFloat, color:UIColor = UIColor.clearColor()) -> UIView{
        var roundView:UIView = self
        roundView.layer.cornerRadius = CGFloat(radius)
        roundView.layer.borderWidth = 1
        roundView.layer.borderColor = color.CGColor
        roundView.clipsToBounds = true
        return roundView
    }
}

การใช้งาน:

btnLogin.setBorder(7, color: UIColor.lightGrayColor())
imgViewUserPick.setBorder(10)

1
@luda ฉันไม่คิดว่าเขา / เธอมีทางเลือกมากมายเกี่ยวกับภาษา API!
worthwords

9

Swift 5.2 , UIView + ส่วนขยาย

extension UIView {
    public func addViewBorder(borderColor:CGColor,borderWith:CGFloat,borderCornerRadius:CGFloat){
        self.layer.borderWidth = borderWith
        self.layer.borderColor = borderColor
        self.layer.cornerRadius = borderCornerRadius

    }
}

คุณใช้ส่วนขยายนี้

yourView.addViewBorder(borderColor: #colorLiteral(red: 0.6, green: 0.6, blue: 0.6, alpha: 1), borderWith: 1.0, borderCornerRadius: 20)

คุณไม่ได้เพิ่ม clipsToBounds = true
Bent El-Eslam

8

รวดเร็ว 3

func borderColor(){

    self.viewMenuItems.layer.cornerRadius = 13
    self.viewMenuItems.layer.borderWidth = 1
    self.viewMenuItems.layer.borderColor = UIColor.white.cgColor
}

3

เขียนรหัสในไฟล์ viewDidLoad()

self.view.layer.borderColor = anyColor().CGColor

และคุณสามารถตั้งค่าColorด้วยRGB

func anyColor() -> UIColor {
    return UIColor(red: 0.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1.0)
}

เรียนรู้บางอย่างเกี่ยวกับ CALayerในUIKit


อย่างไรก็ตามมันไม่ได้ทำอะไรเลยนอกจากคุณจะตั้งค่าความกว้างของเส้นขอบอย่างชัดเจนด้วย
Nicolas Miari

@NicolasMiari ที่คาดหวัง ... คุณไม่เห็นสีเส้นขอบที่คุณไม่ได้กำหนดขนาดไว้
Jono Guthrie

ขออภัยฉันลืมที่จะพูดถึงว่าฉันกำลังอ้างถึงช่องข้อความ ... ซึ่งดูเหมือนจะมีความกว้างของเส้นขอบที่ไม่ใช่ศูนย์เริ่มต้นตั้งแต่เริ่มต้น อย่างไรก็ตามฉันพยายามดิ้นรนเพื่อให้สีที่ฉันกำหนดให้สะท้อนออกมาจนกระทั่งฉันกำหนดความกว้างของเส้นขอบอย่างชัดเจน
Nicolas Miari


3

เราสามารถสร้างวิธีการได้ เพียงแค่ใช้มัน

public func createBorderForView(color: UIColor, radius: CGFloat, width: CGFloat = 0.7) {
    self.layer.borderWidth = width
    self.layer.cornerRadius = radius
    self.layer.shouldRasterize = false
    self.layer.rasterizationScale = 2
    self.clipsToBounds = true
    self.layer.masksToBounds = true
    let cgColor: CGColor = color.cgColor
    self.layer.borderColor = cgColor
}

2

Swift 3.0

       groundTrump.layer.borderColor = UIColor.red.cgColor

แทนที่จะเพิ่มคำตอบใหม่คุณต้องส่งคำขอแก้ไขไปยังผู้ตอบเดิม
Rajan Maheshwari

@RajanMaheshwari ได้โปรดไม่ อย่าใส่รหัสในคำตอบของคนอื่น ควรโพสต์การอัปเดตเป็นของตนเองไม่ใช่คำตอบอื่น วิธีนี้ผู้โพสต์แต่ละคนต้องรับผิดชอบต่อสิ่งที่โพสต์ ...
Eric Aya

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