Prepare toolbar items for a vertical bar

Part 2 in the series "Vertical bars on iPhone Duo", based on Apple's Raise the bar with iPhone Duo talk.

1. Opt in to vertical bars on iPhone Duo
2. Prepare toolbar items for a vertical bar
3. Adapt custom toolbar views for iPhone Duo
4. Toolbar overflow and visibility priority on iPhone Duo

In the previous article, we got a vertical bar to appear. Now let's look at the items inside it.

You don't move items into a vertical bar yourself. You keep declaring the same toolbar content you always have, and the system decides which items can go vertical. This article is about how that decision works and how to influence it.

Toolbar content

Toolbar content can contain two pieces of data:

• Icon
• Title

Most of the time we might set only one, but we should provide both from now on and let the system choose the representation based on the context.

You can easily support sarunw.com by checking out this sponsor.

Screenshot Studio: Create App Store screenshots in seconds not minutes.

Try it for Free

Why two pieces of data really matter on iPhone Duo

The two axes have opposite constraints:

A horizontal bar can let a button grow as wide as its label needs. A vertical bar can't, because its width is fixed. A long text label has nowhere to go.

That single fact explains most of the guidance here: vertical bars suit symbol-only items.

How the system picks a representation

In the top and bottom bars

• an item prefers to show an icon.
• If there's no icon, it shows the text.

In the overflow menu

• it shows both.

None of that changes with vertical bars. What's new is one extra question the system asks: is this content better suited to a vertical or a horizontal axis?

• Items with an icon, like back and share, move to the vertical axis.
• Text-only items, like Edit, stay horizontal.

So if you're already setting both a title and an image, through a SwiftUI Label or the properties on UIBarButtonItem, you're most of the way there.

// SwiftUI
Label("Share", image: "arrowUp")

// UIKit
UIBarButtonItem(title: "Share", image: arrowUp)

Override the default with axis behavior

Most of the time, you shouldn't need to care where your button is placed. The system should handle that for you.

But in some special cases, we might need to give a hint to the system about our preferred placement with the new axisBehavior API.

There are two cases where this override might be needed.

Keep related items on the same axis

Some buttons swap between a symbol and text. The Edit button in Clock turns into "Done". A symbol could go vertical, but text can't, and an item that jumps between bars as you tap it feels broken.

The system Edit button already handles this. For a custom button that swaps between a symbol and text, mark it horizontal only:

// SwiftUI
.toolbar {
    ToolbarItem {
        SelectOrDoneButton()
    }
    .axisBehavior(.horizontalOnly)
}

// UIKit
item.axisBehavior = .horizontalOnly

Let a custom view go vertical

The system keeps custom views and complex views horizontal by default, because it can't tell whether they'll fit a fixed width.

If yours does work vertically, say so with .axisBehavior(.verticalPreferred):

// SwiftUI
.toolbar {
    ToolbarItem {
        CompassView()
    }
    .axisBehavior(.verticalPreferred)
}

// UIKit
let item = UIBarButtonItem(customView: CompassView())
item.axisBehavior = .verticalPreferred

Making that view actually work in a vertical bar takes a bit more than the flag. That's the next article.

You can easily support sarunw.com by checking out this sponsor.

Screenshot Studio: Create App Store screenshots in seconds not minutes.

Try it for Free

Summary

Vertical bars have a fixed width, so they favor symbol-only items. Keep giving the system both an icon and a title and let it choose. Use .horizontalOnly for items that swap between a symbol and text, and .verticalPreferred for custom views that can adapt.

In the next article, we get those custom views ready for the vertical axis.