あぁ、iPhone 5から4インチRetinaディスプレイ(640px x 1136px)となり、iPhone 4Sまでの 3.5インチディスプレイを前提としていたアプリを今更ながら見直す必要がでてきました。

アプリ自体を4インチディスプレイ対応にする方法も含めて、一通り以下のようにして対応させることができました。

4インチRetinaディスプレイ対応アプリにする

まずはここから。

アプリ起動時に4インチディスプレイ対応アプリとしてiOS上で起動するには、Xcodeで 4インチRetinaディスプレイ用の起動イメージ(Launch image)として “Default-568h@2x.png”(640px x 1136px) というファイル名の画像を含めるだけでiOSが自動で判断してくれます。

画像ファイル名だけで4インチ用と3.5インチ用を自動で判断させる

4インチディスプレイ用の起動イメージが “Default-568h@2x.png” だからって、Retinaになったときに”ファイル名@2x” で判別してくれたときと同じように、 “ファイル名-568h@2x” という画像ファイル名にすれば自動的に4インチRetinaディスプレイ用イメージとしてiOSが扱ってくれると思ったら大間違い！！(泣)

じゃ、”self.view.bounds.size.height” で 568ピクセル(もしくは480ピクセルより大)かをいちいち判定して UIImageやらのインスタンスを生成する？？

なにいってんのムリムリ！

既存のアプリをiPhone 5に対応させる場合なら膨大な修正が必要だし、なによりそんなことしたら今後またどんなハードの仕様変更があるかわからないので、それじゃあまりにもやっつけすぎでメンテ効率が悪すぎます。

やっぱりファイル名だけで4インチディスプレイ用の画像としてアプリ内で判断してくれるほうが効率がいい…

「じゃ、どうするか。…コレでしょ！！」

ということで、以下のUIImageを継承したカスタムクラスを、アプリのデリゲートのヘッダにインポートするだけで、”ファイル名-568h@2x” という名前の画像ファイルがあれば4インチ用のイメージとしてアプリ側で自動的に利用してくれます。

以下の “UIImage+H568.h と “UIImage+H568.m” をXcodeのプロジェクトに組み込んで、デリゲートのヘッダに import してください。

UIImage+H568.h

//
//  UIImage+H568.h
//
//  Created by Angel Garcia on 9/28/12.
//  Copyright (c) 2012 angelolloqui.com. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface UIImage (H568)

@end

UIImage+H568.m

//
//  UIImage+H568.m

//
//  Created by Angel Garcia on 9/28/12.
//  Copyright (c) 2012 angelolloqui.com. All rights reserved.
//

#import "UIImage+H568.h"
#include <objc/runtime.h>

@implementation UIImage (H568)


+ (void)load {
    if  ((UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) &amp;&amp;
        ([UIScreen mainScreen].bounds.size.height > 480.0f)) {
        method_exchangeImplementations(class_getClassMethod(self, @selector(imageNamed:)),
                                       class_getClassMethod(self, @selector(imageNamedH568:)));
    }
}

+ (UIImage *)imageNamedH568:(NSString *)imageName {

    NSMutableString *imageNameMutable = [imageName mutableCopy];

    //Delete png extension
    NSRange extension = [imageName rangeOfString:@".png" options:NSBackwardsSearch | NSAnchoredSearch];
    if (extension.location != NSNotFound) {
        [imageNameMutable deleteCharactersInRange:extension];
    }

    //Look for @2x to introduce -568h string
    NSRange retinaAtSymbol = [imageName rangeOfString:@"@2x"];
    if (retinaAtSymbol.location != NSNotFound) {
        [imageNameMutable insertString:@"-568h" atIndex:retinaAtSymbol.location];
    } else {
        [imageNameMutable appendString:@"-568h@2x"];
    }
    
    //Check if the image exists and load the new 568 if so or the original name if not
    NSString *imagePath = [[NSBundle mainBundle] pathForResource:imageNameMutable ofType:@"png"];
    if (imagePath) {
        //Remove the @2x to load with the correct scale 2.0
        [imageNameMutable replaceOccurrencesOfString:@"@2x" withString:@"" options:NSBackwardsSearch range:NSMakeRange(0, [imageNameMutable length])];
        return [UIImage imageNamedH568:imageNameMutable];
    } else {
        return [UIImage imageNamedH568:imageName];
    }
}

@end

あとは、4インチRetinaディスプレイのみで表示させたい画像のファイル名と拡張子の間に、”-568h@2x” を加えるだけ！

4インチ用のイメージの振り分けに困っていた人は是非これを利用してみてください！

Windowのサイズを起動する端末のディスプレイサイズごとに合わせる

Interface Builderで最初のウインドウとビューを作ってしまっている場合は特に、ウインドウやビューのサイズが実際のディスプレイサイズとは違ってしまう場合があるため、”didFinishLaunchingWithOptions” に以下のように自分自身のフレームサイズを起動する端末のディスプレイサイズに再定義すると確実です。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window.frame = CGRectMake(0, 0, [[UIScreen mainScreen]bounds].size.width, [[UIScreen mainScreen]bounds].size.height);
}

ビューのフレームサイズをディスプレイに合わせる場合は、”viewDidLoad” に以下をセットしておきます。

- (void)viewDidLoad {
    [self.view setBounds:CGRectMake(0, 0,
                                    [[UIScreen mainScreen]bounds].size.width,
                                    [[UIScreen mainScreen]bounds].size.height)];
}

参考 : iPhone5 UIImage method swizzling to load -568h images