iOS AutoLayoutに甘んじた結果の失敗談

  • 2021.10.04
222
NO IMAGE

昔と違い、近年ではiPhoneの画面サイズも多様かされていて、Android開発同様にAutoLayoutでデザインするのが常識のとなっています
そんな中、AutoLayoutに任せっきりのマインドからきた「おやっ?」と思った失敗談です

※時系列として、iPhone 13が出る前の話です

前提

  • XCode 12.0
  • 画面のレイアウト(制約含む)はStoryboardを使って定義している
    一部、データ条件に応じた、表示/非表示、画像の切り替えはコード側で制御
  • iPhoneだけをターゲットにした開発

発生した問題

iPhone 12 Pro Maxの時だけ、TabBarの表示領域が意図した通りに確保されていなかった
これにより、操作はできるものの見栄えが極めて悪い状態となってしまった

よく見たら、Storyboard上でアイコンが■で表示されているではないか。。
(この時点で、開発者の意図した状態ではなかった)

制約の設定内容

  • Tab BarはView上で下付き
    Tab Bar自体には高さの制約は設定しない
  • UIViewはTab Barにびったりくっつける
    VerticalがBottom Space to: Tab Bar
  • VIEW上で、制約のPriorityは全て同じ

iPhone 12 Pro Max(想定外)

UIViewがTab Barに被っている?ように表示される
iphone12promax-459x1024.png

Other(期待通り)

期待した通り、表示される
(Tab Bar内のアイコンに対して、領域が確保されている)
other.png

原因


StoryboardでBar ItemのImageを正しく設定できていなかった?ことにより、TabBar内のItemのコンテントのサイズが正しく伝播できなかった模様
※ただし、実機や、シミュレータで対象の画面を表示した場合には、意図した画像は表示されている

Tab Bar ItemのImage(Selected Imageにも)の箇所に意図した画像が表示されていなく、"画像不明"として表示されている
青色のヤシの木みたいになっているのが、Storyboard上で画像を認識できていないことを指している
detail.png

設定されていた画像自体は、プロジェクト内に存在していたが、拡張子は指定していなかった

最初からこうなのか、途中からこうなったのかは記憶が定かではないが、ダークモードの画像を整理している時に、漏れた気がする
で、適当な実機、適当に選んだシミュレータで問題なかったので、気づくのに遅れた(実機はiPhone 11、シミュレータはiPhone SE(第二世代)で主に確認していた)

対応

Storyboard上のTab Bar ItemのImage(Selected Imageにも)に、表示したい画像が認識されるように指定
※前述の"画像不明"になってしまっていた箇所を画像を認識できるように指定

余談

原因が分かった後に、気になり、コードをおかしかったバージョンに戻してStoryboardでがちゃがちゃレイアウト確認のiPhoneを切り替えていたら、いつのまにか、期待した通りに表示されるようになっていました
(切り替えると、Storyboardのxmlが変わるので、それがスイートスポットにはまった?)

iPhoneぐらいのパターンなら、全パターン確認した方が良かったなと後悔。。
しかも、iPhone 12 Pro Maxとなると当時の最上位機種ですからね、それをカバーできていなかったと思うと残念でならなないです