SwiftUI: Set navigationTitle to monospaced (SF Mono) [duplicate] - ios

Question

This is a SwiftUI question, not a UIKit one. :)
I'm trying to set a different font for the navigation bar title using SwiftUI. My suspicion is that this isn't supported yet. Here's what I've tried:
var body: some View {
NavigationView {
.navigationBarTitle(Text("Dashboard").font(.subheadline), displayMode: .large)
}
}
No matter what I do with the .font settings, it doesn't change the text. I've also tried setting a custom font and removing the displayMode property.
Has anyone been able to get this to work?

Answer 1

In SwiftUI, at this point we can not change the navigationBarTitle font directly, but you can change navigationBar appearance like this,
struct YourView: View {
init() {
//Use this if NavigationBarTitle is with Large Font
UINavigationBar.appearance().largeTitleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]
//Use this if NavigationBarTitle is with displayMode = .inline
//UINavigationBar.appearance().titleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]
}
var body: some View {
NavigationView {
Text("Hello World!")
.navigationBarTitle(Text("Dashboard").font(.subheadline), displayMode: .large)
//.navigationBarTitle (Text("Dashboard"), displayMode: .inline)
}
}
}
I hope this will help you. Thanks!!

Answer 2

In iOS 14 SwiftUI you can customise a View navigation bar title with the toolbar modifier, set ToolbarItem of placement type .principal to a new toolbar modifier.
NavigationView {
Text("any text")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .principal) {
VStack {
Text("Nav Title")
.font(.system(size: 20))
.foregroundColor(Color.black)
}
}
}
}

Answer 3

If you need to use new Rounded face for SF family you can use this snippet
let design = UIFontDescriptor.SystemDesign.rounded
let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .largeTitle)
.withDesign(design)!
let font = UIFont.init(descriptor: descriptor, size: 48)
UINavigationBar.appearance().largeTitleTextAttributes = [.font : font]

Answer 4

I'm not a huge fan of modifying things in the view's Inits however, I'm not sure of a better way. Instead, I moved it to a ViewModifier to keep things tidier:
struct SpecialNavBar: ViewModifier {
init() {
UINavigationBar.appearance().largeTitleTextAttributes = [.font: UIFont(name: "Georgia-Bold", size: 20)!]
}
func body(content: Content) -> some View {
content
}
}
extension View {
func specialNavBar() -> some View {
self.modifier(SpecialNavBar())
}
}
Then to use:
struct MyView: View {
var body: some View {
NavigationView {
content
.specialNavBar()
}
}
}

Answer 5

All the settings you need are inside init(). Play with them and understand what is responsible for what. A couple of hours ago, this code helped me to understand the Navigation Bar settings. I don't remember where I found it.
struct ContentView: View {
init() {
// this is not the same as manipulating the proxy directly
let appearance = UINavigationBarAppearance()
// this overrides everything you have set up earlier.
appearance.configureWithTransparentBackground()
// this only applies to big titles
appearance.largeTitleTextAttributes = [
.font : UIFont.systemFont(ofSize: 20),
NSAttributedString.Key.foregroundColor : UIColor.white
]
// this only applies to small titles
appearance.titleTextAttributes = [
.font : UIFont.systemFont(ofSize: 20),
NSAttributedString.Key.foregroundColor : UIColor.white
]
//In the following two lines you make sure that you apply the style for good
UINavigationBar.appearance().scrollEdgeAppearance = appearance
UINavigationBar.appearance().standardAppearance = appearance
// This property is not present on the UINavigationBarAppearance
// object for some reason and you have to leave it til the end
UINavigationBar.appearance().tintColor = .white
}
var body: some View {
NavigationView {
ZStack {
Color.black
.edgesIgnoringSafeArea([.all])
NavigationLink(destination: ContentView2()) {
Text("push")
}
}
.navigationBarTitle("", displayMode: .inline)
.navigationBarBackButtonHidden(true)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct ContentView2: View {
var body: some View {
ZStack {
Color.black
.edgesIgnoringSafeArea([.all])
NavigationLink(destination: ContentView()) {
Text("push")
}
}
.navigationBarTitle("My Custom White title", displayMode: .inline)
}
}
P. S: The code is taken from here