iOS 6 と iOS 7 のレイアウトのズレを吸収する : iPhone プログラミング

iOS 7 からデザインコンセプトが変更されて、同じレイアウトの画面を iOS 6 と iOS 7 とで表示させたときに、実際のレイアウトがずれる場合があります。

そして Xcode 5 では、その違いを埋める方法として iOS 6/7 Deltas という設定項目が用意されました。

例えばステータスバーの存在の違い

たとえば iOS 7 環境では、ステータスバーが原則的にルートビューに重ねて表示されるようになりました。

これは iOS 7 のレイヤーを重ねる発想とコンテンツを大事にコンセプトに依るもので、ステータスバーなどにも透明感を持たせ、その下のコンテンツの存在感を示すのには不可欠な存在です。

 

ただ、iOS 6 と iOS 7 両対応の画面をデザインするとき、見た目だけでなくて座標も変わってくるので注意が必要です。

iOS 6 ではいちばん上を Y=0 でレイアウトすればいいのは変わらないのですが、iOS 7 の場合でステータスバーに重ねたくない場合は、iOS 6 のレイアウトから Y+=20 だけずらしてあげないといけません。

でもそんな iOS 6 と iOS 7 とでの座標の違いは、Xcode 5 の Interface Builder を使って吸収できます。

 

デルタ指定で配置位置の違いを吸収する

設定できる場所

Xcode 5 の Interface Builder で、iOS 7 と iOS 6 とでレイアウト位置をずらしたいコントロールを選択したら、Utilities の Size inspector を選択します。

Size inspector が表示されると、その View の項目の中に iOS 6/7 Deltas という項目があります。

デルタ値の設定方法

iOS 6/7 Deltas で設定できるものは frame についての x, y, width, height の 4 つです。

これらを、現在編集中の iOS レイアウトではないものに切り替わったときにどれだけ移動させるかを数値で指定できます。

 

たとえば iOS 6 のレイアウト編集画面であれば、編集画面を iOS 7 に切り替えたときに、ここで指定した値だけずれてレイアウトされます。

実際に編集画面を iOS 7 のレイアウトに切り替えると、それだけズレて配置されることが確認できます。そしてこのとき、iOS 7 のレイアウト画面から iOS 6 の画面に切り替えたときに正しい位置に戻れるように、iOS 6/7 Deltas には丁度逆方向のズレの値が設定されます。

デルタ値を設定する際のポイント

複数のコントロールをずらしたいとき

たとえば iOS 7 でルートビューをステータスバーに重ならないように 20px 下げて表示したいとき、iOS 6 のデザイン画面でルートビューコントローラが持つ View の ΔY を +20 に設定しても iOS 7 でそれだけずれてはくれません。

Δ の値は各コントロールで設定しないといけないので、複数のコントロールが配置されているとき、それらすべてに Δ を設定するのは面倒ですし、レイアウトを変えたいときに厄介です。

そのため、複数のコントロールを iOS 6 と iOS 7 とでずらして配置したい場合には、それらをひとつのサブビューに乗せて、サブビューにだけ Δ を設定するのがよさそうです。

デルタ値では対応できない変化

たとえば iOS 7 環境でさらに 3.5 インチと 4.0 インチでレイアウト位置を調整したいとか、iOS 6/7 Deltas の設定だけでは対応できないようなときは、従来通り -viewDidLoad メソッドなどで目的の frame を調整することになります。

このとき、Autosizing のレイアウトでは -viewDidLoad が呼ばれた時点で iOS 6/7 Deltas で設定した値が適用済みの frame が取得できるので、ここでさらにいろいろ計算して frame の値を書き換えれば、書き換えたそのずばりの位置に、そのコントロールが配置されます。

 

ちなみに UIView 自身には iOS 6/7 Deltas の値を持つプロパティは無いようで、この条件の場合だけ ΔHeight を微調整するみたなことはできませんでした。

[ もどる ]