Xcode12 Static Navigation Bar

419 Views Asked by At

I am trying to style a navigation bar with a call button on it. However, the standard navigation bar goes from large to inline, when scrolling, which makes the call button not fit on the navigation bar anymore? Is there a way to stop the navigation bar from switching when scrolling? Or is there a specific way to keep buttons on the navigation bar when scrolling? Any help would be greatly appreciated! Thanks!

This is what I'm working with so far!

.navigationBarTitle("Elevate", displayMode: .large)
        
        .navigationBarItems(trailing:
            HStack
            {
                Button(action: {
                    if let url = NSURL(string: "tel://\(1234567890)"), UIApplication.shared.canOpenURL(url as URL) {
                        UIApplication.shared.openURL(url as URL)
                    }
                    print("Edit button was tapped")})
                {
                    Image(systemName: "phone.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 30)
                        .padding(.top)
                        .accentColor(.black)
                }
                
                Button(action: {
                        print("Message button was tapped")})
                {
                    Image(systemName: "message.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 30)
                        .padding(.top)
                        .accentColor(.black)
                }
                
                Button(action: {
                        print("Settings button was tapped")})
                {
                    Image(systemName: "gearshape.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 30)
                        .padding(.top)
                        .accentColor(.black)
                }
            })
1

There are 1 best solutions below

7
On BEST ANSWER

If you're using SwiftUI, you need to create an NavigationView that has an .inline display mode so you don't use .large and get the large titles on scroll.

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("This is a View!")
            .navigationBarTitle("Elevate", displayMode: .inline) //set inline display
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        if let url = NSURL(string: "tel://\(1234567890)"), UIApplication.shared.canOpenURL(url as URL) {
                            UIApplication.shared.openURL(url as URL)
                        }
                        print("Edit button was tapped")})
                    {
                        Image(systemName: "phone.fill")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 30)
                            .padding(.top)
                            .accentColor(.black)
                    }
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                            print("Message button was tapped")})
                    {
                        Image(systemName: "message.fill")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 30)
                            .padding(.top)
                            .accentColor(.black)
                    }
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                            print("Settings button was tapped")})
                    {
                        Image(systemName: "gearshape.fill")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 30)
                            .padding(.top)
                            .accentColor(.black)
                    }
                }
            }
        }
    }
}

This looks like the following:

enter image description here

With .large instead of .inline:

enter image description here

Edit: Showing SwiftUI instead of UIKit - thanks to @jnpdx for pointing out OP's original request.