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"))
}
}
}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.
How do we update the images of a button created in this way? I've tried creating the button prior to declaring it in the HStack, but the API on the class does not support changing the image. Do I need to write an extension? What are best practices here?
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.
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.
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.
How do we update the images of a button created in this way? I've tried creating the button prior to declaring it in the HStack, but the API on the class does not support changing the image. Do I need to write an extension? What are best practices here?
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")
}
}
}
}
}
}