iPhone 5 の縦長画面に対応させたらタブバーが押せない

iPhone 5 が登場して、従来の 3.5 インチから 4 インチへと、画面が縦長になりましたね。

さっそくその縦長画面に対応させてみたところ、ビルドしたアプリの UITabBar が押せなくなってしまったことがありました。

ちなみに UIButton が押せなくなったこともありましたけど、そちらについては iPhone 5 の縦長画面に対応させたらボタンが押せない の方に記してあります。

現象

さて、縦長対応を有効にするには、プロジェクトの TARGET 設定にある Summary に新設された "Retina (4-inch)" 用の Launch Images に画像を設定するだけと簡単だったので、Autosizing マスクを簡単に調整しつつ、Launch Images を設定してアプリを起動してみると…。

ナビゲーションバーは最上段に、ツールバーは最下段に配置されて、中央ビューのレイアウトを単純に引き延ばしただけでも、思いのほか綺麗にまとまりました。

が、動かしてみようとすると、なぜか下に配置したタブバーが操作できなくなってしまったのでした。

原因を調べる

原因を調べてみると、どうやら古いプロジェクト構成が影響しているのかもしれません。

認識できた範囲では、UITabBar を持つ画面が NIB ファイルで設計されていて、それがメインビューとして AppDelegate の Window に関連付けられている場合に、UITabBar が押せないという問題が発生しているみたいです。

Xcode 4.5 で Storyboard を無効化して Tab Bar プロジェクトを作成しても同じような構成にはならなかったので、もしかすると Xcode 3.2 とかで作成していたようなプロジェクトをそのまま継承してきたアプリとかで、ハマるポイントなのかもしれないです。

 

この問題を解消するために、まずは TARGETS の Summary で "Main interface" として設定されている NIB ファイルを確認します。

今回は "MainWindow.nib" だったので、それを開いて UITabBar 周りの実装部分を確認します。

このように UITabBar が構成されていますけど、今回はこの中の App Delegate に関連付けられた "Window" に注目します。

どこで定義されているのかまだよくわかってないのですけど、Xcode 4.5 よりも前で作成した NIB の場合は、Xcode 4.5 で開いても、サイズが従来の 3.5 インチサイズになっています。

UITabBar で読み込む他のビューについても、同様に 3.5 インチサイズになっています。

 

これ自体は基本的にはあまり問題ないはずで、Launch Images の "Retina (4-inch)" 画像を設定すれば、それだけで iPhone 5 での実行時に画面が 4 インチに合わせて引き延ばされて、細かいところを抜きにすればこれだけで 4 インチ画面で動くはずです。

ただ、もしかすると App Delegate に関連付けた Window は、このときどうやら自動で拡張されない様子です。

 

そこで実際に Window の "Clip Subviews" にチェックを入れると、ばっさりと UITabBar が切り落とされた様子が見て取れました。

つまり、iPhone 5 の縦長画面ではちゃんとできているように見えてはいても、Window は従来の 3.5 インチサイズのままになっていたため、タッチ操作の反応がその 3.5 インチの中でしかできなくなっていたのが、UITabBar が押せない原因だった様子です。

問題を解消する

Window のサイズが足りないなら、それを伸ばせば良いのでしょう。

この方法が適切かどうかは判らないですけど、とりあえず次のようにして問題を解消することができました。

 

その Window の Size を Attributes Inspector を使って、"None" から "Retina 4 Full Screen" サイズに変更します。

すると、インターフェイスビルダー上の Window が縦に長くなります。

 

これだけで修正は完了です。

このまま、アプリをビルドして起動すると、iPhone 5 の縦長画面でちゃんと UITabBar を操作することができるようになりました。もちろん従来の 3.5 インチサイズでも大丈夫でした。

これで 3.5 インチ画面のレイアウトが崩れるような影響もなさそうですし、きっとこの対応で問題ないんじゃないかと思います。