Retina(4-inch)解像度への対応

新しいXCodeがダウンロードできるようになったので試してみました。

今までのアプリをiOS6シミュレータで実行してみましたが、iPhone5解像度つまりRetina(4-inch)では、センタリング表示されます。

センタリング自体はいいのですが、電波マークとか表示してるバーまで真ん中に寄ってくるのですこぶる格好が悪い。

これへの対応を検討してみました。

既存のプロジェクトを開くと、！マークがついてると思います。詳細はDefault-568h@2x.pngを用意してねって内容です。

ご丁寧に追加するか聞いてくるのでAddをクリックすると、上記のファイルが追加されます。

どうやらRetina(4-inch)に対応してるアプリだよアピールはこれだけで済むようです。

追加された画像ファイルはトップフォルダに置かれるので、適当に/Resouces/Imagesフォルダなどに移動して整理すると良いでしょう。

上記の対応をするとどうなるか。

基本的にトップビューは全て縦長の解像度に合わせたサイズになります。

例えばテーブルビューコントローラーとかに紐付いてるテーブルビューなどは縦長になって、何もしなくても表示領域が増えます。

これまでの縦横比で見栄えの良くなるように座標指定でUIパーツを置いていた場合は、特別にAutosizingとかを意識してないと基本的に上詰めになってしまいます。

これではバランスが悪いので、このような場合はトップビューの下にAutosizingを全て解除したUIViewを作り、その上に座標指定のUIパーツを置けば、とりあえず全体がセンタリングされます。

余白部分の色は当然トップビューのbackgroundColorになりますので、[UIColor colorWithPatternImage:image]とかで画像を指定するのも良いでしょう。

問題になるのは[UIImage imageNamed:@”hoge.png”]とかしたときです。

これまでのRetina対応なら、hoge@2x.pngを用意すれば勝手にそっちを読んでくれていたので、今回もhoge-568h@2x.pngが存在すれば勝手にそっちを読んでくれるのかなあと期待しましたが、そうではありませんでした。Retina-4inchでもhoge@2x.pngが読み込まれます。

まあこれでもそれほど問題は起きないのですが、上のようにトップビューいっぱいの背景画像などを指定したい場合もあります。

そのような時に困るなあとぐぐってみたら、Swizzled UIImage imageNamed for iPhone 5なるライブラリが公開されており、内容を見てみましたが、ぶっちゃけバグだらけで使い物になりません。あとimageNamedをオーバーライドする必要性も感じなかったので、参考にしつつ以下のような独立した関数を書いてみました。

+ (UIImage *)getImageNamed:(NSString *)imageName
{
//iPhone5解像度対応
NSMutableString *imageNameMutable = [[imageName mutableCopy] autorelease];
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
if ([UIScreen mainScreen].scale == 2.0f && screenHeight == 568.0f) {
NSRange dot = [imageName rangeOfString:@"."];
if (dot.location != NSNotFound) {
[imageNameMutable insertString:@"-568h" atIndex:dot.location];
} else {
[imageNameMutable appendString:@"-568h"];
}
}
UIImage *image = [UIImage imageNamed:imageNameMutable];
if (!image){
image = [UIImage imageNamed:imageName];
}
return image;
}