Copyright (C) iPhoneアプリ開発備忘録 All rights reserved.
ブログ内で記したコード、内容の正確性は保証いたしません。
記載内容を実装したことにより発生した不具合・損害等の責任は一切負いません。



2012年09月21日

4インチのiPhone5(1,136 x 640ピクセル)画面対応



解像度が1,136 x 640ピクセルになった、iPhone5の画面への対応手順。

1. 画像
1136 x 640pixelsで画像を作成する。

(1) Splash Screen
Default-568h@2x.png

(2) その他
xxxx-568h@2x.png


ポイント:
"@2x"の前に文字列"-568h"を付ける。

"@2x"は、640x960pixelsのhigh-resolusion(Retina Display)を示すが、4インチのiPhone5用の画像ファイル名には、"-568h"を付ける。568は、mainScreenのフレームサイズの高さ、"h"はhightを示す。

Splash Screenは、XcodeのTARGETS→Summary→Launch Image→"Retina (4-inch)"に設定する。


2. xib
(1) MainWindow.xibを開き、Xcode右ペインのDocument Outlineから"Window"を選択。
(2) UtilitiesからAttributes inspectorを開き、Simulated Metricsのsizeを"Retina 4 Full Screen"に設定。windowが縦長になるのを確認する。
(3) Document Outlineから"Tab Bar Controller"を選択。
(4) UtilitiesからAttributes inspectorを開き、Simulated Metricsのsizeを"Retina 4 Full Screen"に設定。Tab Bar Controllerが縦長になるのを確認する。

上記設定を行わないと、画面下部がタッチ領域と認識されないため、タッチしても何の反応もしない。

Navigation Controllerを使用している場合、MainWindow.xibの下層にあるxibのViewを、MainWindow.xibと同様にSimulated Metricsのsizeを"Retina 4 Full Screen"に設定することができるが、この設定は不要。
MainWindow.xibの"Retina 4 Full Screen" Size設定が下層のxibにも引き継がれる。

上記のようにsizeを"Retina 4 Full Screen"に設定した場合においても、3.5インチの従来の解像度のiPhoneの画面表示には影響を与えることはない。iOS側で自動的に画面サイズが調整される。(実際にはタッチ領域が4inchとした分、下方向に拡張される。)


xibの修正については、shouldAutorotateToInterfaceOrientationメソッドがdeprecatedとなった影響で、下記参考記事の通り、MainWindow.xibから起動しないようにするため、画面回転対応を行うのであれば対応する必要はない。MainWindows.xibは使用しないので削除する。

iOS6でUITabBarControler+UINavigationControllerのアプリに画面回転を実装する
MainWindow.xibを使わないアプリ起動


3. class
(1) オブジェクト配置
プログラム中でボタンなどを配置している場合、frameの高さから4インチ画面であることを判定してオブジェクトを配置する位置を決定する。
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) { // iPad

// iPadのときの処理

} else { // iPhone

CGRect frame = [[UIScreen mainScreen] applicationFrame];

if (frame.size.height==548.0) { // iPhone 4inch (568 - 20 px)

// iPhone5 のときの処理

} else { // iPhone 3.5inch

// iPhone5より前のモデル のときの処理

}
}


上記の例は4inchであるiPhone5の判定を、フレーム高が548.0であるかとしているが、Viewのサイズ設定により適宜変更する。上記の例では、Viewを(x:0, y:20, Width:320, Height:460)にしているため20pixcels引いた値にしている。

iPhone5は1,136 x 640Pixcelsなので、1,136という数値で判定することもできる。
CGSize result = [[UIScreen mainScreen] bounds].size; // iPhone5の場合、result.heightは568px
CGFloat scale = [UIScreen mainScreen].scale;
result = CGSizeMake(result.width * scale, result.height * scale); // iPhone5の場合、result.heightは1136px

if (result.height==1136.0) { // iPhone 4inch

// iPhone5 のときの処理

} else {

// iPhone5より前のモデル のときの処理

}



(2) アクションシート【追記あり】
UIActionSheetにより選択分岐画面(アクションシート)を表示する場合、MainWindow.xibのWindowにSize設定に"Retina 4 Full Screen" としたことによる影響が発生する。
4inchのiPhone5では、下記のような
[actionSheet showInView: self.view.window];
従来のコードでも問題なく画面下部からアクションシートがせり出してくるが、3.5inchの従来画面サイズのiPhoneではMainWindow.xibのWindowを4inchに設定した影響により、アクションシートが見た目の画面よりも下部からせり上がって表示される。

このため、上記(1)と同様に、画面の高さを判定して処理を振り分ける。
UIActionSheet *actionSheet = [[[UIActionSheet alloc]
initWithTitle: @"Select Action"
delegate: self
cancelButtonTitle: NSLocalizedString(@"Cancel", nil)
destructiveButtonTitle: nil
otherButtonTitles:
@"Hoge",
@"Fuga", nil]
autorelease];

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) { // iPad

[actionSheet showFromRect:CGRectMake(334.0, 865.0, 100.0, 42.0) inView:self.view animated:YES];

} else {

CGRect frame = [[UIScreen mainScreen] applicationFrame];

if (frame.size.height==548.0) { // iPhone 4inch (568 - 20 px)

[actionSheet showInView: self.view.window];

} else { // iPhone 3.5inch

UIView *actionSheetsubView = [[UIView alloc] initWithFrame:CGRectMake(0,0,320,480)];
[actionSheet showInView: actionSheetsubView];

}

}
3.5inch版のiPhoneの場合は、320 x 480のViewを作り、このViewからアクションシートを表示するようにする。


【追記】
UIActionSheetでViewがずれる現象については、"Full Screen" オプションを使用することにより、上記のようなコードで対応することなく正しくViewを表示させることができる。

参考記事:
http://stackoverflow.com/questions/12651460/uiactionsheet-height-is-4-inch-on-a-3-5-inch-device


【番外編】
iPhone5からアーキテクチャに、armv7s が指定できる。

参考記事:
http://hmdt.jp/blog/?p=594


posted by mobileDeveloper at 09:28 | Comment(7) | TrackBack(0) | 4インチ画面対応 はてなブックマーク - 4インチのiPhone5(1,136 x 640ピクセル)画面対応 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
とても参考になりました。いつもありがとうございます。
iPhone5と4s以前の切り替えについて質問です。
現状storyboardで作成したものはコードで5とそれ以前を識別し、オブジェクトの配置を調整して切り替えるしかないのでしょうか?
(storyboard側で5用と4s用のViewを作成して切り替える事は出来ないのでしょうか?)
Posted by ken at 2012年09月23日 22:15
storyBoardでの3.5インチ、4インチの動作確認は行っておりませんので、AppleのForum等で質問・確認していただければよいかと思います。
Posted by mobileDeveloper at 2012年09月24日 09:37
xxxx-568h@2x.png
この名称で画像を用意しても差し変わらないのですが、なにか設定が必要なのでしょうか?
Posted by at 2012年09月26日 11:07
Splash Screen以外はpngファイル名に"-568h"を付与しても差し替わらないですね、失礼いたしました。
UIActionSheetの制御と同様に、プログラム上で、画面の高さを判定して画像を表示するようにコードを変更する必要があると思います。
Posted by mobileDeveloper at 2012年09月28日 09:09
参考にさせていただきました、ありがとうございます。
ただ、[[UIScreen mainScreen] applicationFrame]だと、着信やテザリングの時にステータスバーが拡張されて、528が返るようです。
このまえテザリング中に実機検証して気づきました。参考までに。
Posted by HiRO at 2012年10月20日 13:56
情報提供ありがとうございます。
Posted by mobileDeveloper at 2012年10月24日 10:42
本記事に関して、某法人開発事業者より『さもこれが正しい回答だというようなふりをして記事を書くな』という旨のコメントを頂いております。
しかしながら、本ブログの冒頭に免責事項として記載している通り、「ブログ内で記したコード、内容の正確性は保証いたしません。記載内容を実装したことにより発生した不具合・損害等の責任は一切負いません。 」

本ブログはあくまで個人的な開発備忘録として記述しているものです。
私個人が調査・検証した上で掲載しておりますが、間違いや本質的な解決となっていない部分があるかも知れません。間違いなどは遠慮なく指摘していただければと存じます。


また、本記事に某法人開発事業者から投稿されたコメントは、あまりにも常軌を逸脱した無礼かつ狂気に満ちた内容でしたので、本記事を御覧の他の開発者の皆様の気分を害し不快な念を抱かせる可能性があったため、非掲載としてこの某法人開発事業者によるコメントを削除いたしました。
Posted by mobileDeveloper at 2013年01月20日 16:13
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
Apple、Appleのロゴ、App Store、iPodのロゴ、iTunesは、米国および他国のApple Inc.の登録商標です。
iPhone、iPod touch、iPadはApple Inc.の商標です。
iPhone商標は、アイホン株式会社のライセンスに基づき使用されています。
その他、本ブログに記載されている製品名、会社名は、それぞれ各社の商標または登録商標です。