Search code examples
iosswiftswiftuiipadipados

Keep old TabView style in iOS 18.1


Running the app in iPad with iOS 18.1, it shows the TabView in a different layout and position.

I want to keep the Bottom TabView using full width with icons. Does Apple is removing the old style and forcing us to implement a custom TabView, or use a new one?

New TabView in iPad OS - 18.1

I already tried the Styles on Apple's documentation, but none of them fixes it.

https://developer.apple.com/documentation/swiftui/tabviewstyle


Solution

  • Does Apple is removing the old style and forcing us to implement a custom TabView, or use a new one?

    Correct. See the Human Interface Guidelines on the platform considerations of tab bars.

    Starting with iPadOS 18, the system displays a tab bar near the top of the screen. You can choose to have the tab bar appear as a fixed element, or include a button that converts it to a sidebar.

    The release notes of iOS 18 also mentions this:

    On iPad, TabViews using the automatic style have a new appearance in the regular horizontal size class. The tab bar now appears at the top, instead of the bottom, with a more compact visual appearance.

    Since this says "in the regular horizontal size class", it is possible to get the old style back by setting the environment value to .compact.

    TabView {
        Tab("Foo", systemImage: "globe") {
            Text("Foo")
        }
        Tab("Bar", systemImage: "gear") {
            Text("Bar")
        }
    }
    .environment(\.horizontalSizeClass, .compact)
    

    But I'd imagine this would cause problems later down the line. It's better to follow the HIG.