Cách thêm viền (Border) cho UIImageView trong iOS

Thêm border cho UIImageView rất đơn giản qua layer property (từ CALayer).

Cách cơ bản

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

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

Bước 2: Storyboard

Thêm UIImageView + UIButton "Add Border" → @IBOutlet weak var imgView: UIImageView!, @IBAction func btnAddBorder.

Bước 3: Code thêm border

@IBAction func btnAddBorder(_ sender: Any) {
    imgView.layer.borderColor = UIColor(red: 0.5, green: 0.5, blue: 0.5, alpha: 1.0).cgColor
    imgView.layer.borderWidth = 5
    imgView.layer.masksToBounds = true      // Quan trọng: clip content theo border radius
    imgView.contentMode = .scaleAspectFill  // Hoặc .scaleAspectFit
}

Mã hoàn chỉnh

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var imgView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func btnAddBorder(_ sender: Any) {
        imgView.layer.borderColor = UIColor(red: 0.5, green: 0.5, blue: 0.5, alpha: 1.0).cgColor
        imgView.layer.borderWidth = 5
        imgView.layer.masksToBounds = true
        imgView.contentMode = .scaleAspectFill
    }
}

Nâng cao: Border với Corner Radius (Bo góc)

imgView.layer.borderColor = UIColor.systemBlue.cgColor
imgView.layer.borderWidth = 3
imgView.layer.cornerRadius = 20      // Bo góc 20pt
imgView.layer.masksToBounds = true   // BẮT BUỘC khi có cornerRadius
imgView.contentMode = .scaleAspectFill

Extension UIImageView tái sử dụng

extension UIImageView {
    func addBorder(color: UIColor = .systemGray, 
                   width: CGFloat = 2, 
                   cornerRadius: CGFloat = 0) {
        self.layer.borderColor = color.cgColor
        self.layer.borderWidth = width
        if cornerRadius > 0 {
            self.layer.cornerRadius = cornerRadius
            self.layer.masksToBounds = true
        }
    }
    
    func removeBorder() {
        self.layer.borderWidth = 0
        self.layer.borderColor = nil
    }
}

// Usage
imageView.addBorder(color: .systemRed, width: 4, cornerRadius: 12)
imageView.removeBorder()

Border Gradient (Gradient Border) - Nâng cao

extension UIView {
    func addGradientBorder(colors: [UIColor], 
                           width: CGFloat = 2, 
                           cornerRadius: CGFloat = 0) {
        
        let gradientLayer = CAGradientLayer()
        gradientLayer.colors = colors.map { $0.cgColor }
        gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
        gradientLayer.frame = bounds
        gradientLayer.cornerRadius = cornerRadius
        
        // Mask để chỉ hiện border
        let shapeLayer = CAShapeLayer()
        shapeLayer.lineWidth = width
        shapeLayer.path = UIBezierPath(roundedRect: bounds.insetBy(dx: width/2, dy: width/2), 
                                       cornerRadius: cornerRadius).cgPath
        shapeLayer.fillColor = nil
        shapeLayer.strokeColor = UIColor.black.cgColor
        gradientLayer.mask = shapeLayer
        
        // Xóa gradient border cũ
        layer.sublayers?.filter { $0 is CAGradientLayer }.forEach { $0.removeFromSuperlayer() }
        layer.addSublayer(gradientLayer)
    }
}

// Usage
imageView.addGradientBorder(colors: [.systemRed, .systemOrange, .systemYellow], 
                            width: 3, cornerRadius: 20)

Lưu ý quan trọng

• layer.borderColor nhận CGColor (không phải UIColor) → dùng .cgColor
• masksToBounds = true bắt buộc khi có cornerRadius (clip content + border)
• contentMode ảnh hưởng hiển thị ảnh trong bounds: .scaleAspectFit (giữ tỷ lệ), .scaleAspectFill (lấp đầy, crop), .scaleToFill (méo)
• Performance: Border đơn giản rất nhẹ, Gradient border tốn hơn (cần mask layer)