iPhone5のレイアウト

2012/09/28

iPhone5になって一番厄介なのが、解像度の変更でしょうか? なにせアスペクト比が変わってしまいましたから・・・

iPhone4 と iPhone5のRetina解像度

iPhone4 Retina: 640 x 960 iPhone5 Retina: 640 x 1136

最初は、機種判別とかviewの画面サイズを取得してレイアウトを考えてましたが、実はInterfaceBuilderだけでほとんどの事が解決できるかと思います。 実際はステータスバーを利用する事が多いと思うので、ステータスバーの高さ分のレイアウトを考慮する必要があります。

IBでRetina4 Full Screenを設定

まずはInterfaceBuilderでviewを Simulated Metrics > Retina4 Full Screen に設定するとiPhone5の解像度(640 x 1136)でレイアウトできます。 というか、こうしないとiPhone5で表示されないと思います(上下黒枠)。

UI位置はIBのAutoSizingを利用する

Retina4 Full Screenのレイアウトにしたら、今まで個人的にあまり気にしていなかった「AutoSizing」の利用です。 ちなみに、AutoLayoutにすると色々崩れるので利用しない方がいいような気がしました。

「AutoSizing」は、viewのサイズが変更された時にその中のUIがどういう位置取りをするか設定するものです。 iPhone5で基本レイアウトしておき、各UIパーツ毎に「AutoSizing」を設定します。

iPhone5で起動

レイアウトそのままで表示

iPhone4で起動

「AutoSizing」の設定によりUIが自動で位置調整して表示