SwiftUI의 NavigationView에서 전체 화면에 배경색 적용

SwiftUI의NavigationView에서 전체 화면에 배경색을 적용하려면 ZStack를 사용한다.

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.green.edgesIgnoringSafeArea(.all)
                Text("Hello, SwiftUI")
                    .font(.title)
            }
            .navigationTitle("NavigationView")
        }
    }
}

단, 이 방법에서 아래와 같은 NavigationView의 제목이 내연 형식으로 표시될 때 당신의 기대를 만족시킬 수 없습니다.

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.green.edgesIgnoringSafeArea(.all)
                Text("Hello, SwiftUI")
                    .font(.title)
            }
            .navigationTitle("NavigationView")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

이를 방지하려면 UIKitUINavigationBarAppearance를 사용하여 색상NavigationBar을 지정합니다.

let coloredNavAppearance = UINavigationBarAppearance()

struct ContentView: View {
    init() {
        coloredNavAppearance.configureWithOpaqueBackground()
        coloredNavAppearance.backgroundColor = UIColor.init(red: 41/255, green: 199/255, blue: 50/255, alpha: 1.0)
//        coloredNavAppearance.titleTextAttributes = [.foregroundColor: UIColor.black]
//        coloredNavAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.black]
        UINavigationBar.appearance().standardAppearance = coloredNavAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredNavAppearance
    }
    var body: some View {
        NavigationView {
            ZStack {
                Color(red: 41/255, green: 199/255, blue: 50/255, opacity: 1.0).edgesIgnoringSafeArea(.all)
                Text("Hello, SwiftUI")
                    .font(.title)
            }
            .navigationTitle("NavigationView")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

이 같은 처리는 앱에서 한 번만 수행하면 되며, iOS 14 이후@main 앱 클래스라면 가능하다.

@main
struct MyApp: App {
    init() {
        let coloredNavAppearance = UINavigationBarAppearance()
        coloredNavAppearance.configureWithOpaqueBackground()
        coloredNavAppearance.backgroundColor = UIColor.init(red: 41/255, green: 199/255, blue: 50/255, alpha: 1.0)
        UINavigationBar.appearance().standardAppearance = coloredNavAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredNavAppearance
    }
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

또한 백그라운드 컬러에서는 투명색만 지정하면 된다.예를 들어 확장UINavigationController의viewDidLoad는backgroundColor에서 지정clear하면 전체적으로 배경색을 나타낼 수 있다.

extension UINavigationController {
    override open func viewDidLoad() {
        super.viewDidLoad()
        let appearance = UINavigationBarAppearance()
        appearance.configureWithTransparentBackground()
        appearance.backgroundColor = UIColor.clear
        navigationBar.standardAppearance = appearance
    }
}

기사를 참고할 수 있었으면 좋겠어요.