home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> iOS

วิธีตั้งค่าพื้นหลัง Navigation Bar ใน iOS

ตั้งค่าสีพื้นหลัง Navigation Bar ได้ 2 วิธี: Storyboard และโค้ด (รองรับ iOS 13+ Appearance API)

วิธีที่ 1: Storyboard (Xcode 13+)

  1. Select Navigation Bar ใน Document Outline
  2. Attributes Inspector → Appearance → Configure Standard, Scroll Edge, Compact
  3. ตั้งค่า Background Color, Title Color, Tint Color

วิธีที่ 2: โค้ด - UINavigationBarAppearance (iOS 13+ แนะนำ)


func setupNavigationBar() {
    let appearance = UINavigationBarAppearance()
    appearance.configureWithOpaqueBackground()
    appearance.backgroundColor = .systemBlue
    appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
    appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
    
    // Button Color
    appearance.buttonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.white]
    appearance.doneButtonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.white]
    
    // ใช้กับ Navigation Bar นี้
    navigationController?.navigationBar.standardAppearance = appearance
    navigationController?.navigationBar.scrollEdgeAppearance = appearance
    navigationController?.navigationBar.compactAppearance = appearance
    
    // หรือใช้ Global (ทั้งแอป)
    // UINavigationBar.appearance().standardAppearance = appearance
}

Legacy Way (iOS 12 และก่อน)


navigationController?.navigationBar.barTintColor = .systemBlue
navigationController?.navigationBar.tintColor = .white
navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
navigationController?.navigationBar.isTranslucent = false

Transparent Navigation Bar


let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground()
appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
navigationController?.navigationBar.standardAppearance = appearance
navigationController?.navigationBar.scrollEdgeAppearance = appearance

Scroll Edge Appearance (iOS 15+)

เมื่อ Scroll เนื้อหา Navigation Bar จะเปลี่ยนสาตาม scrollEdgeAppearance (โดยปกติจะมี Blur Effect)


// Standard = ปกติ, Scroll Edge = เมื่อ Scroll จนถึง Edge
navigationController?.navigationBar.standardAppearance = standardAppearance
navigationController?.navigationBar.scrollEdgeAppearance = scrollEdgeAppearance

Back Button Color


// Global
UINavigationBar.appearance().tintColor = .white

// Per View Controller
navigationController?.navigationBar.tintColor = .white