DEV Community

ShoheOhtani
ShoheOhtani

Posted on

3 2

[SwiftUI] Change background color of NavigationView & Form

Image description

We need to modify NavigationView & Form.

NavigationView {
    VStack(alignment: .leading, spacing: 0.0) {
        Form {
            Section {
                NavigationLink(destination: EmptyView()) {
                    Text("-")
                }
                ...
            }
        }.backgroundColor(.black) πŸ‘ˆ
    }
    .navigationBarTitle("Settings", displayMode: .inline)
    .navigationBarColor(.black, tintColor: .white) πŸ‘ˆ
}
Enter fullscreen mode Exit fullscreen mode

Modify NavigationView

struct NavigationBarModifier: ViewModifier {
    var backgroundColor: UIColor?

    init(backgroundColor: UIColor?, tintColor: UIColor?) {
        self.backgroundColor = backgroundColor

        let coloredAppearance = UINavigationBarAppearance()
        coloredAppearance.configureWithTransparentBackground()
        coloredAppearance.backgroundColor = .clear
        coloredAppearance.titleTextAttributes = [.foregroundColor: tintColor as Any]
        coloredAppearance.largeTitleTextAttributes = [.foregroundColor: tintColor as Any]

        UINavigationBar.appearance().standardAppearance = coloredAppearance
        UINavigationBar.appearance().compactAppearance = coloredAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
        UINavigationBar.appearance().tintColor = tintColor

    }

    func body(content: Content) -> some View {
        ZStack{
            content
            VStack {
                GeometryReader { geometry in
                    Color(self.backgroundColor ?? .clear)
                        .frame(height: geometry.safeAreaInsets.top)
                        .edgesIgnoringSafeArea(.top)
                    Spacer()
                }
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode
extension View {

    func navigationBarColor(_ backgroundColor: Color?, tintColor: Color?) -> some View {
        self.modifier(NavigationBarModifier(backgroundColor: UIColor(backgroundColor ?? .white), tintColor: UIColor(tintColor ?? .black)))
    }

}
Enter fullscreen mode Exit fullscreen mode

Modify Form

struct FormModifier: ViewModifier {

    init(backgroundColor: UIColor?) {
        UITableView.appearance().backgroundColor = backgroundColor
    }

    func body(content: Content) -> some View {
        content
    }
}
Enter fullscreen mode Exit fullscreen mode
extension Form {

    func backgroundColor(_ backgroundColor: Color?) -> some View {
        self.modifier(FormModifier(backgroundColor: UIColor(backgroundColor ?? .white)))
    }

}
Enter fullscreen mode Exit fullscreen mode

Image of Bright Data

Overcome Captchas with Ease – Keep your data flow uninterrupted.

Our Web Unlocker smoothly handles captchas, ensuring your data scraping activities remain productive.

Solve Captchas

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay