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

Sentry mobile image

App store rankings love fast apps - mobile vitals can help you get there

Slow startup times, UI hangs, and frozen frames frustrate users—but they’re also fixable. Mobile Vitals help you measure and understand these performance issues so you can optimize your app’s speed and responsiveness. Learn how to use them to reduce friction and improve user experience.

Read full post →

Top comments (0)

Sentry mobile image

Improving mobile performance, from slow screens to app start time

Based on our experience working with thousands of mobile developer teams, we developed a mobile monitoring maturity curve.

Read more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay