Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> iOS

Cách dùng MBProgressHUD với Swift

MBProgressHUD là thư viện phổ biến hiển thị HUD (Heads-Up Display) loading/progress trên iOS. Cài đặt qua CocoaPods và sử dụng dễ dàng.

1. Cài đặt qua CocoaPods


# Podfile
pod 'MBProgressHUD', '~> 1.2.0'

# Terminal
pod install

Mở file .xcworkspace sau khi cài.

2. Import & Sử dụng cơ bản


import MBProgressHUD

// Hiển thị HUD
let hud = MBProgressHUD.showAdded(to: self.view, animated: true)
hud.label.text = "Đang tải..."
hud.detailsLabel.text = "Vui lòng chờ"
hud.isUserInteractionEnabled = false  // Chặn tap nền

// Ẩn HUD
MBProgressHUD.hide(for: self.view, animated: true)

3. Tạo Extension UIViewController để dùng toàn app


extension UIViewController {
    func showHUD(title: String = "Loading", detail: String = "") {
        let hud = MBProgressHUD.showAdded(to: view, animated: true)
        hud.label.text = title
        hud.detailsLabel.text = detail
        hud.isUserInteractionEnabled = false
        hud.bezelView.style = .solidColor
        hud.bezelView.backgroundColor = UIColor(white: 0, alpha: 0.7)
        hud.contentColor = .white
    }
    
    func hideHUD() {
        MBProgressHUD.hide(for: view, animated: true)
    }
}

// Sử dụng:
showHUD(title: "Đăng nhập", detail: "Đang xác thực...")
// ... async task ...
hideHUD()

Kết quả

Cách dùng MBProgressHUD với Swift

Các mode HUD

  • mode = .indeterminate (mặc định): Spinner xoay tròn.
  • mode = .determinate: Progress bar 0-1 (set progress: Float).
  • mode = .annularDeterminate: Vòng tròn progress.
  • mode = .customView: Dùng ảnh/icon tùy chỉnh (checkmark, error...).
  • mode = .text: Chỉ text, không spinner.

Lưu ý

  • Luôn ẩn HUD trên main thread: DispatchQueue.main.async { MBProgressHUD.hide(...) }.
  • Tránh show nhiều HUD chồng lên nhau – check MBProgressHUD.forView(view) trước khi show mới.
  • Thư viện không còn maintain tích cực. Khuyến khích dùng NVActivityIndicatorView, ProgressHUD (Swift native), hoặc SwiftUI ProgressView cho project mới.