はじめに

こんにちは。システム開発部のryu_kobayashiです。普段は「ニフティ不動産」のiOSアプリの開発を担当しています。

先日、弊社から提供している「ニフティ不動産アプリ 賃貸版」にてXcode 16へ対応したバージョンをリリースしました。

その際、iPadOS 18以降のUITabBarControllerを利用している画面で、タブバーの位置が変わってしまいました。
これにより、ユーザーの操作性が変わるだけでなく、一部タブが省略されるケースが発生してしまうため、iPadOS 17以前のタブバーと同じような表示に修正することにしました。

この記事では、その事象の内容と、以前の表示に近い形に修正する方法についてご紹介したいと思います。

事象

iPadOS 17以前のOSでは次のように表示されていました。

Xcode 16でビルドしたところ、iPadOS 18では次のように表示されました。
タブバーが画面上部に表示されていて、デザインが変わっています。また、「アプリ設定」の項目が「＞」に置き換えられてしまっています。

修正方法

viewDidLoadメソッドにて、iOS 18以降かつデバイスがiPadの場合のみ、UITabBarControllerのプロパティ traitOverrides.horizontalSizeClass を .unspecified に設定しました。

// HogeViewController.swift

// UITabbarControllerを継承しているViewController
private var fugaViewController: FugaViewController

override func viewDidLoad() {
    // 以下を追記する
    if #available(iOS 18.0, *) {
        if UIDevice.current.userInterfaceIdiom == .pad {
            self.fugaViewController?.traitOverrides.horizontalSizeClass = .unspecified
        }
    }
}

※Developer Forumsを見ると .compact でも直せるようですが、本アプリは横画面固定のためか表示が崩れてしまいました。

修正後は、iPadOS 18以降でもタブバーが画面下に表示されるようになりました。

そのほかの表示差分

タブバーが上に表示される問題は解消されたのですが、iPadOS 18以降とそれ以前ででレイアウトに若干の差分が出てしまいました。

• テキストとアイコンの並び：iPadOS 18以降では横並びになった。
• バッジの位置：アイコンの上部 -> アイコンの右斜上になった。

とはいえ、修正前と比較すると従来のタブバーとほとんど変わらない見た目になったため、チームで会話をした上でこの表示差分は許容することになりました。

iPadOS 17以前

iPadOS 18以降

さいごに

本記事では、iPadOS 18以降でタブバーの位置が変わってしまう問題についての修正方法を紹介させていただきました。

今回はtraitOverrides.horizontalSizeClass = .unspecifiedを設定して対応しましたが、アプリの画面固定の有無によっては.regularもしくは.compactの設定が必要な場合があると思います。それぞれ実際に動作確認を行なって視認性・操作性に問題がないかを確認することが大切です。

iOSのバージョンアップデートによってレイアウトの仕様が変わってしまうのはiOSアプリ開発において避けられない課題の一つです。引き続き、iOSのアップデートに伴うレイアウトの変化には注意を払いながらアプリの開発を進めていきます。

本記事が少しでもお役に立てれば幸いです。

参考資料

• Platforms State of the Union
• iPadOSのタブとサイドバーの利用体験を向上
• iPadOS 18 – Move Tab Bar to bottom
• iOS 18のiPadでタブがえらいことになってたので戻す