swiftuiuinavigationbaruitoolbarswiftui-navigationview

SwiftUI 2.0: How to customize the iOS 14 navigation bar with toolbar() without a title?


I have the following setup for my iOS 14 App screen:

import SwiftUI
import UIKit

struct MyNavigationView: View {
    
    init() { // Color Settings
        UINavigationBar.appearance().barTintColor = UIColor(named:"ToolbarBackgroundColor")
        UINavigationBar.appearance().tintColor = UIColor(named: "ToolbarForegroundColor")
        UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor(named:"ToolbarForegroundColor")]
        UIToolbar.appearance().barTintColor = UIColor(named:"ToolbarBackgroundColor")
        UIToolbar.appearance().tintColor = UIColor(named: "ToolbarForegroundColor")
       }
       
    var body: some View {
        NavigationView {
            Text("Hello, SwiftUI 2.0 World!") // content
                .navigationBarTitleDisplayMode(.inline)
                .navigationTitle("MyApp") // navigation bar title
                .toolbar(content: {
                    // navigation bar leading item
                    ToolbarItem(placement: .navigationBarLeading) {
                        Text("Hi!").foregroundColor(Color("ToolbarForegroundColor"))
                    }
                    // navigation bar trailing item
                    ToolbarItem(placement: .navigationBarTrailing) {
                        VStack(content: {
                            Text("up").foregroundColor(Color("ToolbarForegroundColor"))
                            Text("down").foregroundColor(Color("ToolbarForegroundColor"))
                        })
                    }
                    // toolbar at the bottom of the screen
                    ToolbarItemGroup(placement: .bottomBar) {
                        Button(action:{
                            print("home")
                        }) {
                            Image(systemName: "house.fill")
                                .renderingMode(.template)
                                .foregroundColor(Color("ToolbarForegroundColor"))
                        }
                        Spacer()
                        Button(action:{
                            print("pages")
                        }) {
                            Image(systemName: "square.grid.3x2")
                                .renderingMode(.template)
                                .foregroundColor(.white)
                        }
                        Spacer()
                        Button(action:{
                            print("like")
                        }) {
                            Image(systemName: "star.fill")
                                .renderingMode(.template)
                                .foregroundColor(.white)
                        }
                        Spacer()
                        Button(action:{
                            print("user")
                        }) {
                            Image(systemName: "person.fill")
                                .renderingMode(.template)
                                .foregroundColor(.white)
                        }
                    }
                })
        }
    }
}

And it works so far ...


Solution

  • I solved the warnings by adding a default value to the navigation bar title:

    UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor(named:"ToolbarForegroundColor") ?? .white]
    

    Still looking how to get rid of the title.

    Edit: used an empty string to get rid of the title for now ...