[UIKit-기초] UINavigationBar Cheat Sheet - 2

2025.02.07 - [UIKit 기초] - [UIKit-기초] UINavigationBar Cheat Sheet - 1

뒤로가기 버튼 이미지 바꾸기

전역적으로 바꾸기

• 앱 델리게이트에서 선언

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

        let newNavBarAppearance = customNavBarAppearance()

        let appearance = UINavigationBar.appearance()
        appearance.scrollEdgeAppearance = newNavBarAppearance
        appearance.compactAppearance = newNavBarAppearance
        appearance.standardAppearance = newNavBarAppearance
        if #available(iOS 15.0, *) {
            appearance.compactScrollEdgeAppearance = newNavBarAppearance
        }

        return true
    }

• appearance.setBackIndicatoerImage를 편집

  @available(iOS 13.0, *)
    func customNavBarAppearance() -> UINavigationBarAppearance {
        let customNavBarAppearance = UINavigationBarAppearance()
        // 네비 영역에 불투명한 뷰
        customNavBarAppearance.configureWithOpaqueBackground()

        // 뒤로가기 이미지 편집
        let eraserImage = UIImage(systemName: "eraser.fill")
        customNavBarAppearance.setBackIndicatorImage(eraserImage, transitionMaskImage: eraserImage)

        return customNavBarAppearance
    }

• 완료 모습

 

전역적으로 뒤로가기 버튼 이미지 지정 및 색상 설정

• application(didFinishLaunchingWithOptions)에서 선언

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

// Navigation 전역 Appearance 선언
let appearance = UINavigationBar.appearance()
let customBarAppearance = UINavigationBarAppearance()
customBarAppearance.configureWithTransparentBackground()

// UIBarButtonItemAppearance
let backbuttonAppearance = UIBarButtonItemAppearance()
backbuttonAppearance.configureWithDefault(for: .plain)

// backbutton title appearance
backbuttonAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor.clear, .font: UIFont.systemFont(ofSize: 0.0)]
customBarAppearance.backButtonAppearance = backbuttonAppearance

// 이미지 조정
let backbuttonImage = UIImage(systemName: "chevron.backward")?.withTintColor(.black, renderingMode: .alwaysOriginal)
customBarAppearance.setBackIndicatorImage(
    backbuttonImage,
    transitionMaskImage: backbuttonImage
)

// set appearance
appearance.scrollEdgeAppearance = customBarAppearance
appearance.compactAppearance = customBarAppearance
appearance.standardAppearance = customBarAppearance
appearance.compactScrollEdgeAppearance = customBarAppearance

 

개별 뷰 컨트롤러에서 바꾸기

• viewDidLoad에서 선언
  • viewWillAppear에서 설정하고, viewWillDisappear에서 리셋하면 정말 그 뷰에서만 영향을 미침

// viewDidLoad
setupAttributes()


func setupAttributes() {
    let newNavBarAppearance = customNavBarAppearance()

    navigationController?.navigationBar.scrollEdgeAppearance = newNavBarAppearance
    navigationController?.navigationBar.compactAppearance = newNavBarAppearance
    navigationController?.navigationBar.standardAppearance = newNavBarAppearance
}

 

네비 영역에 밑줄 없애기

• configureWithTransparentBackground() 설정

    @available(iOS 13.0, *)
    func customNavBarAppearance() -> UINavigationBarAppearance {
        let customNavBarAppearance = UINavigationBarAppearance()
        // 네비 영역에 불투명한 뷰
//        customNavBarAppearance.configureWithOpaqueBackground()
        // 네비 영역에 투명한 뷰 -> 밑에 밑줄 없애기
        customNavBarAppearance.configureWithTransparentBackground()


        return customNavBarAppearance
    }

• 완료 모습

• 혹은 배경색을 써야해서 밑줄만 없앰
  • .shadow 컬러를 없앰

    @available(iOS 13.0, *)
    func customNavBarAppearance() -> UINavigationBarAppearance {
        let customNavBarAppearance = UINavigationBarAppearance()
        // 네비 영역에 불투명한 뷰
        customNavBarAppearance.configureWithOpaqueBackground()
        // 밑줄 없애기
        customNavBarAppearance.shadowColor = .clear


        return customNavBarAppearance
    }

 

전체 코드

https://github.com/Damagucci-Juice/ExNavigation

GitHub - Damagucci-Juice/ExNavigation

참조

https://developer.apple.com/documentation/technotes/tn3106-customizing-uinavigationbar-appearance

TN3106: Customizing the appearance of UINavigationBar | Apple Developer Documentation