杏z学習帳

Swift、Unityなどを中心に節操なく手を出してますまる

iOS13でUITabBarItemの画像位置調整の挙動が変わったっていう話(2019/10/02)

[Xcode]iOS13でUITabBarItemの画像位置調整の挙動が変わったっていう話

ざっくりまとめ。

です。

環境

前提

iOS 12 までは UITabBarItem で title を指定せずに image だけを指定した場合、
image が上に寄って見えるという事がありました。
(title を指定しなくてもその領域分が確保されるので、結果 image が上に寄って見えるという感じです)

タイトル無しで調整無しの場合

こういう感じの見え方です。気になります!

ということで、位置を調整するために imageInsets などをつかって調整することになります。

tabBarItem.imageInsets = UIEdgeInsets(top: 6.0, left: 0.0, bottom: -6.0, right: 0.0)

こういう調整をいれると...

タイトル無しで調整有りの場合

こうなって改善されます💪

問題

ところが iOS 13 でみるとこれがまた変わってきます。
どうなるかというと、逆に下に寄ってみえるようになります。

タイトルなしで位置調整有りの場合(iOS13)

原因

前提の手順を踏まえているので、すぐに思い当たるのが、位置調整した分だけ下に寄ってるのでは??🤔ということです。
実際、その調整を外せばいい感じに表示されます。
どうやら iOS 13 からは title 無しで image のみ設定された場合、自動で image をセンタリングして表示するようになったようです。
こちらのほうが期待している挙動ではあるのでそのこと自体は嬉しい改善なのですが(笑)

対処

ということで対処は簡単で、iOS のバージョンを見て分岐させて調整ロジックを入れましょう!ということです。

if #available(iOS 13.0, *) { } else {
    tabBarItem.imageInsets = UIEdgeInsets(top: 6.0, left: 0.0, bottom: -6.0, right: 0.0)
}

これで期待している表示になります!

補足

Xcode のバージョンは関係ない?

Xcode 10.x でビルドしようが、Xcode 11.1 でビルドしようが iOS 13.x の端末ではこの問題が発生する感じでした。
(僕が実際に検証したのは上記にあげたものですが、報告を受けたのは Xcode 10.3 でビルドしたもので検証端末は iOS 13.0 だったらしいので)
まだ Xcode 10.x だし iOS 13 特有の問題は関係かなぁ?...というわけではないです(笑)

SafeArea 有りの端末だと気づきにくい

チェックしていたはずなのに、なんで見逃したのか!?とか思ったのですが、
SafeArea がある端末だと UITabBar の下にもその分の余白があるので、なにか逆にちょうどいい塩梅にみえたんですよね(言い訳)

iOS13でSafeArea有りの端末(下寄ってるはずのバージョン)

どうでしょうか?これ下寄ってるバージョンなのですが、違和感ないですよね?(笑)
いやー気づかなかった。。いろんな端末でチェックしないとですねー。

参考