@NatashaTheRobot: This is the first video after Apple started releasing all WWDC sessions as videos that feels human and non-forced and r…

This is the first video after Apple started releasing all WWDC sessions as videos that feels human and non-forced and robotic. And it’s brilliant! Great job Anna & @mariachrstphr! #iPhoneDuo https://t.co/eO4xS5AvDK

TL;DR: This session guides developers on adapting toolbars for iPhone Duo’s new vertical layout, covering orientation adaptation, item prioritization, content customization, and overflow management.

Design Principles & Initial Adaptation

iPhone Duo’s unique, wider aspect ratio moves traditional top/bottom toolbars to the sides for better accessibility and to maximize vertical content space. The same components adapt to different layouts (outer screen, inner landscape, inner portrait).

Getting Your App Ready

To enable vertical toolbars on iPhone Duo, perform these initial steps:

1. Rebuild your app with the latest SDK. This action enables the new vertical behavior for standard components.
2. Use system-provided navigation containers. Ensure you are using the toolbar modifier within SwiftUI containers like NavigationStack or NavigationSplitView. In UIKit, use UINavigationController and UITabBarController to manage toolbars, rather than creating custom UIToolbar instances. System content from child components is not considered for custom toolbar implementations.

Ordering & Placement of Toolbar Items

When vertical, toolbars form a stack. Proper ordering is crucial for a consistent user experience.

• Maintain Recommended Order: Place primary navigation controls (back, close) at the top, followed by important actions (e.g., “Done”). Use SwiftUI’s cancellationAction or UIKit’s leadingItem (with leftItemSupplementsBackButton set to false) for custom back/close buttons. Place important actions using SwiftUI’s topBarPinnedTrailing or UIKit’s pinnedTrailingGroup.
• Use Vertical Separators: These visually separate items placed in the top and bottom sections when unified into a single toolbar.
• Consistency is Key: Not all interface states (like certain split view configurations) will result in a vertical toolbar. Keep item placement consistent so users don’t have to relearn control locations.

Customizing Toolbar Content for the Vertical Axis

Vertical toolbars have a fixed width and flexible height, favoring symbol-based representations.

• Icons vs. Text: By default, items with icons (like back and share) will switch to a vertical axis, while pure text items (like “Edit”) remain horizontal.
• Provide Complete Information: Always provide both a title and an image for toolbar items, even if using just a symbol. The system uses the title in overflow menus and for contextual display decisions.
• Using AxisBehavior: Use the new AxisBehavior API to control which axis an item should prefer.
  • horizontal: For items that should not move vertically (e.g., an “Edit” button that toggles between a symbol and text).
  • vertical: For custom views that support a vertical layout (e.g., a custom compass view).
• Optimize for Symbols: Prefer symbols over pure text to facilitate vertical layout. Use badges (via the badge API) to convert text+symbol items (like a count) into pure symbols.
• Custom Views: Ensure custom views adapt to the toolbar’s fixed width. Use the toolbarVerticalEdge environment property to detect if a vertical toolbar is present and adjust your view’s layout (e.g., hiding titles, adjusting dimensions) accordingly.
• Spacing: Do not create extra spacing. Flexible spacers collapse to zero size vertically, while fixed spacers respect their minimum size.

Managing Overflow Menus

Vertical toolbars can overflow due to limited vertical space, keyboards, or picture-in-picture.

• Compression Priority: Decide whether the toolbar or a tab bar should compress first. Use the toolbarCompressionBehavior API to set this preference per view (e.g., compress toolbar first in navigation-centric views, compress tab bar in task-oriented views).
• Consolidate Overflow: Merge your app’s existing overflow actions into the single, system-managed overflow menu using SwiftUI’s ToolbarOverflowMenu or UIKit’s additionalOverflowItems.
• Assign Visibility Priority: Use the visibilityPriority API to control which items move to the overflow first. Group items by priority, then assign priorities (high, low, custom) within groups. Keep high-priority items (like frequently used actions or items with badges) visible longer.

When to Disable Vertical Behavior

Some apps may benefit from keeping toolbars horizontal. Use the toolbarVerticalBehavior and preferredVerticalBarBehavior APIs to disable vertical toolbars in cases like:

• Single-page, bottom-heavy layouts (e.g., a calculator).
• Pages with minimal controls where a vertical bar would waste space (e.g., a view with only a close button).

Summary & Final Steps

The core change is moving toolbars to the side to balance content space and accessibility. To prepare your app:

1. Rebuild with the latest SDK.
2. Review all toolbars for vertical adaptation.
3. Update custom content to work in a vertical axis.
4. Assign overflow priorities for adaptive behavior.

Source: https://www.youtube.com/watch?v=2y6xvya0b8M