🍎 UINavigationBar

🍏 1. UINavigationBar란?

1. 역할: UINavigationBar는 iOS 앱의 각 화면 상단에 위치하며, 화면 전환과 함께 애니메이션을 통해 스택에서 화면을 푸시(push)하거나 팝(pop)할 때 시각적으로 사용자에게 알려줍니다.
2. 구성 요소: 주로 제목(Title), 왼쪽 버튼(Back Button), 오른쪽 버튼(Right Bar Button Items) 등으로 구성됩니다. 이러한 요소들은 UINavigationItem 객체에 의해 관리됩니다.
3. 스타일링: UINavigationBar의 외관은 앱의 전반적인 스타일과 일치하도록 사용자 정의할 수 있습니다. 배경 이미지, 배경 색상, 투명도, 제목 텍스트 스타일 등을 조정하여 원하는 디자인을 구현할 수 있습니다.
4. 커스터마이징: UINavigationBar의 외관을 변경하려면 다음과 같은 방법을 사용할 수 있습니다:
   • UIAppearance: 앱 전역에서 UINavigationBar의 모든 인스턴스에 적용되는 스타일을 설정할 수 있습니다.
   • UINavigationBarAppearance: iOS 13 이상에서 도입된 새로운 API로, 다크 모드와 같은 테마를 지원하며 보다 세밀한 컨트롤을 제공합니다.
   • 직접적으로 UINavigationBar의 속성을 설정하여 개별적으로 스타일을 변경할 수도 있습니다.
5. 이벤트 처리: UINavigationBar는 사용자가 탭하거나 스와이프하는 등의 상호 작용에 반응하여, UINavigationController와 연동하여 화면 전환을 처리합니다. 예를 들어, 뒤로 가기 버튼을 탭하면 스택에서 화면이 팝되고 이전 화면이 나타납니다.

🍏 2-1 UINavigationBar 코드작성법 (UINviationBarItem 사용X)

🍀 ① UINavigationController 설정하는 두가지 방법

🌈 1) ViewController에서 초기화면 설정

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Navigation Controller 생성
        let navigationController = UINavigationController(rootViewController: self)
        // 현재 ViewController를 rootViewController로 설정

        // Navigation Controller를 화면에 표시
        UIApplication.shared.windows.first?.rootViewController = navigationController
        UIApplication.shared.windows.first?.makeKeyAndVisible()
    }
}

• ViewController가 앱의 초기 뷰 컨트롤러입니다. UINavigationController를 생성하고 rootViewController로 ViewController를 설정하여 초기 화면을 구성합니다.

🌈 2) UIApplicationDelegate 설정하는 방법

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        
        // UIWindow 인스턴스 생성
        window = UIWindow(frame: UIScreen.main.bounds)
        
        // Root View Controller 생성
        let viewController = ViewController()
        
        // UINavigationController 생성 및 rootViewController로 설정
        let navigationController = UINavigationController(rootViewController: viewController)
        
        // UIWindow에 UINavigationController 설정
        window?.rootViewController = navigationController
        
        // UIWindow를 화면에 표시
        window?.makeKeyAndVisible()
        
        return true
    }
}

• 초기 화면을 구성할 때 UIApplicationDelegate에서 UINavigationController와 rootViewController를 설정하는 방법도 사용가능

• iOS 앱의 진입점인 AppDelegate 클래스는 앱의 생명 주기를 관리하고, 앱이 시작될 때 초기 환경 설정을 담당합니다. 따라서 UINavigationController을 생성하고 rootViewController로 ViewController를 설정하는 작업은 AppDelegate에서 수행할 수 있습니다. 이렇게 하면 앱이 시작될 때 처음 표시되는 화면을 명확히 설정할 수 있습니다

🍀 ② UINavigationBar 속성 설정하기

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Navigation Controller 생성
        let navigationController = UINavigationController(rootViewController: self)
        
        // UINavigationBar 배경색상 설정
        navigationController.navigationBar.barTintColor = UIColor.blue
        
        // UINavigationBar 제목 설정
        navigationController.navigationBar.topItem?.title = "Main Screen"
        
    }
}

🍀 ③ 버튼 추가하기

// 오른쪽에 버튼 추가
let rightButton = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(addButtonTapped))
        navigationController.navigationBar.topItem?.rightBarButtonItem = rightButton
       
    
    @objc func addButtonTapped() {
        // 오른쪽 버튼이 눌렸을 때의 동작 처리
        print("Add button tapped!")
}

🍏 2-2 UINavigationBar 코드작성법 (UINviationBarItem 사용O)

• 한결 간편하게 사용이 가능하기 때문에 이 방법 사용 권장함

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Navigation Controller 생성
        let navigationController = UINavigationController(rootViewController: self)
        
        // 네비게이션 바 배경색 설정
        navigationController.navigationBar.barTintColor = UIColor.blue
        
        // 네비게이션 바 제목 설정
        self.navigationItem.title = "Main Screen"
        
        // 왼쪽에 버튼 추가 (예: 뒤로가기 버튼)
        let leftButton = UIBarButtonItem(barButtonSystemItem: .rewind, target: self, action: #selector(leftButtonTapped))
        self.navigationItem.leftBarButtonItem = leftButton
        
        // 오른쪽에 버튼 추가
        let rightButton = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(rightButtonTapped))
        self.navigationItem.rightBarButtonItem = rightButton
    }
    
    // 왼쪽 버튼 탭 시 동작
    @objc func leftButtonTapped() {
        print("Left button tapped!")
    }
    
    // 오른쪽 버튼 탭 시 동작
    @objc func rightButtonTapped() {
        print("Right button tapped!")
    }
}

🍏 3. UINavigationBar 커스텀

🍀 3-1. UINavigationBar 커스텀 (UIAppearance 사용 X)

🌈 ① 배경색 변경

navigationController.navigationBar.barTintColor = UIColor.blue

🌈 ② 제목 설정

self.navigationItem.title = "Main Screen"

🌈 ③ 버튼추가

• 오른쪽 버튼

let rightButton = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(rightButtonTapped))
self.navigationItem.rightBarButtonItem = rightButton

• 왼쪽 버튼(뒤로 가기)

let leftButton = UIBarButtonItem(barButtonSystemItem: .rewind, target: self, action: #selector(leftButtonTapped))
self.navigationItem.leftBarButtonItem = leftButton

• 커스텀 이미지 버튼 추가

if let customImage = UIImage(named: "customImage") {
    let customButton = UIBarButtonItem(image: customImage, style: .plain, target: self, action: #selector(customButtonTapped))
    self.navigationItem.rightBarButtonItem = customButton
}

🌈 ④ 네비게이션 바 숨기기/보이기

• navigationController의 isNavigationBarHidden 속성을 사용

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    navigationController?.setNavigationBarHidden(true, animated: animated)
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    navigationController?.setNavigationBarHidden(false, animated: animated)
}

🌈 ⑤ 타이틀 뷰 설정

• navigationItem.titleView 속성을 사용

let titleLabel = UILabel()
titleLabel.text = "Custom Title"
titleLabel.textColor = UIColor.white
titleLabel.sizeToFit()
navigationItem.titleView = titleLabel

🍀 3-2. UINavigationBar 커스텀 (UIAppearance 사용 O)

• UIAppearance를 이용하면 앱 전반에 걸쳐 네비게이션 바의 스타일을 일관되게 설정할 수 있습니다.

🌈 ①

• AppDelegate에서 설정하는 예시
  • 대부분의 경우, 앱의 전반적인 스타일을 설정하기 위해 AppDelegate에서 UIAppearance를 사용
  • 앱이 시작될 때 한 번 설정되어야 하기 때문에, 보통 앱의 시작 시점인 application(_:didFinishLaunchingWithOptions:) 메서드에서 설정

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

        // 네비게이션 바 전반적인 스타일 설정
        UINavigationBar.appearance().barTintColor = UIColor.blue
        UINavigationBar.appearance().titleTextAttributes = [
            NSAttributedString.Key.foregroundColor: UIColor.white,
            NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 18)
        ]
        UINavigationBar.appearance().tintColor = UIColor.white
        
        return true
    }
}

🌈 ②특정 뷰 컨트롤러에서 설정

• 특정 화면이나 기능에 대해 다른 스타일을 적용하고자 할 때는 해당 뷰 컨트롤러의 생명 주기 메서드 중 하나에서 설정할 수 있음
• 예를 들어, 특정 화면에만 다른 배경색을 적용하거나 특정 버튼 스타일을 변경하고자 할 때, 해당 뷰 컨트롤러의 viewDidLoad() 메서드에서 UIAppearance를 사용할 수 있음

import UIKit

class MyViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 특정 화면에서 네비게이션 바 스타일 변경
        navigationController?.navigationBar.barTintColor = UIColor.red
        navigationController?.navigationBar.titleTextAttributes = [
            NSAttributedString.Key.foregroundColor: UIColor.white,
            NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)
        ]
    }
}

import UIKit

func customizeNavigationBarAppearance() {
    // 네비게이션 바 배경색 설정
    UINavigationBar.appearance().barTintColor = UIColor.blue
    
    // 네비게이션 바 버튼 색상 설정
    UINavigationBar.appearance().tintColor = UIColor.white
    
    // 네비게이션 바 제목 텍스트 속성 설정
    UINavigationBar.appearance().titleTextAttributes = [
        NSAttributedString.Key.foregroundColor: UIColor.white,
        NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 18)
    ]
    
    // 네비게이션 바 아이템 여백 조정 (iOS 11 이상)
    if #available(iOS 11.0, *) {
        UINavigationBar.appearance().layoutMargins.left = 10
        UINavigationBar.appearance().layoutMargins.right = 10
    }
}