Last active
December 6, 2020 22:30
-
-
Save amelnychuck/ad488f5bbb4605d8f9c402a297c0f390 to your computer and use it in GitHub Desktop.
Example SwiftUI TabbedView Implementation (Xcode Beta 3)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.