วิธีสร้าง Border, Border Radius และ Shadow ให้ UIView ใน iOS

บทความนี้จะสอนสร้างขอบ (Border) และเงา (Shadow) ให้ UIView 2 วิธี: เขียนโค้ดโดยตรง และทำให้แก้ไขได้ใน Storyboard ผ่าน IBDesignable และ IBInspectable

วิธีที่ 1: เขียนโค้ดโดยตรง

Border เป็นคุณสมบัติของ Layer ซึ่งมีคุณสมบัติหลัก 2 อย่าง: สีขอบ (Border Color) และความกว้างขอบ (Border Width)

// ตั้งค่าสีและความกว้างขอบ
view.layer.borderColor = UIColor.red.cgColor
view.layer.borderWidth = 5.0

// ตั้งค่ามุมโค้ง
view.layer.cornerRadius = 10

การสร้างเงา (Shadow)

view.layer.shadowColor = UIColor.black.cgColor
view.layer.shadowOffset = CGSize(width: 0, height: 2)
view.layer.shadowRadius = 4
view.layer.shadowOpacity = 0.3
view.layer.masksToBounds = false // สำคัญ: ต้องเป็น false เพื่อให้เงาแสดง

วิธีที่ 2: ใช้ IBDesignable และ IBInspectable (แก้ไขใน Storyboard ได้)

สร้าง Extension ของ UIView เพื่อเพิ่มคุณสมบัติที่แก้ไขได้ใน Attribute Inspector

extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get { return layer.cornerRadius }
        set { layer.cornerRadius = newValue }
    }
    
    @IBInspectable var borderWidth: CGFloat {
        get { return layer.borderWidth }
        set { layer.borderWidth = newValue }
    }
    
    @IBInspectable var borderColor: UIColor? {
        get {
            guard let color = layer.borderColor else { return nil }
            return UIColor(cgColor: color)
        }
        set { layer.borderColor = newValue?.cgColor }
    }
    
    @IBInspectable var shadowRadius: CGFloat {
        get { return layer.shadowRadius }
        set { layer.shadowRadius = newValue }
    }
    
    @IBInspectable var shadowOpacity: Float {
        get { return layer.shadowOpacity }
        set { layer.shadowOpacity = newValue }
    }
    
    @IBInspectable var shadowOffset: CGSize {
        get { return layer.shadowOffset }
        set { layer.shadowOffset = newValue }
    }
    
    @IBInspectable var shadowColor: UIColor? {
        get {
            guard let color = layer.shadowColor else { return nil }
            return UIColor(cgColor: color)
        }
        set { layer.shadowColor = newValue?.cgColor }
    }
}

หลังจากเพิ่มโค้ดนี้แล้ว จะเห็นคุณสมบัติใหม่ๆ ใน Attribute Inspector ของ UIView ใน Storyboard สามารถปรับค่าและดูผลลัพธ์แบบเรียลไทม์ได้เลย

คำแนะนำ

• ต้องตั้งค่า layer.masksToBounds = false สำหรับ Shadow จะทำงาน
• หากใช้ Corner Radius พร้อม Shadow ควรตั้งค่า layer.shadowPath เพื่อประสิทธิภาพที่ดีกว่า