Spatial SwiftUI: Window TabViews

SwiftUI TabViews are presented as Ornaments at the left side of the window.

Overview

TapViews in SwiftUI are navigation elements that contain multiple views. visionOS presents the tabs on the left side of the window. When we define the tab item for each view, we can specify an image/symbol and a text label. The images will always display. The text will only appear when the user focuses on the tab control for a short duration.

This will create a TabView with three tabs. We add the views that we want to display in the content region of the tab, then use the .tabItem modifier to include the image and text label.

TabView {
    Circle()
        .tabItem {
            Image(systemName: "circle.fill")
            Text("Circle")
        }

    Rectangle()
        .tabItem {
            Image(systemName: "rectangle.fill")
            Text("Rectangle")
        }

    Capsule()
        .tabItem {
            Image(systemName: "capsule.fill")
            Text("Capsule")
        }
}

The tab controls will display on the left side of the window using the .leading ornament anchor. There are a couple of things to keep in mind.

• Placing other ornaments with a leading placement will clutter the left side of the window. This will impact the usability of the TabView. When using a TabView, place any additional ornaments on the other three sides of the window.
• The TabView controls may overlap with other windows. We have a solution to that here.

Video Demo

Full Example Code

struct Example045: View {
    var body: some View {
        TabView {
            Circle()
                .fill(.stepRed)
                .frame(width: 200, height: 200)
                .tabItem {
                    Image(systemName: "circle.fill")
                    Text("Circle")
                }

            Rectangle()
                .fill(.stepGreen)
                .frame(width: 300, height: 200)
                .tabItem {
                    Image(systemName: "rectangle.fill")
                    Text("Rectangle")
                }

            Capsule()
                .fill(.stepBlue)
                .frame(width: 300, height: 200)
                .tabItem {
                    Image(systemName: "capsule.fill")
                    Text("Capsule")
                }
        }
    }
}

Download the Xcode project with this and many more examples from Step Into Vision.
Some examples are provided as standalone Xcode projects. You can find those here.