Cách tạo Status Bar và Navigation Bar trong suốt (transparent) trong iOS

Nhiều app hiện đại có màn hình full-screen, status bar và navigation bar trong suốt (transparent), nội dung cuộn lên dưới bar.

Cách thực hiện (iOS 13+ / iOS 15+)

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

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

Bước 2: Embed Navigation Controller

Editor → Embed In → Navigation Controller. Thêm UIImageView full screen, set image.

Bước 3: Chạy chưa có code (so sánh)

Navigation bar mặc định có background, che khuất phần trên ảnh.

Bước 4: Code làm trong suốt (viewDidLoad)

override func viewDidLoad() {
    super.viewDidLoad()
    
    // Cách 1: iOS 13+ - Standard appearance
    let appearance = UINavigationBarAppearance()
    appearance.configureWithTransparentBackground() // Quan trọng: transparent background
    appearance.backgroundColor = .clear
    appearance.shadowColor = .clear // Xóa đường kẻ dưới nav bar
    
    navigationController?.navigationBar.standardAppearance = appearance
    navigationController?.navigationBar.scrollEdgeAppearance = appearance
    navigationController?.navigationBar.compactAppearance = appearance
    
    // Cách 2: Legacy (iOS 12-) - vẫn hoạt động nhưng deprecated
    // navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    // navigationController?.navigationBar.shadowImage = UIImage()
    // navigationController?.navigationBar.isTranslucent = true
}

Bước 5: Kết quả

Status bar + Navigation bar hoàn toàn trong suốt, ảnh hiển thị full screen.

iOS 15+ Navigation Bar Appearance (Chi tiết)

iOS 15 tách appearance cho các trạng thái:

• standardAppearance: Trạng thái bình thường
• scrollEdgeAppearance: Khi scroll đến edge (top)
• compactAppearance: Compact height (landscape phone)
• compactScrollEdgeAppearance: Compact + scroll edge

Phải set cả 3-4 appearance để consistent.

Status Bar Style (Màu chữ status bar)

// Trong ViewController
override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent // Trắng (cho nền tối)
    // return .darkContent // Đen (cho nền sáng)
}

// Hoặc set trên Navigation Controller
navigationController?.navigationBar.overrideUserInterfaceStyle = .dark // Force dark nav bar

Navigation Bar trong suốt chỉ khi scroll (iOS 15+)

// Mặc định có màu, scroll lên thì trong suốt
let standard = UINavigationBarAppearance()
standard.configureWithOpaqueBackground()
standard.backgroundColor = .systemBackground

let scrollEdge = UINavigationBarAppearance()
scrollEdge.configureWithTransparentBackground()

navigationController?.navigationBar.standardAppearance = standard
navigationController?.navigationBar.scrollEdgeAppearance = scrollEdge

Lưu ý

• Content view cần contentInsetAdjustmentBehavior = .never trên ScrollView để full screen
• Safe Area: Content vẫn respect safe area trừ khi set edgesIgnoringSafeArea
• Large Title: navigationController?.navigationBar.prefersLargeTitles = true vẫn hoạt động với transparent
• Back button: Tự động đổi màu theo tintColor hoặc titleTextAttributes