Création dʼun SplashScreen animé [Tutoriel iPhone n°12]

Vous avez créé une app. formidable qui s’annonce comme la meilleure vente de 2011 sur le Store. Malheureusement, elle est tellement complète qu’elle fait mouliner l’iPhone pendant 15 secondes à chaque lancement. Le Splash Screen est fait pour vous ! Cette image qui s’affiche dès que l’icône a été touchée permet de faire patienter l’utilisateur pendant le chargement de votre bijou d’Objective-C.

Avant de commencer il faut savoir que la mise en place d’un Splash Screen, écran de loading n’est pas conseillé par Apple : The « splash screen » isn’t supposed to be for branding or displaying a logo, it’s supposed to look like the default condition of the app so it appears to start up quickly.
En gros le splash screen n’est pas supposé être utilisé pour l’affichage d’une marque ou faire de la pub mais doit afficher la capture de votre première vue au lancement de votre application.

Exemple avec l’application Bourse : l’image utilisée pour le splash screen est la copie de la vue chargée au lancement.
Bon maintenant une grande majorité des applications sur l’AppStore ne prennent pas en considération cette préconisation Apple et affichent soit leur logo ou encore de la pub.

Alors comment fait-on ? Deux étapes : la première ajouter les images du splash screen (Une Retina et une autre “normale”) et la seconde mettre en place le code pour l’animation.

Créer le projet et mettre en place les images

Ouvrir un nouveau projet dans Xcode. On choisira ici une Window-based Application ou Empty Application (pour les dernière version d’Xcode), que l’on va appeler SplashScreen. La première fenêtre qui s’ouvre une fois le projet créé correspond aux informations du projet et de l’application en développement. La partie « Launch Images », vous permet de déclarer les deux images « SplashScreen » : une standard et une deux fois plus grande pour le Retina Display de l’iPhone 4.

Les deux images doivent être au format PNG. La image doit faire 480 x 320 pixels et la seconde (Retina) 960 x 640 pixels.

Ajouter vos images au projet en les faisant glisser depuis le Finder vers les zones concernées. La fenêtre qui s’ouvre alors vous propose d’ajouter une copie de ces éléments au projet, ce qu’il est très fortement conseillé de faire.

A la fin de cette étape, vous pouvez constater que votre image s’affiche bien lors du chargement. Cette section « Launch Images », extrêmement facile à paramétrer depuis la version 4 d’XCode permet de faire un SplashScreen simple, sans aucune ligne de code. Mais avec une jolie animation, ce serait quand même beaucoup mieux : c’est l’objet de la seconde partie.

Mise en place du code

Rendez-vous dans le fichier « SpashScreenAppDelegate.h », pour y ajouter une ImageView et une nouvelle méthode :

#import UIKit/UIKit.h
 
@interface SplashScreenAppDelegate : NSObject  {
    UIImageView *splashView;
}
 
@property (nonatomic, retain) IBOutlet UIWindow *window;
 
- (void)startupAnimationDone:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context;
 
@end

Accédez au fichier « SplashScreenAppDelegate.m » pour y modifier la méthode « didFinishLaunchingWithOptions » qui a été automatiquement ajoutée par XCode lors de la création du projet.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    [self.window makeKeyAndVisible];
 
    splashView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0, 320, 480)];
    splashView.image = [UIImage imageNamed:@"screen_tuto_mobile.png"];
    [_window addSubview:splashView];
    [_window bringSubviewToFront:splashView];
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.5];
    [UIView setAnimationTransition:UIViewAnimationTransitionNone forView:_window cache:YES];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector (startupAnimationDone:finished:context:)];
    splashView.frame = CGRectMake(-60, -60, 440, 600); splashView.alpha = 0.0; [UIView commitAnimations];
 
    return YES;
}

Pour résumer ce qui est mis en place :

• on crée notre image view qui fait toute la taille de l’écran
• on lui renseigne son image
• on l’ajoute à la vue principale ici window
• on la met en premier plan
• on lui affecte les effets d’animation (vous pouvez jouer sur les durées de transition)

Créez maintenant la méthode « startupAnimationDone: ». Nous avons précisé dans le code ci-dessus que c’est cette méthode qui doit être appelée lorsque l’animation est terminée.

- (void)startupAnimationDone:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {
    [splashView removeFromSuperview];
    [splashView release];
}

Ici on retire la vue splashView de la superview (window) et on release l’objet.

Voila ! Il ne reste plus qu’à tester et vous verrez alors l’application se lancer avec votre image de chargement et celle-ci disparaîtra au chargement complet de l’application dans un effet de transition.

Petit message en guise de conclusion

Ce tutoriel a été écrit et réalisé par Keno974. C’est sa première page sur Tutomobile, n’hésitez pas à lui faire vos remarques, à poser vos questions et surtout à l’encourager dans les commentaires. L’objectif est évidemment de lui donner envie d’en réaliser d’autres !

Cette création par Tuto Mobile est mise à disposition selon les termes de la licence Creative Commons Paternité - Pas d'Utilisation Commerciale - Partage des Conditions Initiales à l'Identique 3.0 Unported.