Different toolbar item placement for iPhone vs iPad

Question

Created 1w

Replies 2

Boosts 0

Participants 2

On iPhone, I would like to have a more button at the top right of the navigation bar, a search field in the bottom toolbar, and a plus button to the right of the search field. I've achieved this via the code below.

But on iPad they should be in the navigation bar at the trailing edge from left to right: plus, more, search field. Just like the Shortcuts app, if there's not enough horizontal space, the search field should collapse into a button, and with even smaller space the search bar should become full-width under the navigation bar.

Right now on iPad the search bar is full width under the navigation bar, more at top right, plus at bottom middle, no matter how big the window is.

How can I achieve that? Any way to specify them for the system to more automatically do the right thing, or would I need to check specifically for iPhone vs iPad UIDevice to change the code?

struct ContentView: View {
    @State private var searchText = ""
    
    var body: some View {
        NavigationStack {
            VStack {
                Text("Hello, world!")
            }
            .navigationTitle("Test App")
            .searchable(text: $searchText)
            .toolbar {
                ToolbarItem {
                    Menu {
                        //...
                    } label: {
                        Label("More", systemImage: "ellipsis")
                    }
                }
                
                DefaultToolbarItem(kind: .search, placement: .bottomBar)
                
                ToolbarSpacer(.fixed, placement: .bottomBar)
                
                ToolbarItem(placement: .bottomBar) {
                    Button {
                        print("Add tapped")
                    } label: {
                        Label("Add", systemImage: "plus")
                    }
                }
            }
        }
    }
}

Boost

Answer 1

DTS Engineer OP

Apple

1w

You should get the behavior if your root view is a NavigationSplitView instead of a stack and the toolbar is applied on the Split View. For example

var body: some View {
        NavigationSplitView {
            //sidebar
        } detail: {
            //detail
            view
        }
        .searchable(text: $searchText)
        .toolbar {
            .....
        }
    }

0

Answer 2

Jordan OP

1w

Thanks, but in this app I don’t have a split view. No sidebar and no plans to add one.

0