Question 244458 in IOS Swift Question posted in
The official documentation can be found here.

Ios swift – Adding subviews to navigation bar in SwiftUI

I have noticed that both the first-party Apple apps and some third-party apps are able to have search filter chips nested INSIDE the navigation bar below the titles. I am trying to figure out how one would go about achieving this.

I’ve tried to achieve this using a .toolbar modifier however this doesn’t achieve the desired result.

Would appreciate anyones input on how one could achieve the navigation bar layouts in the screenshots using SwiftUI. That is, a native look/feel navigation bar with search, large titles, small titles, and the tags/chips/filters, exactly the same as the GitHub screenshots.

Github Collapsed Navigation

Github

GitHub Expanded Navigation

Github

GitHub Search Navigation

GitHub

Similar AppStore Layout

AppStore

Scroll Behaviour w/Chips/Tags (What I’d like to achieve)

Animation

Tags:

2

Answers


  1. 0

    In the App Store app. I am assuming they are using modifier .searchable(text: Binding<String>, placement: .navigationBarDrawer(displayMode: .always) to show for example Search bar in the navigation bar. displayMode .always is there just so the Searchbar is not "folding in" while scrolling, but it is always "unfolded".

    I hope my answer makes sense 🙂

    Login or Signup to reply.
  2. 0

    I don’t think your samples are attached to the navigation bars. Apple introduced PinnedScrollableViews in

    @available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)

    These are included in some Views such as LazyVStack

    You can set headers or footers as views that get pinned.

    import SwiftUI

struct StickyNavigationBar: View {
    init() {
        //Hide the shadow from the navigation bar
        let appearance = UINavigationBarAppearance()
        appearance.shadowColor = .clear
        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
    }
    var body: some View {
        NavigationStack {
            ScrollView {
                LazyVStack(pinnedViews: [.sectionHeaders]) { //Set the pinned view
                    Section {
                        ForEach(0..<7) { n in
                            Button {
                                
                            } label: {
                                Text("sample (n)")
                            }
                            
                        }
                    } header: {
                        //make this whatever you want

                        ScrollView(.horizontal) {
                            HStack {
                                ForEach(0..<7) { n in
                                    Button {
                                        
                                    } label: {
                                        Text("sample (n)")
                                    }.buttonStyle(.borderedProminent)
                                    
                                }
                            }
                        }.background(Material.thick)
                    }
                    
                }
            }.navigationTitle("Test")
        }
    }
}

#Preview {
    StickyNavigationBar()
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search