0

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?

asked yesterday
0

1 Answer 1

0
  • 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
 }
 }
 }
 }
 }
}
answered yesterday
Sign up to request clarification or add additional context in comments.

1 Comment

That solution sounds interesting. I will check it how it works.. I would like to make the same layout on iPad also. But maybe your proposition will also work as a toggle button. Let me check. For now, big thank you.

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.