iPhone用のアプリを作るとき以下の様な条件にすることがある
  • iPad対応はしない
  • Portraitのみ対応する
この場合、iPhone5sまではレイアウトはとても簡単だった。
AutoLayoutを使わずに直感的にパーツを配置していけば特に問題は起きなかった。
せいぜい、iPhone5用に縦の長い背景画像を用意するくらいだろう。

しかし、iPhone6とiPhone6 Plusが登場して、レイアウトの重要性が増してきた。
なぜなら、この2つは横幅のポイント数がこれまでと異なるからである。

今回はこの2つに対応する方法を考えてみる。

AutoLayoutを使わずに対応する
まずは一番簡単そうな方法から試してみる。
StoryboardでViewControllerのFile Inspectorを以下のように設定する。
iphohne6_layout_ss1
これでAutoLayoutは無効になる。
当然Size Classesは無効になる。

次に以下のように各種パーツを配置する。
iphohne6_layout_ss2
この状態でシミュレータを起動してみよう。
機種はiPhone5だ。
iphohne6_layout_ss3
当然問題は無い。
では、iPhone6ではどうだろう。
iphohne6_layout_ss4
このように右側にスペースが出来てしまっている。
ポイント数が多いiPhone6 Plusではさらにそのスペースは大きくなる。

Xcode5で作成したプロジェクトを起動するとiPhone6でも自動的に拡大してピッタリ収まるようにされるのだが、Xode6で新規作成したプロジェクトではそのような動作をする設定が今のところわからない。

なので、ソースコードで対応してみることにする。
ViewController.swiftを次のようにする。

1.viewをスケーリングする関数だ。これを再帰的に呼び出すことで全てのサブViewに適応させる。

2.サブViewのframeに対してスケールを適用する。

3.iphone5までの横幅320ポイントに対するスケールを使用してリサイズを実行する。

やってることは至極シンプルだ。
ただし、このままだとフォントサイズは変わらないので、iPhone6 Plusでは若干文字が小さくなる。
きっちりと対応するならフォントサイズも変更すべきだが、今回は割愛する。

結果は以下のようになる。
iphohne6_layout_ss5
問題なく表示することが出来た。
しかし、この方法だとImageViewは中途半端な大きさになってしまうため、綺麗に表示されない可能性があることに注意したい。

AutoLayoutを使用して中央寄せにする
次は最小限のAutoLayoutを使用してみる。
以下のように設定する。
iphohne6_layout_ss6
Size Classesは必要ないのだが、Storyboardが見やすくなるのでチェックを入れてみた。
すると以下のようにViewControllerが横に大きく広がる。
iphohne6_layout_ss7
ここでもう一つ細工を行う。
ViewControllerのviewの直下にカラのViewを配置して、そこに各パーツを配置し直すのだ。
なお、そのViewは600x600にしてあるが、iPhone6 Plusをカバーする大きさであれば何でも良い。

Document Outlineはこのようになる。
iphohne6_layout_ss8
次に先程のViewを選択した状態でStoryboardの右下にあるAlignアイコンを選択する。
するとポップアップメニューが出てくるので、Horizontal Center In Containerにチェックを入れて、Add 1 Constraintを選択する。
iphohne6_layout_ss9
これで準備は完了だ。
iPhone5で実行してみる。
iphohne6_layout_ss10
問題なく表示できた。
ちなみに、なぜこのようになるのかというと、先ほどの中間のViewがセンタリングされて左右の余った部分は画面の外にはみ出ている状態になっているのだ。
なので、iPhone6でももちろん大丈夫だ。
iphohne6_layout_ss11
ただし、よく見るとわかるが、iPhone6では画面の両端のスペースが大きくなっている。
これは、ImageView等のパーツは特に拡大処理はしていないためだ。
しかし、新しい時代のレイアウトではそれは自然なことなのだろう。
機種によっては左右のスペースが大きくなることを念頭に入れてデザインも行うようにすることが大事になると思われる。