替え玉バリカタでお願いします

お仕事と、お仕事そうでお仕事じゃない、少しお仕事な備忘など。

Viewの背景画像を楽に設定する方法 xcode5 iPhone/iPad/UIDeviceOrientation対応

Viewに対して背景画像を設定するなんて簡単なことですが、意外と知られていない様子。よくあるパターンはこんなコード。デバイス(iPhone/iPad)を判定して、デバイスの向き(Portrait/Landscape)によって画像ファイルを指定する方法。

-(void)ViewDidLoaded()
{
    [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(orientationChanged)
                                                 name:@"UIDeviceOrientationDidChangeNotification" object:nil];
}

-(void)orientationChanged {
    UIDeviceOrientation   orientation = [UIDevice currentDevice].orientation;

    CGRect screenBounds = [[UIScreen mainScreen] bounds];

    if(orientation == UIInterfaceOrientationLandscapeLeft)
    {
        if ([[UIDevice currentDevice] userInterfaceIdiom] ==UIUserInterfaceIdiomPhone)
        {
            if (screenBounds.size.height == 568) {
               //for iphone 5 LandscapeLeft
            } else {
               //for iphone 4 LandscapeLeft
            }
        }
        else
        {
            //for ipad LandscapeLeft
        }
    }
    else if(orientation == UIInterfaceOrientationLandscapeRight)
    {
        if ([[UIDevice currentDevice] userInterfaceIdiom] ==UIUserInterfaceIdiomPhone)
        {
            if (screenBounds.size.height == 568) {
                // for iphone 5 LandscapeRight
            } else {
               // for iphone 4 LandscapeRight
            }
        }
        else
        {
            //for ipad LandscapeRight
        }
    }
    else if(orientation == UIInterfaceOrientationPortrait)
    {
        //do change in design when ios change
        if ([[UIDevice currentDevice] userInterfaceIdiom] ==UIUserInterfaceIdiomPhone) {
            if (screenBounds.size.height == 568) {

                // for iphone 5 Portrait
            } else {
                // for iphone 4 Portrait
            }
        } else {
            //for ipad Portrait
        }
    }
    else if(orientation == UIInterfaceOrientationPortraitUpsideDown)
    {
        //Do what you want in Portrait Upside Down
      if ([[UIDevice currentDevice] userInterfaceIdiom] ==UIUserInterfaceIdiomPhone) {
            if (screenBounds.size.height == 568) {
                // for iphone 5 PortraitUpsideDown

            } else {
              // for iphone 4 PortraitUpsideDown  
            }
        } else {
            //for ipad PortraitUpsideDown
        }
    }
}


ひーっ!デバイスの回転と同じように、目が回りそうだ!ぐりんぐりん。
ifのネストがひのきのぼう感を醸し出している。。。

実はこれよりもっと実装も楽で、メンテナンスも楽な良い方法がある。
ということでXcode5で試してみた。

1.デバイスとデバイスの向きに対応するファイルを用意する

デバイスの回転に対応しない場合はデバイス毎でOK。

  • iPhone(Non Retina)
    • bgPortrait.png(320 x 480)
    • bgLandscape.png(480 x 320)
  • iPhone(Retina)
    • bgPortrait@2x.png(640 x 960)
    • bgLandscape@2x.png(960 x 640)
  • iPhone(Retina4)
    • bgPortrait-568h@2x.png(640 x 1136)
    • bgLandscape-568h@2x.png(1136 x 640)
  • iPad(Non Retina)
    • bgPortrait~Pad.png(768 x 1024)
    • bgPortrait~Pad@2x.png(1536 x 2048)
  • iPad(Retina)
    • bgLandscape~Pad.png(1024 x 768)
    • bgPortrait~Pad@2x.png(2048 x 1536)

2.Asset Catalogに作った画像をはめ込む(xcode5ってことで)

ImageSetをPortrait、Landscape用に作り、DeviceSpecificを指定したあとで、作った画像ファイルをドラッグしてペコペコ入れていくだけです。

3.実装

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
	[[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
    
    [self.view setBackgroundColor:[[UIColor alloc]
                                   initWithPatternImage:[UIImage imageNamed:@"bgPortrait"]]];
}
- (BOOL)shouldAutorotate
{
	return YES;
}

- (NSUInteger)supportedInterfaceOrientations
{
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
        return UIInterfaceOrientationMaskAllButUpsideDown;
    }
	return UIInterfaceOrientationMaskAll;
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}

- (void) didRotateFromInterfaceOrientation:(UIInterfaceOrientation) fromInterfaceOrientation
{
    // Set Background Image
    if (UIDeviceOrientationIsPortrait([UIDevice currentDevice].orientation))
    {
        // code for Portrait orientation
        [self.view setBackgroundColor:[UIColor
                                       colorWithPatternImage:[UIImage
                                                              imageNamed:@"bgPortrait.png"]]];
    }
    if (UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation))
    {
        // code for landscape orientation
        [self.view setBackgroundColor:[UIColor
                                       colorWithPatternImage:[UIImage
                                                              imageNamed:@"bgLandscape.png"]]];
    }
}

結果


画像ファイル名を"bgLandscape"や"bgPortrait"とやっておくだけで、"@2x"、"-568h"と"~Pad"をよきに計らって選択してくれる。ああ楽チン!