วิธีวาดเงา (Shadow) ใต้ UIView ใน iOS

เพื่อให้ UI ดูน่าสนใจ เราต้องเล่นกับแอตทริบิวต์ต่างๆ ในการพัฒนา iOS การวาดเงารอบ View หรือใต้ View ต้องใช้ Layer และ View

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

view.layer.masksToBounds = false
view.layer.cornerRadius = 2
view.layer.shadowOffset = CGSize(width: -5, height: 10)
view.layer.shadowRadius = 3
view.layer.shadowOpacity = 0.3

วิธีที่ 2: ใช้ IBDesignable และ IBInspectable กับ Storyboard

สร้าง Extension ของ UIView เพื่อให้เข้าถึงคุณสมบัติเงาได้จาก Storyboard

extension UIView {
    @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 }
    }
}

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

คำแนะนำเพิ่มเติม

• masksToBounds = false จำเป็นต้องตั้งค่า เพื่อให้เงาแสดงผลนอกขอบ View
• เพื่อประสิทธิภาพ ควรตั้งค่า layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath
• Shadow จะไม่แสดงใน Simulator บางรุ่น ต้องทดสอบบนอุปกรณ์จริง