Xcode 9 + iPhone X シミュレータ(iOS 11) で UITabBar のアイコンとタイトルが上に寄ってしまうのを「とりあえずなんとかする」方法

この記事を読むにあたって

以下に記載される内容は「とりあえずなんとかする」方法である事に注意。
もっと正しい対応方法があったり、この挙動自体がシミュレータ固有のバグで実機では発生しない可能性も残されている。

---

ことの始まり

仕事で作成しているアプリの動作検証を行っていると表題の現象が発生した。
最初は「Bar + Item系のコンポーネントのAutoLayout化の影響だろうな…」と思いつつ状況を確認していたが、そもそもUITabBarはUIToolbar + UIBarButtonItemのカスタムビューのようにレイアウトを自在に決める余地がなく調査は難航した。

しばらくしてStack Overflowに以下の記事が上がっていた。

iOS 11 iPhone X simulator UITabBar icons and titles being rendered on top covering eachother - Stack Overflow
https://stackoverflow.com/questions/46214740/ios-11-iphone-x-simulator-uitabbar-icons-and-titles-being-rendered-on-top-coveri

対応

いくつかの対応案が上がっているが、実際に「とりあえずなんとかなった」のは以下の方法。
※ iPhone Xのみ発生するため「iPhone Xであること」を判定する処理も必要。

• UITabBar の superview の height を 32px 増やす
• UITabBar の height を 32px 増やす

終わりに

iPhone Xの発売まで少し時間があるので、最悪これでなんとかするとしても追って調査を行いたい。
本件について何か情報をお持ちの方がいらっしゃった場合、コメントいただけると助かります。

追記 (2017/11/29)

どうやら -setItems: を -viewSafeAreaInsetsDidChange より早い段階で行っていると崩れる場合がある模様。
-viewSafeAreaInsetsDidChange より後に -setItems: すると事象は発生しない。