How to prevent navigationBarTitle from taking up full width?

Question

I want to move up the two icons (refresh and settings) to the same line as the navigationBarTitle:

Here is my view:

struct Games: View {
    let diameter: CGFloat = 35.0
    
    var body: some View {
        NavigationView {
            VStack {
                // Create game
                HStack {
                    Image(systemName: "house.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 40, height: 40)
                        .foregroundColor(.blue)
                    Spacer()
                    Button(action: {
 
                    }){
                        Image(systemName: "arrow.clockwise")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 40, height: 40)
                            .foregroundColor(.gray)
                            .padding(.horizontal, 30)
                    }
                    NavigationLink(destination: Settings()){
                        Image("settings")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 40, height: 40)
                            .foregroundColor(.gray)
                    }
                }
                HStack{
                    Spacer()
                    Button(action: {  }){
                        Text("+ Create game")
                            .font(.custom("Seravek-Medium", size: 22))
                            .padding(15)
                            .background(
                                RoundedRectangle(cornerRadius: 5)
                                    .fill(Color.blue.opacity(0.1))
                            )
                    }
                }
                .frame(
                    maxWidth: .infinity,
                    maxHeight: 80,
                    alignment: .bottom
                )
            } // VStack
            .navigationTitle("Games").foregroundColor(.blue)
            .padding(25)
        } // NavigationView
    }
    
}

but it appears that the navigationBarTitle takes up the full width.

Is there any way I can get around this?

Have a look at https://developer.apple.com/documentation/swiftui/view/toolbar(content:)-5w0tj You can use the toolbar modiefier to place buttons inside your NavigationBar — KevinP, Nov 22 '20 at 10:17
Does this answer your question? [How to put a logo in NavigationView in SwiftUI?](https://stackoverflow.com/questions/56546213/how-to-put-a-logo-in-navigationview-in-swiftui) — pawello2222, Nov 24 '20 at 00:31

Moritz Schaub · Accepted Answer · 2020-11-22T16:25:13.683

I would suggest adding these Images to the navigation Bar using the following code:

            .navigationBarItems(trailing:
                                    HStack {
                                        Button(action: {
                                            
                                        }){
                                            Image(systemName: "arrow.clockwise")
                                                .resizable()
                                                .aspectRatio(contentMode: .fill)
                                                .frame(width: 40, height: 40)
                                                .foregroundColor(.gray)
                                                .padding(.horizontal, 30)
                                        }
                                        NavigationLink(destination: Text("hello world")){
                                            Image("settings")
                                                .resizable()
                                                .aspectRatio(contentMode: .fill)
                                                .frame(width: 40, height: 40)
                                                .foregroundColor(.gray)
                                        }
                                    }
            )

As an alternative you could use a Toolbar as stated above like this:

.toolbar {
                ToolbarItem(placement: .automatic) {
                    HStack {
                        Button(action: {

                        }){
                            Image(systemName: "arrow.clockwise")
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: 40, height: 40)
                                .foregroundColor(.gray)
                                .padding(.horizontal, 30)
                        }
                        NavigationLink(destination: Text("hello world")){
                            Image("settings")
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: 40, height: 40)
                                .foregroundColor(.gray)
                        }
                    }
                }
            }

How to prevent navigationBarTitle from taking up full width?

1 Answers1