スマホ研究部 byブレイブソフト

ヒットノウハウから最新技術まで、スマホの全てを明らかにする部活!

株式会社ブレイブソフト

ToToDoDoiPhone6/iPhone6 Plus画面サイズ対応

ars-iphone-paper-r
  • このエントリーをはてなブックマークに追加

どうも!最近iPhoneのサイズが増えて、機種対応に困っているToToDoDoです。 最近調査した結果をまとめてみます。

解像度の詳細

GMになったXCode6をダウンロードして、シミュレーターでiPhone6 / Plusの画面サイズをいろいろと検証しました。

機種 解像度 相対サイズ 比率
iPhone5/5s 640×1136 320×568 @2x
iPhone6 750×1334 375×667 @2x
iPhone6 Plus 1242×2208 414×736 @3x

※ iPhone6 Plusの公表された解像度は1920×1080ですが、 これは仮想の解像度1242×2208からダウンサンプリングした結果になります。 Macbook Pro Retinaも一緒です。

詳細は、こちらの記事を参考にしてください。 iPhone 6 Plus resolution confusion

三サイズの比較は、下記のサイトの解説が結構分かりやすいので、おすすめです。 iPhone6 screens demystified

スケーリングモード

既存のプロジェクトをそのままXCode6でビルドすると、iPhone6、iPhone6 Plusのシミュレーターでも、frameが320×568になり画面サイズが自動的に拡大されることがわかります。 解像度の変化により多少荒く感じますが、iPhone3G対応のアプリをiPhone4で動かすほど荒くはないです。

下のキャプチャー画像左側はスケーリングモード、 右側はiPhone6 Plusの本来の解像度で実行した状態です。 ナビゲーションバーの高さから違いを確認することが出来ると思います。

スケーリングモードの解除

スケーリングモードを解除して、iPhone6、iPhone6 Plusの本来の解像度で表示するには、3.5インチ→4インチの時と同じく、特定のサイズの起動画面の画像(Launch Image)を追加する必要があります。

XCodeで「General」→「App Icons and Launch Images」→「Launch Images Source」から、4.7インチ、5.5インチそれぞれのサイズ用の起動画面を設定することで表示モードが分かりますが、今回のXCode6から起動画面をxibに指定することもできるようになりました。

このxibはClassやIBOutletと紐づけることはできなくて、起動画面の管理専用です。 xibを利用することで「Size Classes」によってそれぞれの画面サイズを対応することができます。

4サイズiPhoneの対応方法

既存のプロジェクトがAutoLayoutを利用せずframe値でレイアウトして実装している場合、上記の設定を行ったあとiPhone6、iPhone6 Plusの本来のサイズでUIが全体的に左よりになったり、UIパーツのタッチ判定がずれたりする現象が起きると思います。

ソースコードによって対応は異なりますが、対処方法は大きく分けて2通りあります。 1. 「Size Classes」をベースにAutoLayoutに書き換える。 2. iPhone5、iPhone6、iPhone6 Plusとも16:9の比率なので、ソースコードの中にそれぞれの解像度に対してframe値をかける特定の比率数値で対応する。

1の場合、プロジェクトによってはかなりの工数がかかるかもしれませんが、今後の対応が楽になります。2の場合は、ナビゲーションバーなどSDKにあるサイズが固定のUIKitに対して特定の計算が必要となりますが、1よりかかる工数が少ないかもしれません。

新しく始まったプロジェクトは迷うことなく、AutoLayout(レイアウト)+ Image Assets(各解像度の素材管理)+Interface Builder(xib、StoryBoardで画面UIを構築)で開発することがおすすめです。そして画面回転やiPadも対応するユニバーサルアプリに対しては「Size Classes」を利用するのがおすすめです!

最後に、iPhone6やXCode6の変化から下記のことが分かりました。 – iOS5が完全に捨てられた – ARM64に対応していないライブラリが使えなくなるかもしれない – iOS6もそろそろアップルに捨てられる – 今後(1年後?)iPhone6画面サイズの対応も必須になるはず

  • このエントリーをはてなブックマークに追加
カテゴリー:iOS