skip to Main Content

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

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search