Cách làm tròn góc Button trong iOS (Storyboard & Code)

Thường gặp UI yêu cầu button bo góc (rounded corners). Có 2 cách: dùng Storyboard (không code) hoặc Swift code.

Cách 1: Storyboard (User Defined Runtime Attributes)

Bước 1: Tạo dự án

Xcode → Single View App → Tên: "RoundedButton".

Bước 2: Thêm Button

Mở Main.storyboard → Kéo Button vào màn hình.

Bước 3: Cài đặt Runtime Attributes

Chọn Button → Tab Identity Inspector (biểu tượng báo cáo, ke phím 3) → Kéo xuống User Defined Runtime Attributes → Nhấn + thêm:

• Key Path: layer.cornerRadius
• Type: Number
• Value: 20 (hoặc bán kính mong muốn)

Lưu ý: Cần bật Clip to Bounds (trong Attributes Inspector) hoặc set layer.masksToBounds = true trong code để bo góc thực sự hiển thị.

Cách 2: Code Swift (Programmatically)

Tạo @IBOutlet cho button (tên roundedButton) → Trong viewDidLoad:

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var roundedButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Cách 1: Chỉ bo góc
        roundedButton.layer.cornerRadius = 20
        roundedButton.layer.masksToBounds = true // Bắt buộc để clip content
        
        // Cách 2: Bo góc + border (thường dùng cho outline button)
        // roundedButton.layer.borderWidth = 2
        // roundedButton.layer.borderColor = UIColor.systemBlue.cgColor
        // roundedButton.layer.cornerRadius = 8
        // roundedButton.layer.masksToBounds = true
    }
}

Cách 3: Extension UIButton tái sử dụng (Khuyến nghị)

extension UIButton {
    func makeRounded(cornerRadius: CGFloat? = nil, borderWidth: CGFloat = 0, borderColor: UIColor = .clear) {
        let radius = cornerRadius ?? (self.frame.height / 2) // Mặc định tròn tròn (pill)
        self.layer.cornerRadius = radius
        self.layer.masksToBounds = true
        self.layer.borderWidth = borderWidth
        self.layer.borderColor = borderColor.cgColor
    }
}

// Sử dụng
button.makeRounded() // Tự động bo tròn theo chiều cao
button.makeRounded(cornerRadius: 12, borderWidth: 1, borderColor: .systemBlue)

Cách 4: @IBDesignable + @IBInspectable (Xem trực tiếp trên Storyboard)

@IBDesignable
class RoundedButton: UIButton {
    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }
    
    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet { layer.borderWidth = borderWidth }
    }
    
    @IBInspectable var borderColor: UIColor = .clear {
        didSet { layer.borderColor = borderColor.cgColor }
    }
}

Sau đó trên Storyboard: Chọn Button → Custom Class: RoundedButton → Attributes Inspector sẽ hiện 3 property để chỉnh trực quan.

So sánh

Lưu ý

• Luôn set layer.masksToBounds = true (hoặc clipsToBounds = true)
• Performance: Bo góc nhiều view cùng lúc có thể ảnh hưởng scroll performance → dùng layer.cornerCurve = .continuous (iOS 13+) cho mượt hơn
• Nếu button có image, image cũng bị clip theo corner radius