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


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

これまたコピペで自分のMEMOとして記録…。。。

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とした分、下方向に拡張される。)


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からアクションシートを表示するようにする。


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

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

コメント