Skip to content

18 juillet 2011 | Rédigé par Mathieu

10

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 ! ;-)

Découvrez d'autre articles de la catégorie Tutoriels iPhone

Encore un peu de lecture :

10 Commentaires Poster un commentaire
  1. 18 juil 2011

    Félicitations pour ce premier tutoriel ! En plus, ça nous fait un début avec CoreAnimation ! Merci beaucoup et à ta dispo pour les suivants ! ;-)

  2. 21 juil 2011

    Super tuto merci Keno974 ! ;)

  3. Keno974
    24 juil 2011

    De rien

    À bientôt pour d’autres tutos …

  4. Malik_ba
    27 juil 2011

    Salut,

    Tuto très sympa, par contre j’aurais aimé savoir comment faire pour choisir l’image retina ou pas selon qu’on soit sur un iphone 4 ou pas, ce que tu n’expliques pas dans ton tuto, aurais tu des pistes ?

  5. 1 août 2011

    un nouveau dans l’équipe? Pas mal sa ressemble bien a des tutos du site. Bien réaliser a bientôt!

  6. Keno974
    22 août 2011

    @Malik_ba : En fait lorsque tu passe par l’assistant (dans la partie Launch Image) pour affecter l’image « normale » et l’image Rétina, c’est automatique, la détection de l’image a utilisée est faite par l’iPhone.

    Pour une image standard (un picto par exemple) que tu voudrais utiliser dans ton appli, tu crée à chaque fois 2 versions de ton image (une normale exemple un picto de 50 x 50 pixels et une rétina de 100 x 100 pixels le double), la normale tu l’appel monpicto.png et la rétina monpicto@2x.png

    Ensuite pour utiliser cette image tu travail toujours avec la normale, l’iPhone 4 lui va vérifier que ton image rétina existe et affichera cette dernière si il trouve la version @2x…

    j’espère avoir été assez clair

    PS : Désolé pour la réponse tardive (Vacances oblige)

  7. tiovince
    16 sept 2011

    Bonjour,
    Je crée une appui de mon site internet a partir d’une window based appli.

    quand je lance mon application avant d’ insérer le splashscreen ma tabbar s’affiche bien mais lorsque j’insère le code du splash screen et je je la relance j’ ai un écran blanc après l’animation du splash et ma tablar n’apparait pas.

    Si quelqu’un pouvait me donner un petit coup de pouce.
    Merci par avacne

  8. Keno974
    17 sept 2011

    @tiovince : la partie que tu rajoute dans le didFinishLaunchingWithOptions, doit être après l’appel de ton rootcontoller

    normalement tu doit avoir ceci :

    //l’appel de ta tabbar
    [window addSubview:rootController.view];
    [window makeKeyAndVisible];

    //et ensuite le code du splashscreen …

  9. David
    31 mai 2012

    Salut,

    Merci pour ce super tuto, simple et efficace ! Et il fonctionne encore sous xcode 4.3.

    Pour pousser un peu, est-ce qu’il serait possible d’utiliser le même code pour afficher une UIView controlée par un .xib au lieu de la UIImageView ?

    En espérant des réponses,
    Cordialement,
    David aka Shapes

Trackbacks & Pingbacks

  1. Quelques bons trucs pour XCode » Thiébault Michaël

Une question, une suggestion, une opinion? Partagez ce que vous pensez, laissez un commentaire.

(obligatoire)
(obligatoire)

Note: Votre adresse email ne sera jamais publiée.

Suivez les réponses aux commentaires