Cách thay đổi kích thước UIImageView bằng Swift

Để thay đổi kích thước ảnh trong iOS bằng Swift, chúng ta sử dụng thuộc tính frame của UIImageView.

Ví dụ minh họa

Bước 1: Tạo dự án và thêm Image View

Tạo dự án mới → Kéo UIImageView vào Storyboard → Tạo @IBOutlet (ví dụ: imgView) → Thêm ảnh vào project và gán cho image view.

Bước 2: Xem trạng thái ban đầu

Chạy app, ảnh sẽ hiển thị kích thước gốc (có thể bị méo hoặc tràn ra ngoài màn hình).

Bước 3: Code thay đổi kích thước

Thêm code vào viewWillLayoutSubviews (được gọi sau khi Auto Layout tính toán xong frame):

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    
    // Cách 1: Set frame thủ công
    let frame = CGRect(x: 10, y: 10, width: self.view.frame.width - 20, height: 300)
    self.imgView.frame = frame
    
    // Cách 2: Giữ tỷ lệ ảnh (Aspect Fit)
    // self.imgView.contentMode = .scaleAspectFit
    // self.imgView.frame = CGRect(x: 20, y: 100, width: 300, height: 200)
}

Các phương pháp khác hay dùng

1. Sử dụng Auto Layout (Khuyến nghị cho iOS hiện đại)

Thay vì set frame cứng, hãy dùng constraints:

// Trong viewDidLoad hoặc storyboard
imgView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    imgView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    imgView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
    imgView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.9),
    imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: 0.75) // Tỷ lệ 4:3
])
imgView.contentMode = .scaleAspectFit

2. Resize ảnh thực tế (UIImage) thay vì chỉ thay frame hiển thị

Nếu cần ảnh nhỏ hơn để tiết kiệm bộ nhớ:

extension UIImage {
    func resized(to size: CGSize) -> UIImage {
        let renderer = UIGraphicsImageRenderer(size: size)
        return renderer.image { _ in
            self.draw(in: CGRect(origin: .zero, size: size))
        }
    }
}

// Sử dụng
let resizedImage = originalImage.resized(to: CGSize(width: 300, height: 200))
imgView.image = resizedImage

3. Sử dụng contentMode phù hợp

• .scaleAspectFit: Giữ tỷ lệ, hiển thị toàn bộ ảnh (có thể có khoảng trắng)
• .scaleAspectFill: Giữ tỷ lệ, lấp đầy khung hình (có thể bị cắt)
• .scaleToFill: Làm méo ảnh để lấp đầy khung hình
• .center: Giữ kích thước gốc, căn giữa

Lưu ý

• Luôn set contentMode trước khi gán frame/image
• Dùng viewWillLayoutSubviews hoặc viewDidLayoutSubviews khi can thiệp frame sau Auto Layout
• Ưu tiên Auto Layout + constraints thay vì set frame cứng để hỗ trợ đa kích thước màn hình