Fade out Launch Image on 4 Inch iPhone screen

Question

On launch, I am fading from my launch image to the application's interface. To achieve this, I am adding a UIImageView with "Default.png" and animating its alpha just before makeKeyAndVisible.

Should Default.png always return the device-specific (or resolution-specific) version of the launch image? Or should I be checking the screen's bounds and scale to pick the right one for the retina vs non-retina and 3.5 vs 4 inch screens?

I expected Default.png to behave much like other image resources - use the @2x version when supported (and the -568h version on the iPhone 5). But my experimentation in the simulator leads me to believe otherwise. Running the 4 inch simulator, the 3.5 inch image is used. This results in a splash image that does not extend to the bottom of the screen. The screenshot below shows the transition mid-animation.

Unfortunately I don't have each device so was unable to confirm if this is just a quirk of the simulator.

In short, I want to be sure that the retina image is used on retina devices, and the 4 inch image is used on 4 inch devices.

Answer 1

The answer is you will have to explicitly load the device specific version of the image. This is custom animation and you cannot rely on Apple's Default whatever loading behavior to achieve what you want.

First make sure that you you are configured properly and the correct default load image is displayed on the devices (dont trust the simulator too much (aka I never even use the simulator its so buggy))

And then as previous commenters suggested load a view with your images.

Remember that the default image is going to be loaded and shown by the cocoa framework. All you can do is show a view afterward, if you try and do some of the admittedly clever hacks with the on load that are on the web you will find that they will always break in some way.

If you need a full screen image animated or not on iPhone 5 you need to load that image explicitly for the device thats all there is to it.

Answer 2

This is my code

- (BOOL)            application:(UIApplication *)application
  didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ...

    [self.window makeKeyAndVisible];

    [self _startLaunchAnimation];

    return YES;
}

- (void)_launchAnimation {
    CGFloat screenHeight = [[UIScreen mainScreen] bounds].size.height;
    UIImageView *launchImageView = (UIImageView*)[self.window viewWithTag:1000];

    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:1.0];
    [UIView setAnimationTransition:UIViewAnimationTransitionNone
                           forView:self.window
                             cache:YES];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(startupAnimationDone:finished:context:)];
    [launchImageView setAlpha:0.0];
    [launchImageView setFrame:CGRectMake(-60.0f, 0.0f, 320.0f, screenHeight)];
    [UIView commitAnimations];
}

- (void)_startLaunchAnimation {
    CGFloat screenHeight = [[UIScreen mainScreen] bounds].size.height;
    NSString *imageName = nil;
    if (screenHeight == 568.0f) {
        imageName = @"Default-568h.png";
    } else {
        imageName = @"Default.png";
    }

    UIImage *image = [UIImage imageNamed:imageName];
    UIImageView *launchImageView = [[UIImageView alloc] initWithImage:image];
    [launchImageView setTag:1000];
    [self.window addSubview:launchImageView];

    [NSTimer scheduledTimerWithTimeInterval:2.0
                                     target:self
                                   selector:@selector(_launchAnimation)
                                   userInfo:nil
                                    repeats:NO];
}

Answer 3

For the record, this is my version of @agassi_yzh's solution:

//fade from the launch image to the interface
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;    
NSString *imageFile = (screenHeight == 568.0f) ? @"Default-568h.png" : @"Default.png";
UIImageView *splash = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageFile]];

[self.window.rootViewController.view addSubview:splash];

[UIView animateWithDuration:0.5
                 animations:^{
                     splash.alpha = 0;
                 }
                 completion:^(BOOL finished) {
                     [splash removeFromSuperview];
                 }
];

//display the main window
[self.window makeKeyAndVisible];

Answer 4

Yes, you provide Default.png and [email protected], you even have to supply [email protected] for the iPhone 5 4" screen.

You app will use standard, retina or big retina according to device but note that Apple discourage using the Default launch image as any intro animation sequence.

The trick you could use is to add an image view as the first screen of the app when it's launched and immediately fade it out, this will give the user the impression that the launch image is fading out even though the launch image is gone, and it's your image view taking over.

Look at the Launch image section of the Apple Custom Icon and Image Creation Guidelines:

Supply a launch image to improve user experience.

Avoid using your launch image as an opportunity to provide:

• An “app entry experience,” such as a splash screen

• An About window

• Branding elements, unless they are a static part of your app’s first screen Because users are likely to switch among apps frequently, you should make every effort to cut launch time to a minimum, and you should design a launch image that downplays the experience rather than drawing attention to it.