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

Abutilon

Answer 1

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

Demarche

Answer 2

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

Craunch

The best answer, this works like a charm! thanks – Mckenna

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! – Lushy

Answer 3

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

Orin

Answer 4

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

Fender

Answer 5

You can use .navigationBarTitleDisplayMode(_:) method for iOS 14+. https://developer.apple.com/documentation/swiftui/view/navigationbartitledisplaymode(_:)

To align navigation title to centre, use .inline title display mode.

var body: some View {
NavigationStack {
  VStack {
    List(venues) {
      Text($0.name ?? "")
    }
  }
  //Navigation bar title method usage is not recommended
  .navigationTitle("Venues")
  .navigationBarTitleDisplayMode(.inline)
  .toolbar {
    ToolbarItem(placement: .topBarTrailing) {
      Button("Filter") {
        
      }
    }
  }
}

}

Superiority

What does your answer add to the ones already given? navigationBarTitleDisplayMode is used in @EduardStreltsov 's answer. – Overliberal

@Overliberal All the credit to EduardStreltov. I thought it'd be useful to add how .navigationBarTitleDisplayMode(:) method could be used with now recommended Views (NavigationStack instead of NavigationView), methods (.navigationTitle(:) instead of .navigationBarTitle(_:)) and arguments (ToolbarItem's placement). – Superiority