CODEWITHSUNDEEP
iosswiftswiftuiipadipados
Jorge Costa
Jorge Costa

Reputation: 327

Keep old TabView style in iOS / iPadOS 18.1

Running the app in iPad with iPadOS 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

Upvotes: 7

Views: 2467

Answers (2)

Suresh Rewar
Suresh Rewar

Reputation: 167

In iOS and iPadOS, size classes (compact and regular) control the layout behaviour of UI elements. We can get the old behaviour using TraitOverrides. This solves the issue.

Swift: self.traitOverrides.horizontalSizeClass = UIUserInterfaceSizeClass.compact

Upvotes: 1

Sweeper
Sweeper

Reputation: 273540

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.

enter image description here

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.

Upvotes: 9

Related Questions