Here is the code:
TabView {
Tab("", systemImage: "list.star") {
Text("star1")
}
Tab("", systemImage: "gear") {
Text("gear1")
}
Tab("", systemImage: "list.star") {
Text("star2")
}
Tab("", systemImage: "gear") {
Text("gear2")
}
Tab("search", systemImage: "arrowshape.left.arrowshape.right", role: .search) {
Text("switch")
}
}
And it looks like this:
enter image description here
How to use .search role to use it as kind of switch between two sets of tabs?
What do I want to achieve?
I want kind of TabView functionality with glass effect. But there should be also a button in the same line what TabView to switch between 2 sets of TabView. Is it possible?
1 Answer 1
- The
.search
role is intended for tab where users search. It does not mean "a button on the bottom right". - A future iOS version might change the design of tab views again, and move the search tab somewhere else.
- The tab bar looks completely different on iPads, appearing at the top of the screen, and the search tab is not separate from the other tabs. It is unclear how you want your tab bar to look on an iPad.
Based on these points, I would suggest that you build your own custom tab bar from primitive views, so that you can customise it however you like.
It is also worth noting that this design goes against the Human Interface Guidelines.
Don’t disable or hide tab bar buttons, even when their content is unavailable. Having tab bar buttons available in some cases but not others makes your app’s interface appear unstable and unpredictable. If a section is empty, explain why its content is unavailable.
If you don't care about any of that and just want it to work on the current version of iPhoneOS, you can technically use .hidden
to hide the tabs:
struct ContentView: View {
@State private var selectedTab = 0
@State private var switched = false
var body: some View {
TabView(selection: $selectedTab) {
Tab("", systemImage: "list.star", value: 0) {
Text("star1")
}
.hidden(switched)
Tab("", systemImage: "gear", value: 1) {
Text("gear1")
}
.hidden(switched)
Tab("", systemImage: "list.star", value: 2) {
Text("star2")
}
.hidden(!switched)
Tab("", systemImage: "gear", value: 3) {
Text("gear2")
}
.hidden(!switched)
Tab("search", systemImage: "arrowshape.left.arrowshape.right", value: 4, role: .search) {
Color.clear
.task {
switched.toggle()
// update the tab selection so that a non-hidden tab is selected
if switched {
selectedTab = 2
} else {
selectedTab = 0
}
}
}
}
}
}