How to align a SwiftUI navigationBarTitle to be centered?

Question

How does one centre a navigation bar title in SwiftUI?

var body: some View {
    NavigationView {
        .navigationBarTitle("Todo Lists")
    }
}

score 21 · Accepted Answer · answered Aug 14 '19 at 00:32

.navigationBarTitle allows for three display modes - .large, .inline, and .automatic.

From the documentation:

case automatic
Inherit the display mode from the previous navigation item.
case inline
Display the title within the standard bounds of the navigation bar.
case large
Display a large title within an expanded navigation bar.

So it depends what you mean when you say "how does one centre a navigation bar title in SwiftUI?" You cannot center a navigation bar title that has a display mode of .large. You also cannot left-align or right-align a navigation bar title that has a display mode of .inline. If you want a navigation bar title that is centered, then your only option is to use .inline.

var body: some View {
    NavigationView {
        CustomView()
            .navigationBarTitle("Todo Lists", displayMode: .inline)
    }
}

score 16 · Answer 2 · answered Sep 10 '21 at 18:27

16

Also, an awesome approach was shown here.

It's perfect when you need to customize navbar. Keyword .principal is for positioning

NavigationView {
    Text("Hello, SwiftUI!")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                HStack {
                    Image(systemName: "sun.min.fill")
                    Text("Title").font(.headline)
                }
            }
        }
}

answered Sep 10 '21 at 18:27

Eduard Streltsov

1,754
20
19

2

The best answer, this works like a charm! thanks – Alexander Rojas Oct 07 '21 at 03:03
1

Great answer here, although I missed off the ToobarItem(placement: ...... as I was getting errors. I got this approach to work with the HStack{...} just right within the .toolbar {...} I got my text lined up just where I wanted it! – David_2877 Oct 21 '22 at 14:40

score 2 · Answer 3 · answered Mar 05 '20 at 11:46

You can't change the text format in title. But here is a work around, it will work as requested (without large gap):

HStack{
    Text("Todo Lists")
}
.multilineTextAlignment(.center)
.font(.largeTitle)
.padding(.bottom, -15.0)
NavigationView{
    List{
        ForEach(instrNewOld) { instrIdx in
            SourceCodeView(cat: instrIdx)
        }
    }
    .navigationBarTitle(Text("no text"), displayMode: .automatic)
    .navigationBarHidden(true)
}

score 0 · Answer 4 · answered Oct 31 '19 at 15:05

This is an option. Using 'navigationBarHidden(true)' Only downside is that it creates a large gap between the image and the tableview.

struct ContentView: View{
var body: some View {
            VStack
            {
                CircleImageView()
                HeadLineView()
                NavigationView
                {
                        List
                        {
                            Text("Line 1")
                            Text("Line 2")
                        }
                        .navigationBarHidden(true)
                }
            }
        }
    }

struct HeadLineView : View
{
    var body: some View{
        Text("Headline").bold().font(Font(UIFont.systemFont(ofSize: 30.0)))
    }
}

How to align a SwiftUI navigationBarTitle to be centered?

4 Answers4