いものやま。

雑多な知識の寄せ集め

iPhone 6 / 6 Plusの画面サイズに関して。

変種オセロをiOSで遊べるようにしているのだけど、その中で、iPhone 6 / 6 Plusの画面サイズに関して問題があったので、その説明と解決策について。

iPhone 6 / 6 Plusの画面サイズについて

iOSの画面サイズについては、以前、以下のような記事を書いた。

再掲すると、それぞれの画面サイズは次のようになってる。
(※横向き)

バイス 画面サイズ 優先されるスケール
iPhone 4 / 4S 480 x 320 @2x
iPhone 5 / 5s / 5c 568 x 320 @2x
iPhone 6 667 x 375 @2x
iPhone 6 Plus 736 x 414 @3x
iPad / 2 / mini 1024 x 768 (@1x)
iPad 3 / 4 / Air / Air 2 / mini 2 / mini 3 1024 x 768 @2x

問題点

さて、問題は何かというと、iPhone 6 / 6 Plusを使ったとき、画面サイズが上記の通りにならずに、568x320になるというもの。

実際、SpriteKitのサンプルとして読んでいたAdventureで確認してみると、次のようになる。

ViewController#viewWillAppear(_: Bool)にブレークポイントをはってviewSizeを調べてみると、次のようになっている。

iPhone 4S

f:id:yamaimo0625:20150716152419p:plain

iPhone 5s

f:id:yamaimo0625:20150716152442p:plain

iPhone 6

f:id:yamaimo0625:20150716152503p:plain

iPhone 6 Plus

f:id:yamaimo0625:20150716152516p:plain

このように、iPhone 6 / 6 Plusでも、iPhone 5と同様に、568x320というサイズになってしまっている。

これは、プロパティの値が間違っているというわけでもなくて、実際に大きめの画像を表示させて確認しても、表示される範囲がiPhone 5sと同じになっている。

原因

調べたところ、原因は起動画面が正しく設定されていないからだった。

iOSでは、メインとなるストーリーボードがロードされて表示されるまでの間、起動画面が表示されるようになっている。

この起動画面の設定には、

  • アセットカタログで起動用の画像(Launch Image)を用意する
  • 起動画面用のUI部品(Launch Screen)を用意する

の2通りの方法がある。

ここで、Launch Screenを使わずにLaunch Imageを使う場合、各画面サイズにあった画像を用意する必要がある。

アセットカタログでLaunch Imageを選択してAttributes Inspectorを見てみると、次のようなチェックボックスが用意されている。

  • iOS 8.0 and Later
  • iOS 7.0 and Later
  • iOS 6.0 and Prior
    • (省略)

ここで、iOS 8.0 and LaterのPortrait/Landscapeにチェックを入れると、"Retina HD 4.7"(iPhone 6用のLaunch Image)と"Retina HD 5.5"(iPhone 6 Plus用のLaunch Image)のプレースホルダーが用意される。
このプレースホルダーに適切な大きさの画像を追加してやらないと、iPhone 6 / iPhone 6 Plusでは「互換モード」としてアプリが起動されて、画面の論理サイズが568x320というiPhone 5と同じサイズになってしまうみたい。

実際、Adventureではこれらの画像が用意されていないので、iPhone 6 / iPhone 6 Plusで動かしても、画面サイズがiPhone 5と同じものになってしまっていた。

自分の場合も、XcodeのSpriteKitのテンプレートでプロジェクトを作成したのだけど、そのときに作られるLaunch Screenが酷いものなので削除して、空のLaunch Imageを指定していた。
これでiPhone 5sは大丈夫なんだけど(※ちゃんと指定していないと、上下に黒いスキマが出来る)、iPhone 6 / 6 Plusについてはそれでもダメだったっぽい。

解決策

ということで、これを解決するには、

  • 適切なサイズのLaunch Imageを用意してアセットカタログに追加する
  • Launch Screenを用意する

のいずれかをやってあげればOK。

一番簡単なのは、空のLaunch Screenを用意してあげること。
テンプレートのLaunch Screenをそのまま使うなら、余計なラベルを消してしまえばいいし、テンプレートのLaunch Screenを消してしまっていたら、新しく空のLaunch Screenを作ってあげるといい。

新しくLaunch Screenを作るには、メニューから"New" - "File..."を選び、表示されたダイアログで"iOS" - "User Interface"から"Launch Screen"を選択する。

Launch ScreenのViewのBackgroundをClear Colorにしておくと、特に何も表示されないのでいいかも。

今日はここまで!