Skip to content

Instantly share code, notes, and snippets.

@amelnychuck
Last active December 6, 2020 22:30
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save amelnychuck/ad488f5bbb4605d8f9c402a297c0f390 to your computer and use it in GitHub Desktop.
Save amelnychuck/ad488f5bbb4605d8f9c402a297c0f390 to your computer and use it in GitHub Desktop.
Example SwiftUI TabbedView Implementation (Xcode Beta 3)
import SwiftUI
struct ExampleTabbedView : View {
@State private var selection = 1
var body: some View {
TabbedView(selection: $selection) {
Text("Tab 1")
.tabItem({
selection == 1 ?
Image(systemName: "person.and.person.fill")
.imageScale(.large) :
Image(systemName: "person.and.person")
.imageScale(.large)
Text("Tab 1")
})
.tag(1)
Text("Tab 2")
.tabItem({
selection == 2 ?
Image(systemName: "tray.full.fill")
.imageScale(.large) :
Image(systemName: "tray.full")
.imageScale(.large)
Text("Tab 2")
})
.tag(2)
Text("Tab 3")
.tabItem({
selection == 3 ?
Image(systemName: "bubble.left.fill")
.imageScale(.large) :
Image(systemName: "bubble.left")
.imageScale(.large)
Text("Tab 3")
})
.tag(3)
Text("Tab 4")
.tabItem({
Image(systemName: "calendar")
.imageScale(.large)
Text("Tab 4")
})
.tag(4)
Text("Tab 5")
.tabItem({
selection == 5 ?
Image(systemName: "person.crop.circle.fill")
.imageScale(.large) :
Image(systemName: "person.crop.circle")
.imageScale(.large)
Text("Tab 5")
})
.tag(5)
}.edgesIgnoringSafeArea(.top)
}
}
#if DEBUG
struct ExampleTabbedView_Previews : PreviewProvider {
static var previews: some View {
ExampleTabbedView()
}
}
#endif
@amelnychuck
Copy link
Author

Note: There are a few examples of dynamically changing the image based on the selected state, as well as a few static image examples. In general, I suggest using the fill state of an SFSymbol image when available, otherwise falling back to the static state, as done in the example above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment