iOS: Animate splash screen out on top of status bar

Question

OK, I get the concept of adding a UIImageView as soon as the app launches, and animating it out to fake the splash animation. However, the status bar interferes.

I need a UIImageView on top of everything, including the status bar, and while it fades away, the app is shown with the status bar. Hence, settings the Status bar initially hidden, then animating it in is not a viable option.

score 2 · Accepted Answer · edited May 23 '17 at 12:12

What you require is a second UIWindow with a windowLevel of UIWindowLevelStatusBar or higher. You would create two UIWindow objects in your application delegate, one with your regular view hierarchy, the other with the image, and animate the second to fade out (or however else you need to animate). Both windows should be visible, with the splash window being on top.

This approach is complicated, as you might have problems with rotation, depending on your regular view hierarchy. We've done this in our software, and it works well.

EDIT:

Adapted Solution (window approach, very simple):

UIImageView* splashView = [[UIImageView alloc] initWithImage:[UIImage imageWithBaseName:@"Default"]];
[splashView sizeToFit];

UIViewController* tmpVC = [UIViewController new];
[tmpVC.view setFrame:splashView.bounds];
[tmpVC.view addSubview:splashView];

// just by instantiating a UIWindow, it is automatically added to the app.
UIWindow *keyWin = [UIApplication sharedApplication].keyWindow;
UIWindow *hudWindow = [[UIWindow alloc] initWithFrame:CGRectMake(0.0f, -20.0f, keyWin.frame.size.width, keyWin.frame.size.height)];

[hudWindow setBackgroundColor:[UIColor clearColor]];
[hudWindow setRootViewController:tmpVC];
[hudWindow setAlpha: 1.0];
[hudWindow setWindowLevel:UIWindowLevelStatusBar+1];
[hudWindow setHidden:NO];

_hudWin = hudWindow;

[UIView animateWithDuration:2.3f animations:^{
    [_hudWin setAlpha:0.f];
} completion:^(BOOL finished) {
    [_hudWin removeFromSuperview];
    _hudWin = nil;
}];

Finally, credit goes to this guy.

A more simple approach would be to launch your application with the status bar hidden, have the view you would like to animate on the top of the view hierarchy, and after the animation is finished, display the status bar using [[UIApplication sharedApplication] setStatusBarHidden:NO withAnimation:UIStatusBarAnimationSlide]

Thanks, the thing that I don't understand about the `UIWindow` approach is how to add a new window to the app? I can't do `[self.window addSubWindow];`, if you know what I mean? — Mazyod, Jan 13 '13 at 03:51
`self.window` should hold your main `UIWindow`. Then create another `UIWindow` object make it key and visible, do your animation and at the end make your main window key and visible. — Léo Natan, Jan 13 '13 at 04:34
Sorry, but either I didn't understand you well, or your answer was wrong. After searching, I realized that just by creating a `UIWindow` instance, it is added to the hierarchy with absolutely no other work. What remains is, moving it to the front as you suggested. I'll add the code I found, and solves my problem. Thanks. — Mazyod, Jan 13 '13 at 21:44

score 0 · Answer 2 · answered Jan 13 '13 at 10:01

You can add a subview to the App's UIWindow. Set the Y coordinate of the UIImageView's frame to -20 pixels in order to handle the status bar.

Add the Default PNG image to your window and tag it:

static const NSInteger kCSSplashScreenTag = 420; // pick any number!
UIImageView *splashImageView;

// Careful, this wont work for iPad!
if ( [[UIScreen mainScreen] bounds].size.height > 480.0f ) // not best practice, but works for detecting iPhone5.
{
    splashImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Default-568h"]];
}
else
{
    splashImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Default"]];
}

splashImageView.frame = CGRectMake(0.0f, -20.0f, splashImageView.image.size.width, splashImageView.image.size.height);
splashImageView.tag = kCSSplashScreenTag;
[self.window addSubview:splashImageView];
[splashImageView release];

[self _fadeOutSplaceImageView];

Then fade it out

- (void)_fadeOutSplashImageView
{
    UIView *splashview = [self.window viewWithTag:kCSSplashScreenTag];
    if ( splashview != nil )
    {
        [UIView animateWithDuration:0.5
                              delay:0.0
                            options:0
                         animations:^{
                             splashview.alpha = 0.0f;
                         }
                         completion:^(BOOL finished) {
                             [splashview removeFromSuperview];
                         }];
    }
}

Correct me if I am wrong, I think this code won't make the imageView overlap the status bar, as in, be on top of the status bar. — Mazyod, Jan 13 '13 at 21:02

iOS: Animate splash screen out on top of status bar

2 Answers2