[OS27] Adaptive Layouts - TabView - Force Sidebar?

Question

Created 3h

Replies 1

Boosts 0

Participants 1

Hello, To support adaptive layouts on iOS27 I want to display the sidebar on landscape iPhone app windows. (Like in the old days of the iPhone 6 Plus... >.>)

It appears that TabView ignores attempts to force it into sidebar mode even in the "Resize mode" of the device manager.

Am I holding it wrong? Is this a bug? Apple is not clear about how their components should be behaving to support adaptive layouts, and if rumors are true, it will be important come this fall.

Answered by J0hn in 895367022

Welp. iPhone 17 Pro simulator was able to make it work in resize mode... so... I guess it works fine <sigh>

Here's how I did it:

    @State private var tabViewWidth: CGFloat = .zero
    
    var horizontalSizeClass: UserInterfaceSizeClass {
        tabViewWidth > 736 ? .regular : .compact
    }
    
    var wantsSideBar: Bool {
        horizontalSizeClass == .regular
    }

        .onGeometryChange(
            for: CGFloat.self,
            of: { $0.size.width },
            action: {
                tabViewWidth = $0
            })
        .environment(\.horizontalSizeClass, horizontalSizeClass)
        .tabViewStyle(.sidebarAdaptable)
        .defaultTabBarPlacementIfAvailable(wantsSideBar ? .sidebar : .automatic)

Answer 1

J0hn OP

3h

Accepted Answer

Welp. iPhone 17 Pro simulator was able to make it work in resize mode... so... I guess it works fine <sigh>

Here's how I did it:

    @State private var tabViewWidth: CGFloat = .zero
    
    var horizontalSizeClass: UserInterfaceSizeClass {
        tabViewWidth > 736 ? .regular : .compact
    }
    
    var wantsSideBar: Bool {
        horizontalSizeClass == .regular
    }

        .onGeometryChange(
            for: CGFloat.self,
            of: { $0.size.width },
            action: {
                tabViewWidth = $0
            })
        .environment(\.horizontalSizeClass, horizontalSizeClass)
        .tabViewStyle(.sidebarAdaptable)
        .defaultTabBarPlacementIfAvailable(wantsSideBar ? .sidebar : .automatic)