How can I center the Navigation Title?

Question

I have been trying this for a while but with everything I do, I don't get the desired result. To be clear, I don't want to use the inline display mode, I want a large title but centered.

Here is what I'm trying to do:

My best attempt was a toolbar like this

.navigationBarTitleDisplayMode(.inline)
.toolbar {
    ToolbarItem(placement: .principal) {
        Text("Title")
            .font(.manrope(.bold(), size: 30)
            .accessibilityAddTraits(.isHeader)
            .padding(.top, 75)
    }
}

While this worked fine on the first page when you navigate and/or return to a page, the heading disappears.

Ideally, I'd like to center the Title using an initializer as I did for the font:

init() {
        UINavigationBar.appearance().largeTitleTextAttributes = [.font : UIFont(name: "Manrope-Bold", size: 30)!]
    }

score 2 · Accepted Answer · answered Jul 27 '21 at 13:49

2

Well, if you dont want the inline display mode my first idea would be to use a Text with parameters.

Something like

...
Text("Settings")
.font(.largetitle)
.frame(maxWidth: .infinity, alignment: .center)
...

Put that in front of your menu and this looks quite nice i guess.

answered Jul 27 '21 at 13:49

Iskandir

937
1
9
21

Yeah that was my backup solution – Arnav Motwani Jul 27 '21 at 16:05
you can flag my answer as "solution" if this will be your solution for the question :) – Iskandir Jul 27 '21 at 17:33
Because I'm still looking for a solution, I won't flag your answer but ill do it later if i don't get any others – Arnav Motwani Jul 27 '21 at 18:21
@ArnavMotwani found another solution? – Iskandir Oct 03 '22 at 11:20
if so, feel free to share :)If not, it would be nice to flag my answer :) – Iskandir Oct 05 '22 at 07:33

How can I center the Navigation Title?

1 Answers1