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?
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?
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:
Demo: regular
horizontal size class:
TabView {
Tab("Parties", systemImage: "party.popper") { Color.pink }
Tab("Planing", systemImage: "pencil.and.list.clipboard") { Color.yellow }
}
.environment(\.horizontalSizeClass, .compact) // 👈 Use this modifier
class MyTabBarController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
traitOverrides.horizontalSizeClass = .compact // 👈 Override like this, use `.unspecified` to see all tabs.
}
}
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
}
regular
layout. I couldn't find a SwiftUI way to bring it back.
Commented
Aug 1 at 6:06
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) }
}
}
}
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:
NSView.layoutSubtreeIfNeeded
)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.
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!
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.
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
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.
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.
compact
since it eliminates the "more" tab > 5 tabs.
Commented
Nov 3 at 14:51
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:
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.
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.
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
}
}
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
}
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!
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 }
mode
property on the tab bar controller but it had no effect.