Search code examples
swiftswiftuiuinavigationbarnavigationbar

Changing custom UINavigationBar's height? (Using Swift or SwiftUI)


I'd like to give the UINavigationBar a static height but I'm not entirely sure how to do it. Currently, I have a UINavigationBar view modifier as seen below:

struct NavigationBarModifier: ViewModifier {

var backgroundColor: UIColor?
var titleColor: UIColor?
var largeTitleColor: UIColor?
var tintColor: UIColor?

    init(backgroundColor: UIColor?, titleColor: UIColor?, largeTitleColor: UIColor?, tintColor: UIColor?) {
        self.backgroundColor = backgroundColor
        self.titleColor = titleColor
        self.largeTitleColor = largeTitleColor
        self.tintColor = tintColor
        let coloredAppearance = UINavigationBarAppearance()
        coloredAppearance.configureWithTransparentBackground()
        coloredAppearance.backgroundColor = .clear
        coloredAppearance.titleTextAttributes = [.foregroundColor: titleColor]
        coloredAppearance.largeTitleTextAttributes = [.foregroundColor: largeTitleColor]
    
        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()
                }
            }
        }
    }
}

I'd like to be able to set the height of this navigation bar that I've created the initializer for but I'm not quite sure how. I tried doing some UINavigationBar.appearance() modifiers but those didn't work


Solution

  • As far as I know, it is not possible to change the height of the navigation bar. Maybe with UIKit you could do some explicit frame manipulation, but generally I would advise against that because it might mess with the layout of your views. What i generally have found to be useful is removing the dark shadow line under the navigation bar via appearance and putting content below the navigation bar that has, for example, the same color as the navigation bar, thus creating a seamless transition from your navigation bar to the view below it. For example:

    struct MyView: View {
    
        init() {
            let navBarAppearance = UINavigationBarAppearance()
            navBarAppearance.shadowImage = UIImage()
            navBarAppearance.shadowColor = .clear
            navBarAppearance.backgroundColor = UIColor.red
            UINavigationBar.appearance().standardAppearance = navBarAppearance
            UINavigationBar.appearance().compactAppearance = navBarAppearance
            UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
        }
    
        var body: some View {
            NavigationView {
                VStack {
                    Rectangle().foregroundColor(Color(UIColor.red)).frame(height: 100)
                    Spacer()
                }
            }
        }
    }