iPhone 5 の縦長画面に対応させたらボタンが押せない

iPhone 5 が登場して、従来と違って画面が縦長になりましたね。

対応も比較的簡単で、プロジェクトの TARGET 設定にある Summary に新設された "Retina (4-inch)" に画像を設定するだけ。

特に UITableViewController を使った実装であれば、なおさらそれだけで簡単に対応できるはずだったのですけど、UITableView の tableFooterView の Autosizing マスクのちょっとした設定が影響して、そこに配置した UIButton が押せなくなってしましました。

結果的には、Autosizing マスクの設定が間違っていて、それが iPhone 5 での縦長画面への拡大によって、間違いが発覚したような感じですけど。

 

たとえばこんな、普通の UITableViewController に普通に tableFooterView を配置したビューがあるとします。

このビューは、従来通りの 3.5 インチ用の画面サイズになっています。

 

ここで、たとえば次のような感じで、tableFooterView に配置しているオブジェクトの Autosizing マスクを設定していたとします。

まず、tableFooterView に配置した UIView そのものは、縦方向に拡大されるようにしてあります。

そして、その上に配置している UITextView も、縦方向に拡大されるようにしています。

ボタンについては、拡大せずに現在の位置に固定する設定になっています。

 

この条件は UITableView だけに限らず　UIView だけの場合でも同様です。

もっとも、サイズを変えるつもりがなくて Autosizing に触れなければこういう設定にはならないでしょうから、そもそもあまりこんな設定になっていることはないかもしれないですけど。

 

ともあれこのような状況で、UIButton よりも UITextView が手前に配置されている場合、これを iPhone 5 の縦長画面で実行すると、UITextView が UIButton の上を覆う形で配置されます。

iPhone 5 の画面が、Interface Builder で作成した従来サイズの UITableViewController よりも広いため、Xcode 4.5 と iPhone 5 の組み合わせで試す感じでは、このビューを表示するときには拡大されて表示する扱いになってしまう様子です。

そのため、設定されている Autosizing マスクの都合で、UIButton を、User Interaction が有効な UITextView が覆ってしまい、下に隠れた UIButton を押せなくなってしまいます。

 

今回の例では、UITextView の背景を透明のピンクで塗っているので被さっているのがすぐに判りますけど、背景色が透明だったりした場合には、なかなか気づけないこともあるかもしれません。

さて、今回の例は再現ついでに GitHub に置いてみました ので、もし上の説明でよくわからないことがあったら、実際に動かして試してみるとわかりやすいかもしれないです。

 

ちなみに、今回のような UIButton ではなく、UITabBar が機能しなくなる問題に遭遇したこともありました。

そちらについては iPhone 5 の縦長画面に対応させたらタブバーが押せない で原因と対処方法について記しましたので、必要であれば参考にしてみてください。