Spatial Interfaces: Three Pane Window

Mocking up a slightly more spatial version of a NavigationSplitView with an Inspector.

This is the first post in a new series called Spatial Interfaces. In this series we’ll dive deeper into some UI/UX concepts in visionOS.

Something that is pretty common on macOS and iPadOS is the combination of a NavigationSplitView and an Inspector. This creates a three pane UI that cane be simple but powerful for many uses. Unfortunately, visionOS doesn’t support the SwiftUI Inspector view (yet!).

While hacking something together for Looming Deadlines I thought I’d revisit an idea from Lab 005. In that lab we looked at a simple way to use offset and rotation modifiers to create a slightly more 3D layout with 2D content. This is what I came up with.

There are a few things that make this work.

• .plain window style to hide the default glass background.
• GeometryReader3D so our subviews can use the current window size
  • Left: .frame(width: proxy.size.width * 0.25 - layoutSpacing)
  • Center: .frame(width: proxy.size.width * 0.5)
  • Right: .frame(width: proxy.size.width * 0.25 - layoutSpacing)
• glassBackgroundEffect and thickMaterial to re-add some glass to the panes
• offset and rotation3DEffect to move the two side panes based on the value of rotatePanes
• opacity to show and hide the two side panes based on the value of showInspectorPane

We can toggle the rotatePanes value to animate the two side panes to a new position and rotation. This brings the content in a bit closer to the user and makes wide UIs like this a littler easier to use. One notable drawback is the difficulty of accessing the window resize controls when this mode is active. If a window has full width ornaments or toolbars, they might end up hidden by the rotated panes.

Some ideas to improve this

• Next and previous buttons to navigate records when the navigation pane is hidden. Or perhaps just swiping on records.
• Swap between a navigation stack and a Split View based on the visibility of the left sidebar.
• Make the window easier to use when the side panes are rotated.
• Adjust the offset and rotation values to account for the width of the window when resized by the user.

How else would you improve this project? We’ll keep noodling on it in some future posts.

The sample data for this project was generated by ChatGPT. It consists of a few short bios of some of the greatest minds from the history of computing. The content itself isn’t important here. I just needed something to build a UI with.

The code for this post is a mess. It is a stream-of-conscience mess of SwiftUI in a single ContentView file. You can find the project in the Example Code Projects repo.

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.