49

iPadOS 18 introduces new API for creating tab bars.

Create a UITabBarController and assign an array of UITab objects to its tabs property.

How do we disable this new style and keep the tab bar at the bottom for iPadOS 18?

enter image description here

2
  • 3
    I'd love to know that as well. It seems like a massive change and I'd hope that Apple would let us customize this / revert it back. I have tried setting the mode property on the tab bar controller but it had no effect.
    – Lukas Petr
    Commented Jun 19 at 11:45
  • Please note the accepted answer will cause issues if you have customised your tabBar's UI/behaviour. It will require extra code. There is an easier solution to simply force the system to revert to the old way. I've posted the details below as an answer Commented Nov 4 at 11:49

13 Answers 13

38

This is the new regular design of the TabView. To work around this, you can use the compact value as the horizontalSizeClass:

Demo: compact horizontal size class: Demo1

Demo: regular horizontal size class: Demo2

SwiftUI
TabView {
    Tab("Parties", systemImage: "party.popper") { Color.pink }

    Tab("Planing", systemImage: "pencil.and.list.clipboard") { Color.yellow }
}
.environment(\.horizontalSizeClass, .compact) // 👈 Use this modifier
UIKit
class MyTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        traitOverrides.horizontalSizeClass = .compact // 👈 Override like this, use `.unspecified` to see all tabs.
    }
}

💡 Prevent unintended behavior

Since you are overriding the size class, you should restore the original one for each Tab you want like this SwiftUI example:

@Environment(\.horizontalSizeClass) var originalSizeClass // 👈 Get original size class from the environment

var body: some View {
    TabView {
        Tab("Parties", systemImage: "party.popper") {
            PartiesView()
                .environment(\.horizontalSizeClass, originalSizeClass) // 👈 Apply the original size class on the content of each tab
        }
    }
    .environment(\.horizontalSizeClass, .compact) // 👈 You are overriding the size class here
}
7
  • thanks , this worked for me however I used unspecified case because the compact case did not showed all of my tabs and added more tab at the end , but the issue is that right now the tabs names are under the images but before I had them besides the image of the tabs, is it possible to modify this one as well ? Commented Aug 1 at 4:41
  • 1
    @SaeedRahmatolahi I'm afraid to say that this new design has replaced the old horizontal regular layout. I couldn't find a SwiftUI way to bring it back. Commented Aug 1 at 6:06
  • thanks @Mojtaba , actually I am using it for UIKit and as our target is iOS 12 I should just stick to UIKit Commented Aug 1 at 6:08
  • 2
    thanks, it's the best solution, it should be an accepted answer Commented Sep 17 at 16:08
  • 2
    Be careful about this approach. This overrides the traitCollection so that the child VCs in the tabbarVC will also have overridden traits. Commented Sep 18 at 12:17
18

After playing around, I have found the following to work the best. It works with split screen resizing, the more tab, keeps the original Tab Bar on iPhones and older iOS, adjusts layout margins for child view controllers, and can still compile under Xcode 15.

Basically it just hides the new tab bar and places the old style back, copying the tab bar items and selected item across.

class CustomTabBarController: UITabBarController {

    /// Active for iPads running iOS 18+ where the traditional tab bar has been removed by Apple
    lazy var alternateTabBarActive: Bool = {
    #if compiler(>=6.0) // Compiler flag for Xcode >= 16
        if #available(iOS 18.0, *), UIDevice.current.userInterfaceIdiom == .pad {
            self.isTabBarHidden = true
            return true
        }
    #endif
        return false
    }()
    
    var tabBarHeightConstraint: NSLayoutConstraint?
    
    lazy var alternateTabBar: UITabBar = {
        UITabBar()
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        if self.alternateTabBarActive {
            self.tabBar.isHidden = true
            
            self.alternateTabBar.items = self.tabBar.items
            self.alternateTabBar.selectedItem = self.tabBar.selectedItem
            
            if UIDevice.current.userInterfaceIdiom == .pad {
                // Add Custom Tabbar
                let tabbar = self.alternateTabBar
                self.view.addSubview(tabbar)
                
                // Add layout constraints
                tabbar.translatesAutoresizingMaskIntoConstraints = false
                let bottom = tabbar.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
                let leading = tabbar.leadingAnchor.constraint(equalTo: self.view.leadingAnchor)
                let trailing = tabbar.trailingAnchor.constraint(equalTo: self.view.trailingAnchor)
                let height = NSLayoutConstraint(item: self.alternateTabBar, attribute: .height, relatedBy: .equal,
                                                toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 1)
                self.tabBarHeightConstraint = height
                self.view.addConstraints([bottom, leading, trailing, height])
            }
        }
    }

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        
        if self.alternateTabBarActive {
            self.alternateTabBar.items = self.tabBar.items
            self.alternateTabBar.selectedItem = self.tabBar.selectedItem
        }
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        
        if self.alternateTabBarActive {
            // Adjust height constraint
            let height = self.alternateTabBar.intrinsicContentSize.height
            self.tabBarHeightConstraint?.constant = height
            
            // Set insets for child view controllers
            let bottomInset = self.alternateTabBar.frame.size.height-self.view.safeAreaInsets.bottom
            self.viewControllers?.forEach { $0.additionalSafeAreaInsets = UIEdgeInsets(top: 0, left: 0, bottom: bottomInset, right: 0) }
        }
    }

}
4
  • 1
    This solution works great! The one issue I did notice is that the tab bar won't appear transparent at the end of a table view when the app is in a compact width on iPad (but will be transparent on iPhone). Commented Sep 22 at 21:14
  • This works on iPad, but if the app runs on macOS 15(Sequoia), both the tab view in window bar and bottom of the view will be displayed. just saw the another answer about this
    – funclosure
    Commented Oct 22 at 12:11
  • Really great solution, it does not come with the bad side effects that we get when overriding horizontalSizeClass to have the same old behavior. Commented Nov 6 at 10:52
  • Great solution - thank you very much! Has anyone tested your solution with the extended fix for MacOS? would be great to know if there is an all-encompassing solution Commented Nov 15 at 10:16
7

For iPad Apps Running on macOS Sequoia

It seems that macOS Sequoia shows the top tabs even when the tab bar controller is installed within a split view controller.

This leads to two problems:

  1. The tabs are "duplicated" (they appear both at the bottom and the top, see screenshot below)
  2. The view crashes regularly (on NSView.layoutSubtreeIfNeeded)

Duplicated tab bar

The hack to set the horizontal size class to compact does not work in my experience for macOS. I had to combine it with the solution described here.

In the end, my final solution is:

class MyTabBarController: UITabBarController {
    init() {
        super.init(nibName: nil, bundle: nil)
        if #available(iOS 18, *), ProcessInfo.processInfo.isiOSAppOnMac {
            /// Fix for macOS Sequoia: without it, the tabs
            /// appear twice and the view crashes regularly.
            
            /// Hides the top tabs
            self.mode = .tabSidebar
            self.sidebar.isHidden = true
            
            /// Force the bottom tabs to be visible
            self.traitOverrides.horizontalSizeClass = .compact
        }
    }
}

The side effect on children of setting the compact size class remains and can be fixed using the solutions described above.

1
  • thanks for sharing this, encountered this after upgrading to macOS 15, I'll give a try and share the updates if there is any 🙏 I commented under the accepted answer to here as well for ppl having the same issue
    – funclosure
    Commented Oct 22 at 12:15
5

I encountered several solutions on this topic, but unfortunately, none of them worked for my case. After numerous trials and errors, I found a solution that works as expected. Below is the implementation:

UIKit Solution:

import UIKit

class CustomTabBarController: UITabBarController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        if #available(iOS 18.0, *) {
            // Add the tab bar as a subview since its hierarchy has changed in iOS 18
            view.addSubview(tabBar)
            
            // Override the horizontal size class to compact
            traitOverrides.horizontalSizeClass = .compact
        }
    }
}

Additional Fix for Device Rotation If your app experiences issues after a device rotation, you can implement the following code in the same CustomTabBarController class:

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    
    if #available(iOS 18.0, *) {//Looks weird but this is an important hack
        traitOverrides.horizontalSizeClass = .regular
        traitOverrides.horizontalSizeClass = .compact
    }
}

Note on Child View Controllers: Be aware that the above changes may affect your child view controllers. To address this, you should reset the traitOverrides in your child view controllers or in a base view controller. Here’s an example:

import UIKit

class MyBaseViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Resetting the overridden size class for view controllers
        if #available(iOS 17.0, *) {
            traitOverrides.horizontalSizeClass = UIDevice.current.userInterfaceIdiom == .pad ? .regular : .compact
        }
        
        // Additional setup can be done here
        setupUI()
    }
    
    private func setupUI() {
        // Your UI setup code here
    }
}

Conclusion:

This solution effectively manages the tab bar and ensures that your app remains stable during device rotations. Feel free to adapt the code to fit your specific use case!

0
4

Following Mojtaba Hosseini's answer, I was able to get his solution to work in my Obj-C project. Pretty simple fix, and I cannot find any references from Apple recommending against using a compact size class on an iPad. However, knowing Apple, if this is not a regular method, there is always a chance it could break in the future since it is something they are not likely testing. So I am considering this a temporary fix until either; A. my app is ready for a UI overhaul, or B. Apple officially implements this option as an alternative tab bar method for iPadOS 18 and up.

In viewDidLoad for my UITabBarController class:

Objective C

if (@available(iOS 18.0, *))
{
    if (UIDevice.currentDevice.userInterfaceIdiom == UIUserInterfaceIdiomPad)
    {
        self.traitOverrides.horizontalSizeClass = UIUserInterfaceSizeClassCompact; //TAB BAR ON BOTTOM
        
    }
    
}

That's all I needed. Orientation changes work as expected, as do modal and alert windows. I will report back if I find any problems.

1
  • Thanks, that works for me too! Please post here if you find any problem with this solution. Commented Oct 29 at 14:29
4

The thing they changed is they added a new method in iOS 18 UITabBarController API called _updateVisualStyleForTraitCollection:

After disassemble it seems that they check for userInterfaceIdiom of trait collection from method parameter and based on that, deicide whether to use _UITabBarControllerVisualStyle_Pad or _UITabBarControllerVisualStyle_iOS.

So to revert the behaviour to the one that was before iOS 18 we need to swizzle the _updateVisualStyleForTraitCollection: and call super with overridden userInterfaceIdiom:

    enum Swizzler {

        static func swizzleSelector(classToSwizzle: AnyClass,
                                           originalSelector: Selector,
                                           swizzledSelector: Selector) {
            guard let originalMethod = class_getInstanceMethod(classToSwizzle, originalSelector),
                  let swizzledMethod = class_getInstanceMethod(classToSwizzle, swizzledSelector) else {
                return
            }

            let didAddMethod = class_addMethod(classToSwizzle,
                                           originalSelector,
                                           method_getImplementation(swizzledMethod),
                                           method_getTypeEncoding(swizzledMethod))

            if (didAddMethod) {
                class_replaceMethod(classToSwizzle,
                                swizzledSelector,
                                method_getImplementation(originalMethod),
                                method_getTypeEncoding(originalMethod));
            } else {
                method_exchangeImplementations(originalMethod, swizzledMethod);
            }

    }

    class HackedTabBarController: UITabBarController {
 
        init() {
            if #available(iOS 18.0, *) {
                Swizzler.swizzleSelector(classToSwizzle: HackedTabBarController.self,
                                         originalSelector: NSSelectorFromString("_updateVisualStyleForTraitCollection:"),
                                         swizzledSelector: #selector(swizzeled__updateVisualStyleForTraitCollection(traitCollection:)))
            }

            super.init(nibName: nil, bundle: nil)
        }

        @available(iOS 18.0, *)
        @objc dynamic
        func swizzeled__updateVisualStyleForTraitCollection(traitCollection: UITraitCollection) {
            guard traitCollection.userInterfaceIdiom == .pad else {
                // call super
                self.swizzeled__updateVisualStyleForTraitCollection(traitCollection: traitCollection)
                return
            }

            let phoneIdiomTraitCollection = traitCollection.modifyingTraits { mutableTraits in
                mutableTraits.userInterfaceIdiom = .phone
            }

            // call super with modified trait collection
  
 self.swizzeled__updateVisualStyleForTraitCollection(traitCollection: phoneIdiomTraitCollection)
    }
}

This is a better solution then overriding whole trait collection of UITabBarController as it doesn't have any side effects (for example changing horizontal size class may disable > 5 tabs in UITabBar)

Be aware that you should always obfuscate private api usage (encode selector strings), before submitting to AppStore

4
  • 1
    This works perfectly. Great discover!
    – ribilynn
    Commented Oct 19 at 3:46
  • Changing horizontalSizeClass to unspecified seems to work the same without this complexity. It's impressive but not sure it's necessary? Commented Nov 3 at 16:14
  • Perfect, no need to fix child VC sizeClasses. Works great with split-screen/side-over, TabItems have old design (title aside of an icon, not below), works with VC.hidesBottomBarWhenPushed (accepted answer with fake bar not). Fix M1 macOS app top-bar without additional hacks!
    – ArtFeel
    Commented Nov 14 at 9:50
  • @DanRosenstark, changing horizontalSizeClass to unspecified works at a first glance but yet it has UI bugs: when showing child controllers, tab items are in wrong design and you can't add more then 5 items in tab bar just to mention a few
    – ptfpn
    Commented Nov 29 at 12:07
2

For UIKit I have a simple solution involving a custom UITabBarController and traitOverrides based on @kienw solution but much simpler:

class CustomTabBarController: UITabBarController {
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        updateTraitOverrides()
    }

    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)

        updateTraitOverrides()
    }

    private func updateTraitOverrides() {
        guard #available(iOS 18.0, *)
        else { return }

        // Update the current size class to display original design
        traitOverrides.horizontalSizeClass = .compact

        if let original = UIApplication.shared.firstKeyWindow?.traitCollection.horizontalSizeClass {
            // Updates every tab with the window size class
            viewControllers?.forEach { $0.traitOverrides.horizontalSizeClass = original }
        }
    }
}

extension UIApplication {
    var firstScene: UIWindowScene? { connectedScenes.compactMap { $0 as? UIWindowScene }.first { $0.windows.count > 0 } }
    var firstKeyWindow: UIWindow? { firstScene?.windows.filter {$0.isKeyWindow}.first }
}

If you update dynamically the tabs, you should call updateTraitOverrides() after any change, otherwise the new view controllers will be design with the .compact size class.

0
2

Assigning .compact to traitOverrides.horizontalSizeClass will restore the tabs to the bottom of an iPad, but if your app has more than 5 tabs you will have a more option similar to the iPhone tab interface. If you have an app with 6 or more tabs and want them all displayed you should assign .unspecified to traitOverrides.horizontalSizeClass which restores the original look and functionality prior to iOS 18.

1
  • This is so much better for me than compact since it eliminates the "more" tab > 5 tabs. Commented Nov 3 at 14:51
1

For UIKit, this is my workaround to revert the tab bar back to the old look (displayed at the bottom). Actually, the workaround is only required for:

  • iPadOS 18 AND
  • regular width size class The tab bar will always be at the bottom when the app is in compact width size class (i.e. 1/3 split view or slide over).

Note: The workaround is similar to the one from Mojtaba Hosseini, but this one is more specific for UIKit.

class CustomTabBarController: UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        guard #available(iOS 18, *), UIApplication.shared.isPad else {
            return
        }
        
        // Setting the horizontal size class will force the tab bar
        // to be displayed at the bottom.
        traitOverrides.horizontalSizeClass = .compact
    }
}

class CustomTabBarChildNavigationController: UINavigationController {
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        
        adjustSizeClass()
    }
}

class CustomTabBarChildViewController: UIViewController {
    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        
        adjustSizeClass()
    }
}

extension UIViewController {
    var rootViewControllerHorizontalSizeClass: UIUserInterfaceSizeClass {
        guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
              let keyWindow = windowScene.windows.first(where: { $0.isKeyWindow }),
              let rootViewController = keyWindow.rootViewController else {
            return .regular
        }
        
        return rootViewController.traitCollection.horizontalSizeClass
    }

    func adjustSizeClass() {
        guard #available(iOS 18, *), UIApplication.shared.isPad else {
            return
        }
        
        // The child view controllers of the tab bar should follow the horizontal size class of the
        // root view controller else it will have the side effect, e.g. the child view controller
        // will show the content using compact horizontal size class.
        traitOverrides.horizontalSizeClass = rootViewControllerHorizontalSizeClass
    }
}

Now, change your existing subclasses to inherit the new class:

  • UITabBarController -> CustomTabBarController
  • UINavigationController -> CustomTabBarChildNavigationController
  • UIViewController -> CustomTabBarChildViewController

When you no longer needs the workaround (e.g. finally want to adopt the new tab bar), you can simply change the classes back to inherits the original UIKit classes again.

It works fine for my app so far, which only has 2 tabs. This workaround also works fine when switching between different size classes (e.g. split view and multitasking or slide over).

The only side effect that I see so far is the tab name now is below the image instead of on the right of the image.

Please let me know if you find any issue with this workaround.

0

to avoid subclassing, one could swizzle viewWillLayoutSubviews

here is how to disable the new design, but keep the traitCollection for other views:

extension UIViewController {
    public static let swizzleViewWillLayoutSubviews: Void = {
        guard let originalMethod = class_getInstanceMethod(UIViewController.self, #selector(viewWillLayoutSubviews)) else { return }
        guard let swizzledMethod = class_getInstanceMethod(UIViewController.self, #selector(swizzled_layoutSubviews)) else { return }
        method_exchangeImplementations(originalMethod, swizzledMethod)
    }()

    @objc func swizzled_layoutSubviews() {
        swizzled_layoutSubviews()
        adjustSizeClass()
    }

    var windowSizeClass: UIUserInterfaceSizeClass? {
        guard let windowSizeClass = UIApplication.shared.firstKeyWindow
        else { return nil }
        return windowSizeClass.traitCollection.horizontalSizeClass
    }

    func adjustSizeClass() {
        guard #available(iOS 18, *), UIDevice.current.userInterfaceIdiom == .pad else {
            return
        }

        if self is UITabBarController {
            traitOverrides.horizontalSizeClass = .compact
            return
        }

        if let windowSizeClass {
            traitOverrides.horizontalSizeClass = windowSizeClass
        }
    }
}

then in your AppDelegate you would need to add this line before everything else

    if #available(iOS 18, *), UIDevice.isIPad() {
            UIViewController.swizzleViewWillLayoutSubviews
        }

👉 this solution should work for all UIViewController's in the app and it's subclasses such as UINavigationController meaning that only the tab bar will have the .compact trait applied.

0

Accepted answer will cause issues if you have customised your tabbar and requires editing a lot of code. For example I added custom gradients to mine, and tweaked one of the items to have an animatable image (to highlight an action in progress). There is an easier solution to simply re-enable the old tab bar. I placed this inside my viewWillAppear and it fixed both iPad and mac "Designed as iPad" to use the old tab bar and hide/remove the new one

if #available(iOS 18.0, *), UIDevice.current.userInterfaceIdiom == .pad {
            
    // Both iPad and Mac, as mac is running "Designed for iPad"
    traitOverrides.horizontalSizeClass = .unspecified
            
            
    if ProcessInfo.processInfo.isiOSAppOnMac {
        /// Fix for macOS Sequoia: without it, the tabs
        /// appear twice and the view crashes regularly.
                        
        /// Hides the top tabs
        self.mode = .tabSidebar
        self.sidebar.isHidden = true
    }
}
-3

I was poking around and managed to get the old tab bar back by overriding the horizontalSizeClass. You need to subclass the main UITabBarController and put this inside:

override var traitCollection: UITraitCollection {
    let compactTraitCollection = UITraitCollection(horizontalSizeClass: .compact)
    return UITraitCollection(traitsFrom: [super.traitCollection, compactTraitCollection])
}

And then you can also override the size class on the tab bar itself to correctly handle the different layout (tab bar image on the left and label on the right). In the -viewDidLoad() of your custom tab bar controller, add the following:

if #available(iOS 18.0, *) {
    self.tabBar.traitOverrides.horizontalSizeClass = .regular
}

enter image description here

And lastly, to also correctly handle split view on iPad and switching between different tab bar layouts, add this to your subclass:

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    if #available(iOS 18.0, *) {
        let sizeClass = self.view.window?.traitCollection.horizontalSizeClass ?? .regular
        self.tabBar.traitOverrides.horizontalSizeClass = sizeClass
        
        // Also override all the children
        for viewController in self.viewControllers ?? [] {
            viewController.traitOverrides.horizontalSizeClass = sizeClass
        }
    }
}

Please be aware that this solution has possible downsides such as presented views not correctly displaying because of the overridden size class (this can be observed when presenting an alert - normally it would show up as a popover on iPad, but with this hack it shows up at the bottom. Use at your own risk!

enter image description here

-3

Apple has released isTabBarHidden, where the default tabbar by Apple should be displayed. Just set it to false.

if #available(iOS 18.0, *) { isTabBarHidden = true }

1
  • 1
    This just hides the tab bar, it doesn't make it use the older 'bottom' style
    – Ric Santos
    Commented Oct 9 at 6:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.