0

I am trying to make a NavigationView in SwiftUI that has a logo centered and a button right justified.

Here is what I have tried with no success. I cannot figure out how to remove the title and replace it with a image logo.

enter image description here

.navigationBarTitle("", displayMode: .inline)
            .navigationBarItems(trailing: Button(action: {
            }) {
    Image("mylogo")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 154, height: 42)
    Button(action: {
    
        // Actions
    }, label: { Image("hamburger_menu")
        .resizable()
        .frame(width: 24, height: 24)
    })
})

And this:

enter image description here

    .toolbar {
        ToolbarItem(placement: .navigation) {
            HStack {
                Image("mylogo")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 154, height: 42, alignment: .center)
    
                Image("hamburger_menu")
                    .resizable()
                    .frame(width: 48, height: 48, alignment: .trailing)
            }
        }
    }

It works ok with text as seen here:

enter image description here

    .navigationBarTitle("Text", displayMode: .inline)
    .navigationBarItems(trailing: Button(action: {
    
    } ) {
        Image("hamburger_menu")
            .resizable()
            .frame(width: 24, height: 24)
    } )
jnpdx
  • 45,847
  • 6
  • 64
  • 94
LilMoke
  • 3,176
  • 7
  • 48
  • 88

1 Answers1

0

You need to use principal for logo and primary action for button, like (simplified):

.toolbar {
    ToolbarItem(placement: .principal) {
        Image("mylogo")
    }
    ToolbarItem(placement: .primaryAction) {
        Button(action: {
    
        } ) {
          Image("hamburger_menu")
        }
    }
}
Asperi
  • 228,894
  • 20
  • 464
  • 690
  • Oh great you are wonderful, that worked!!!! Thank you SOOO much, it was driving me crazy. One last quick question if you do not mind, how would I go about extending the background color behind the text and buttons up above out of the safe area and up into the stars bar? – LilMoke Nov 14 '21 at 13:04