UIToolbar in SwiftUI?

Question

Created Jun ’19

Replies 4

Boosts 0

Views 8.2k

Participants 4

I've been experimenting with SwiftUI and couldn't figure out how to get a simple UIToolbar to appear at the bottom of the screen.

Basic view:

struct MyView : View {
    var body: some View {
        NavigationView {
            List {
                NavigationButton(destination: Text("1")) {
                    Text("Element 1")
                }
                // ...
            }.navigationBarTitle(Text("Elements"))
        }
    }
}

Answered by bbousquet in 369709022

Revisited this with Xcode 11 beta 3 and it seems that the following works:

    var body: some View {
        NavigationView {
            VStack {
                List(model.items) { item in
                    ItemViewRow(item: item)
                }
                HStack {
                    Button(action: {
                    }) {
                        Image(systemName: "someimage")
                    }
                    Spacer()
                    Button(action: {
                    }) {
                        Image(systemName: "someimage")
                    }
                }.padding()
            }
            .navigationBarTitle(Text("Items"))
        }
    }

I'll probably have to change the "toolbar"'s background color to behave properly but it looks similar to a good old UIToolbar.

Boost

Answer 1

Coupz OP

Jun ’19

Hi,

you can do it this way:

struct ContentView : View {
    var body: some View {
        TabbedView {
            NavigationView {
                List {
                    Text("Hello 1")
                    Text("Hello 2")
                }
                    .navigationBarTitle(Text("Big title"))
            }
                .tabItemLabel(Text("Hello"))
                .tag(0)
            Text("Foo bar")
                .tabItemLabel(Text("Foo"))
                .tag(1)
            
        }
    }
}

Just note that if you try it on the Preview mode, you won't see anything. Tap on the small play button on the right side of the preview pane and then you will see the tabs.

I wasn't able to put some icons (SF symbols) on there, could be a Beta issue that will be resolved later on.

0

Answer 2

bbousquet OP

Jun ’19

Thank you for the reply. This is an interesting way to approach this (and I'm wondering if it's the only way at this point). I honestly haven't had time to try out your suggestion but I will in the coming days and report my findings.

0

Answer 3

bbousquet OP

Jul ’19

Accepted Answer

Revisited this with Xcode 11 beta 3 and it seems that the following works:

    var body: some View {
        NavigationView {
            VStack {
                List(model.items) { item in
                    ItemViewRow(item: item)
                }
                HStack {
                    Button(action: {
                    }) {
                        Image(systemName: "someimage")
                    }
                    Spacer()
                    Button(action: {
                    }) {
                        Image(systemName: "someimage")
                    }
                }.padding()
            }
            .navigationBarTitle(Text("Items"))
        }
    }

I'll probably have to change the "toolbar"'s background color to behave properly but it looks similar to a good old UIToolbar.

0

Answer 4

prettyallrightdev OP

Jun ’21

In case anyone comes across this (as I did) I believe the proper way to do this now (iOS 14) is via a ToolbarItemGroup.

Something like this (to match the example above)

import SwiftUI

struct SomeView: View {
    var body: some View {
        NavigationView {
            VStack {
                List(model.items) { item in
                    ItemViewRow(item: item)
                }
                HStack {

                }.padding()
            }
            .navigationTitle(Text("Items"))
            .toolbar {
                ToolbarItemGroup(placement: .bottomBar) {
                    Button(action: {
                    }) {
                        Image(systemName: "someimage")
                    }
                    Spacer()
                    Button(action: {
                    }) {
                        Image(systemName: "someimage")
                    }
                }
            }
        }
    }
}

0