4

No matter what I've tried I cannot get this navigation bar item to align with the large title on this View? I have tried padding or placing it in a VStack with a Spacer() but neither push it down. How can I properly align it?

var body: some View {
            NavigationView {
                  //omitted 
                        .navigationTitle("Exertion")
                    }
                    .navigationBarItems(
            trailing:
                    Button(action: {
                        self.isShowingExertionCalendarSheet.toggle()
                    }) {
                        Image(systemName: "calendar")
                              .font(.system(size: 30, weight: .bold))                          
            }
        )   
    }           
}

image

Harshil Patel
  • 1,318
  • 1
  • 7
  • 26
GarySabo
  • 5,806
  • 5
  • 49
  • 124

2 Answers2

1

You can't. Because the Navigation Title is dynamic as it can change from small to big on scroll, at least you say otherwise, the UI does not allow you to set up the navigation items aligned vertically in other position other than the expected. That is right below the safe area. Is like giving a leading navigation item hides the back button. This is how Cocoa Touch either via SwiftUI or UIKIt works.

Juanjo
  • 670
  • 7
  • 17
  • So the only solution is using `.navigationBarTitleDisplayMode(.inline)` and not having large titles? – GarySabo Feb 11 '21 at 00:23
  • 1
    You can "try" that. The solution is to accept how the UI works and work with it not against it. By working against it you might be rejected in the app store. In my honest opinion, your design looks terrific the way it is. – Juanjo Feb 11 '21 at 09:37
  • 3
    Should note that Apple's Health app has a trailing aligned button that horizontally aligns with the nav title, ie ```[ "Summary" <---> [profile icon/button] ]```. Apple might not be doing that in SwiftUI, but they are doing it. Finding a way to replicate it in SwiftUI is the point of this question. – sobri Jan 01 '22 at 09:36
0

Well I think that you can do something like this:

.navigationBarItems(
            leading: Text("Exertion")
                .fontWeight(.bold)
                .font(.largeTitle),
            trailing: Button(action: {
                ... your code here ...
            }, label: {
                Image(systemName: "calendar")
                    .foregroundColor(Color("Some Blue"))
            })
        )
Stephane Paquet
  • 2,315
  • 27
  • 31
  • This doesn't work as posted. You can put a text item in the trailing section, but not a custom button. It will also not work to pass a standard Image to the trailing section. Also, only toolbar works on MacOS if that matters. – whitneyland Mar 19 '23 at 21:25