Cách tạo viền, bo góc và đổ bóng cho UIView trong iOS

Trong bài viết này, chúng ta sẽ học cách tạo viền (border), bo góc (corner radius) và đổ bóng (shadow) cho UIView. Chúng ta sẽ thực hiện theo 2 cách: viết mã trực tiếp và tạo extension có thể chỉnh sửa trực tiếp trên Storyboard (sử dụng @IBDesignable và @IBInspectable).

Phương pháp 1: Viết mã trực tiếp

Tạo viền (Border)

Viền là thuộc tính của layer – lớp nằm dưới View. Viền có 2 thuộc tính chính: màu viền (borderColor) và độ dày viền (borderWidth).

self.view.layer.borderColor = UIColor(red: 0.44, green: 0.01, blue: 0.19, alpha: 1).cgColor
self.view.layer.borderWidth = 5.0

Bo góc (Corner Radius)

self.view.layer.cornerRadius = 5

Kết quả chạy trên Simulator:

Tạo đổ bóng (Shadow)

Để tạo bóng, sử dụng các thuộc tính: shadowPath, shadowColor, shadowOffset, shadowOpacity, shadowRadius.

Phương pháp 2: Sử dụng @IBDesignable và @IBInspectable (Chỉnh sửa trên Storyboard)

Tạo extension cho UIView để các thuộc tính hiển thị lên Attribute Inspector của Storyboard, cho phép chỉnh sửa trực quan mà không cần chạy ứng dụng.

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 {
            if let color = layer.borderColor {
                return UIColor(cgColor: color)
            }
            return nil
        }
        set {
            layer.borderColor = newValue?.cgColor
        }
    }
}

Sau khi thêm extension này, bạn sẽ thấy các thuộc tính mới xuất hiện trong Attribute Inspector của bất kỳ UIView nào trên Storyboard:

Lợi ích: Cách này cho phép designer hoặc developer điều chỉnh giao diện trực tiếp trên Storyboard và xem kết quả real-time mà không cần build/run ứng dụng.