Tab view in SwiftUI

TabView is a container view which enables navigating between multiple flows by selecting one of the items on the tab bar. Tapping on a tab item replaces the visible view with a view associated with the item. Tab view is set up by creating views which have tab items attached. Tab items are created with the tabItem() view modifier, which supports setting a text and an image. In addition, there is a badge() view modifier if we would like to show a badge on top of the item.

Tab view also supports selection handling. Selection handling is needed when we need to programmatically control which tab is selected. For that, we’ll need to choose a type which represents the selection. The only requirement is that the type is Hashable. Therefore, we can use an enum with raw values and have a clear and readable representation of tabs. Next, all the views managed the tab view need to have a tag set with one of the enum cases. Then we can create a binding with the selection type and pass it into TabView and SwiftUI will select the tab view item which has a tag equal to the selection. Just to reiterate that we can use any other type for representing the selection, as long as it conforms to Hashable. Could be just integers as well.

	struct ContentView: View {
	@State private var selection: Tab = .schedule

	enum Tab: Int {
	case conversations, schedule, settings
	}

	var body: some View {
	TabView(selection: $selection) {
	ConversationListView()
	.badge(1)
	.tabItem {
	Image(systemName: "bubble.left.and.bubble.right.fill")
	Text("Messages")
	}
	.tag(Tab.conversations)
	ScheduleView()
	.tabItem {
	Image(systemName: "clock.fill")
	Text("Schedule")
	}
	.tag(Tab.schedule)
	SettingsView()
	.tabItem {
	Image(systemName: "gearshape.fill")
	Text("Settings")
	}
	.tag(Tab.settings)
	}
	}
	}