文系プログラマの勉強ノート

スマホアプリ開発やデザインなどについて勉強したことをまとめています

【Xcode】 iPhone5/5S用画面をiPhone6/6 Plusに対応させる方法

iOS8 Xcode

早いものでもうiOS8です。iPhone6/6 Plus発売です。新言語SwiftもGM版です。
新機能もたくさんあって、あれもこれもやってみたいですが、
中でも対応が急務なのは
「既存アプリをiPhone6/6 Plusの画面サイズに対応させること」
ではないでしょうか？

今回はiPhone5/5Sに最適化されたアプリの画面をiPhone6/6 Plusに対応させることについて
調べたことをまとめてみます。

対応方法

大きく分けて２つあります。

  1. iPhone5/5S用の画面を拡大表示する
  2. iPhone6/6Plus用のレイアウトを作成する

1. iPhone5/5S用の画面を拡大表示する

iPhone5/5S用の画面をそのままiPhone6/6 Plusの画面サイズに拡大表示する方法です。
何もしなかった場合自動的にこちらになるため、手抜き一番簡単な方法です。

ただし拡大表示するわけですから、どうしても若干ぼやけてしまいます。
（実際確認してみると、そこまで気になるわけではありませんが）
そのため、新しく高解像度の画像を用意する必要があります。

解像度について

前機種およびiPhone6/6 Plusで全画面表示に必要な解像度、比率は以下のようになっています。

機種 必要解像度 ベース解像度 ピクセル密度 比率
iPhone 3GS 480×320 480×320 162ppi @1x
iPhone5/5S 1136×640 568×320 326ppi @2x
iPhone6 1334×750 667×375 326ppi @2x
iPhone6 Plus 2208×1242 736×414 401ppi @3x

iPhone6は必要解像度こそ大きくなっているものの、
ピクセル密度に変更がないため、iPhone5/5Sと同じ@2xの画像がそのまま使えます。

iPhone6 Plusはピクセル密度が401ppiと変更されているため、@3xの画像が新しく必要になります。
（iPhone6 Plusの解像度は「1920×1080」じゃないの？とお思いの方、
この辺りの詳しいことは下記参考サイト様や、その他解説されているサイト様にお任せします）

実際必要な画像サイズ

ここで私が疑問に思ったのは「で、@3xの画像って結局どんなサイズ？」ということ。
結論から言うと、iPhone5/5S用の画面を拡大表示する場合は@1xの3倍、つまりは「1704×960」です。

iPhone5/5S用アプリをそのままiPhone6/6 Plusで動かし、
画面のframeサイズを取得すると「568, 320 」という値が返ってきます。
拡大表示モードでは内部的にiPhone5/5Sと同じサイズになっているということですね。
なので「568, 320」の３倍の「1704×960」になります。
iPhone6 Plusだからといって「2208×1242」の画像を作ってしまうと
画面からはみ出ますのでご注意下さい。

2. iPhone6/6Plus用のレイアウトを作成する

iPhone5/5S用とは別に、iPhone6/6 Plusに合わせたレイアウトを作成する方法です。

こちらの方法を取る場合、まずiPhone6/6 PlusのサイズのLaunch Imageを指定する必要があります。
すると拡大表示されなくなりますので、画面サイズに応じて適切にUIを配置する処理が必要になります。
AutoLayoutを使っている場合はそのままいけるのでしょうか。
もしソースコード内で値を指定している場合（私が仕事で教わったやり方はこちら…）、
今後のことを考えてAutoLayoutに直すなり、iPhone6/6 Plus用の配置指定なりをしなければなりません。

実際必要な画像サイズ

こちらの方法でもiPhone6 Plus用に@3xの画像が必要になります。
こちらはまだ自分で試していないので推測ですが、
本来の解像度で表示されるため「2208×1242」の画像が必要になるでしょう。
単純に元の画像の3倍とはいかないので、
小さなパーツのサイズ計算が大変そうな気がします。

画面サイズが違うということは適切なUIの配置も変わってくるということなので、
本来は専用のレイアウトを用意するのがベストな対応方法なのでしょう。
とりあえず拡大表示で3倍の画像を用意して、
その後専用レイアウトの準備という形になるんでしょうかね。

参考サイト

以下のサイト様を参考にさせていただきました。ありがとうございます！

iPhone 6/6 Plusの高解像度化でアプリ開発の画像は@3x必須に！ | IT Strike
iPhone6/iPhone6 Plus画面サイズ対応 | スマホ研究部 by ブレイブソフト
デザイナー向け！iPhone6対応について（情報追加中！） | KAYAC DESIGNER'S BLOG - デザインやマークアップの話