変種オセロを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 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の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にしておくと、特に何も表示されないのでいいかも。
今日はここまで!