最近タブバーの上の情報を載るバーを追加したかったので、UITabBarをカスタマイズしてみました。 実現したい内容： アプリの使用中に、条件によって、バーが表示/非表示に変更できる タブの切り替えはバーの表示に影響を与えない 実装方針 実装イメージ バーを表示したい時 UITabBarの高さをバーの高さ分上げる barViewを子ビューとしてUITabBarの上に追加する バーを非表示したい時 barViewをUITabBarから外す UITabBarの高さを元に戻す スペック iPhone 11(iOS 14.0) Xcode 12.0 準備 タブが２つあるアプリを作成し、画面レイアウトの変更をわかりやすくするため、それぞれ黄色と赤の子ビューを追加します。 実装コード barViewの高さを36.0に設定します。 UITabBarの高さを変更するため、以下のコードを実行します。 目立つようにbarViewの背景色を青に設定し、実装後に画面の「表示」ボタンを押すと以下のようになりました。 タブの画像アイコンがbarViewに食い込んでいます。そのため以下のようにUITabBarの画像位置を調整します。 これでbarViewは実装イメージ通りに実装できました。 今度はbarViewが非表示の時に元に戻したいので、barViewが非表示の時に下記メソッドを実行します。 以上のコードを実装し、barViewが表示している状態でタブ切り替えしてからbarViewが非表示になると、以下のような画面崩れが発生してしまいました。 原因はUITabBarの高さが変更されましたが、画面のフレームが更新されていないことでした。そのためbarViewを表示・非表示した後に以下のメソッドを呼び、フレームを強制的に更新する必要があります。 おわりに 以上でUITabBarのカスタマイズができました。デザイン変更だけのカスタマイズの経験が多いのですが、UITabBarをリアルタイムに変更するのは初めてなので、実行する前にフレーム更新などは全然考えていませんでした。UITabBarをカスタマイズする方もいると思うので参考になれば幸いです。

Read more of this post