How can I add something like a "subheader" into the navigation bar in SwiftUI?

Question

"My" solution:

Thanks to the help of Midhun MP and Mojtaba Hosseini I found this solution. It works ok, but the translucent effect of the navigation bar does not work anymore. So, if anyone knows how to fix it, please let me know.

// UITableView.appearance().backgroundColor = UIColor(named: "CustomTableViewBackgroundColor") // These are all custom color sets
// UITableViewCell.appearance().backgroundColor = UIColor(named: "CustomTableViewCellBackgroundColor")

// For the navigation bar color
UINavigationBar.appearance().backgroundColor = UIColor(named: "CustomNavigationBarBackgroundColor")
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)

return VStack(spacing: 0) {
    // This is the "subheader"
    Text("Test")
        .padding(.top, 9.5)
        .padding(.bottom, 8)
        .frame(minWidth: 0, maxWidth: .infinity)
        .background(Color("CustomNavigationBarBackgroundColor")) // This is also a custom color set
        .font(.footnote)
    // And here is my normal NavigationView
    NavigationView {
        List {
            Text("Hello")
        } .listStyle(GroupedListStyle())

        .navigationBarTitle(Text(""), displayMode: .inline)
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(
            leading:
            Button("Cancel") {
                // self.presentationMode.wrappedValue.dismiss()
            }.padding(.vertical, 5),
            trailing:
            Button("Done") {

            }.padding(.vertical, 5).disabled(true)
        )
    }
}

My original question:

I want to insert something like this in my navigation bar. So if someone can help me that would be nice.

My code now

NavigationView {
    List {
        Text("Hello")
    } .listStyle(GroupedListStyle())

    .navigationBarTitle(Text(""), displayMode: .inline)
    .navigationBarBackButtonHidden(true)
    .navigationBarItems(
        leading:
        Button("Cancel") {
            self.presentationMode.wrappedValue.dismiss()
        },
        trailing:
        Button("Done") {

        }.disabled(true)
    )
}

And a photo of how my code looks compiled

@iGhost is it easy in iOS14, though? It would be more helpful if you would have said how you did it. I think there is no option for iOS, but there is `.navigationSubtitle(...)` for macOS. — smat88dd, Feb 18 '22 at 10:11
Found it! iOS14 provides `.toolbar {...}` with which one can set a custom title view, added below as an answer: https://stackoverflow.com/a/71171807/3078330 — smat88dd, Feb 18 '22 at 10:19

score 1 · Answer 1 · answered Feb 18 '22 at 10:18

Starting with iOS14 its possible to use .toolbar {...}:

NavigationView {
    Text("Hello, SwiftUI!")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                VStack {
                    Text("Title").font(.headline)
                    Text("Subtitle").font(.subheadline)
                }
            }
        }
}

Credits https://sarunw.com/posts/custom-navigation-bar-title-view-in-swiftui/

Midhun MP · Accepted Answer · 2019-11-04T17:51:18.330

You can just add a text just before the navigation view.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Sub Header")
            NavigationView {
                List {
                    Text("Hello")
                } .listStyle(GroupedListStyle())

                .navigationBarTitle(Text("Hello There"), displayMode: .inline)

                .navigationBarBackButtonHidden(true)
                .navigationBarItems(
                    leading:
                    Button("Cancel") {
                        //self.presentationMode.wrappedValue.dismiss()
                    },
                    trailing:
                    Button("Done") {

                    }.disabled(true)
                )
            }
        }
    }
}

Note: If you go to detail pages, the above sub-label will be still visible. If you don't want that, You can create a custom header using normal view.

How can I add something like a "subheader" into the navigation bar in SwiftUI?

2 Answers2

Linked