SwiftUI - custom navigation bar title

When managing a navigation title in Swift, you will have trodden down the path.  Previously you have entered something like

.navigationTitle("Title")

If you wanted to alter the font used for the navigation area, alter the init() in the view:

struct YourView: View {

   // ... code ... //
    init() {
        // Use this if NavigationBarTitle is with large font
        UINavigationBar.appearance().largeTitleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]
    }
    var body: some View {
        NavigationView {
            Text("Hello World!")
              .navigationBarTitle(Text("Dashboard").font(.subheadline), displayMode: .large)
        }
    }
}

Rather than .large font instead .inline, then there are two changes you would need to make.  In the .navigationBarTitle function above change the display mode:

displayMode: .inline

Also you will have to change the init() function the largeTitleTextAttributes becomes titleTextAttributes

UINavigationBar.appearance().titleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]

However, in iOS 14 SwiftUI you can customise a View navigation bar title with the toolbar modifier. Yep, it is the similar to setting navigationItem.titleView in UIKit.  Simply set ToolbarItem of placement type .principal to a new toolbar modifier. 

NavigationView {
    Text("Some intro text")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                VStack {
                    Text("Title").font(.headline)
                    Text("Subtitle").font(.subheadline)
                }
            }
        }
}

The code above has the following options:

navigationBarTitleDisplayMode

.automatic
.inline
.large

ToolbarItem(placement: .principal)

.bottombar - bottom toolbar
.principal - header area
.navigationBarTrailing
.navigationBarLeading

The great news here is that this isn't restricted to just text.  Oh no, you can use an image or button in the title view.  An example of SF Symbols in a title view.

NavigationView {
   Text("Camera")
       .navigationBarTitleDisplayMode(.inline)
       .toolbar {
           ToolbarItem(placement: .principal) {
              HStack {
                  Image(systemName: "camera.circle")
                  Text("Title").font(.headline)
              }
        }
    }
}

Whereas, for a button example:

NavigationView {
    Text("Camera")
      .navigationBarTitleDisplayMode(.inline)
      .toolbar {
          ToolbarItem(placement: .principal) {
              VStack {
                 Text("photo").font(.headline)
                 Button("view") {
                        
                 }
              }
          }
      }
}

Hide the background color of the top toolbar

I wanted to remove the default bland background colour for the NavigationView .toolbar.  How come?  Well I have an image that is the size of the device.  So having a colour block for the toolbar is simply annoying.

Trying to set the background to clear I initially look at adding .background to either NavigationView or .toolbar.  However, neither of these approaches are a mechanism to resolve this issue.

Next I assessed the init() function.  The function that immediately came to mind was UINavigationBarAppearance().  As in this function options that exist are:

configureWithTransparentBackground()

backgroundColor

Applying either of these calls is as follows:

init() {
    // hide the form background
    UITableView.appearance().backgroundColor = .clear
    UINavigationBarAppearance().configureWithTransparentBackground()
}

or changing configureWithTransparentBackground() to backgroundColor:

init() {
    // hide the form background
    UITableView.appearance().backgroundColor = .clear
    UINavigationBarAppearance().backgroundColor = .none
}

Neither of these approaches was successful for me.

So what works?

Well I was close.  UINavigationBarAppearance() was close to solving this issue, but the actual function is UINavigationBar.appearance().

init() {
    // hide the background colour of the top toolbar
    UINavigationBar.appearance().barTintColor = .clear
    // hide the form background
    UITableView.appearance().backgroundColor = .clear
}

Set the barTintColor to .clear and the background colour is removed.