Add accessory view below navigation bar title in SwiftUI

Question

I’m trying to add an accessory view embedded in a navigation bar below the title, which can be seen in the default iOS calendar app (the “s m t w t f s” row) or the GitHub mobile app:

Gh1 Gh1

And I’d like it to work along with the large title style navigation bar like the GH mobile.

LazyVStack’s pinnedView with a section header almost work, but I can’t get the background color to make it seemless with the navigation bar, even with the ultraThinMaterial. It also leaves the divider line between the pinned view and the bar.

Is there a way to achieve this layout? Solutions in SwiftUI, SwiftUI+Introspect, and UIKit are all welcome!

did you ever end up achieving this layout? Are you able to post a code snippet? — Brandon Stillitano, Aug 10 '23 at 14:44
@BrandonStillitano I remember getting it working with a single section with a section header, where the header view contained my accessory views. — Jay Lee, Aug 10 '23 at 16:03
@BrandonStillitano See my comment here: https://stackoverflow.com/a/70739635/5252984 — Jay Lee, Aug 10 '23 at 16:04

score 7 · Accepted Answer · answered Jan 17 '22 at 10:12

Have you tried setting a .safeAreaInset view? This will have the stickiness you're looking for, and items in the "main" part of the view will take its height into account when rendering, so won't get obscured.

Here's a quick example I knocked up:

struct ContentView: View {
    var body: some View {
      NavigationView {
        List {
          ForEach(0 ..< 30) { item in
            Text("Hello, world!")
          }
        }
        .navigationTitle("Accessory View")
        .safeAreaInset(edge: .top) {
          AccessoryView()
        }
      }
    }
}

struct AccessoryView: View {
  var body: some View {
    HStack {
      Button("Button") { }
      Button("Button") { }
      Button("Button") { }
      Spacer()
    }
    .padding()
    .background(Color(uiColor: .systemGroupedBackground))
    .buttonStyle(.bordered)
    .controlSize(.mini)
  }
}

You have to give the view a background otherwise it'll be transparent – but that background will (as long as it's a colour or a material) automatically extend into the navigation bar itself. Here's a GIF of the above code in action, where I've set the background to match the grouped list's background:

enter image description here

It's not perfect, especially as it looks distinct from the nav bar on scroll, but it might be useable for you?

I didn't know about the `safeAreaInset` view modifier. Although I got what I got what I wanted, using a single-section LazyVStack with geometry reader to select between empty background (large title) and `Material.bar` (inline title), I see where this solution can be used. The major downside is that the accessory view does not scroll down with the large title. — Jay Lee, Jan 18 '22 at 00:57

score 1 · Answer 2 · answered Sep 23 '22 at 19:41

Another idea is to replace the navigation bar with a custom one like this:

{
    ...
}
    .safeAreaInset(edge: .top) {
        VStack(alignment: .leading, spacing: 8) {
            HStack() {
                Button {
                    presentationMode.wrappedValue.dismiss()
                } label: {
                    Image(systemName: "chevron.backward")
                }

                Spacer()

                    Text(navigationTitle).font(.title2).bold()
                        .multilineTextAlignment(.center)
                        .foregroundColor(.accentColor)
                        .frame(maxWidth: .infinity)
                Spacer()
                
            }
           HStack {
                 Button("Button") { }
                 Button("Button") { }
                 Button("Button") { }
                 Spacer()
               }
        }
        .padding()
        .background(
            .bar
        )
    }

You will also have to set:

.navigationBarBackButtonHidden(true)

and do not set a navigation title:

// .navigationTitle("....")

Add accessory view below navigation bar title in SwiftUI

2 Answers2