Xcode12 Static Navigation Bar

Question

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)
                }
            })

Can you add your current code? There's not much customization that can be done to the size of the navigation bar besides changing it to `.inline`: `.navigationBarTitle("Navigation", displayMode: .inline)` but that sounds like it'll be too small for your use. — jnpdx, Mar 26 '21 at 22:04
I think you'll need to just make a custom view for your header if you want the buttons that big. — jnpdx, Mar 26 '21 at 22:13
Oh really? When I do the above, it looks great until I start scrolling.. Is there any way for me to just keep this constant, and keep it from changing when scrolling? — Stargazing, Mar 26 '21 at 22:30

rohanphadte · Accepted Answer · 2021-03-26T22:48:51.543

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:

With .large instead of .inline:

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

Okay, thank you so much! They are currently just plain "Button" 's since we couldn't find anywhere on how to make a UIBarButtonItem. Do you happen to have any sample code on how they would be made? Thanks! — Stargazing, Mar 26 '21 at 21:50
Sample code to create the `UIBarButtonItem` is in the code above under the `FirstViewController` class. — rohanphadte, Mar 26 '21 at 21:55
Just edited the post to include a function that is run when the `UIBarButtonItem` is tapped! — rohanphadte, Mar 26 '21 at 21:58
FYI, you two are probably talking about different things -- OP (according to the tags) is using SwiftUI. This answer is UIKit — jnpdx, Mar 26 '21 at 21:58
As @jnpdx pointed out, I have updated the post to use SwiftUI rather than UIKit. — rohanphadte, Mar 26 '21 at 22:14
Hi! So sorry, yes I was talking about SwiftUI. I wanted to keep .large even during the scroll, is that not possible? My hope was that with .large, the icon images would be able to stay on the navigation bar itself. If I do inline, the images are below the bar. — Stargazing, Mar 26 '21 at 22:28
You definitely can, just change the .inline to .large. If you use `ToolbarItem`, you don't have the issue where the images appear below the bar. I updated my post to include the buttons from the original post. — rohanphadte, Mar 26 '21 at 22:44

Xcode12 Static Navigation Bar

1 Answers1