Il y a les pro et les anti Splash-Screen, c’est un vieux débat. Peu importe. Il peut s’avérer utile de savoir les créer de la façon la plus efficace, or je connais cette façon… Vous me suivez ?
Splash Screen
Lors de l'ouverture d'une application sur les appareils Android et iOS, nous voyons normalement une sorte de page d'accueil qui s'affiche en plein écran, il s'agit généralement d'une image ou du logo de l’App ou de son éditeur avec une couleur de fond « brandée ». Cela ne dure que quelques secondes au plus avant de nous montrer les fonctionnalités de l'application ! Il s'agit d'un Splash Screen. Mais… le seul but du Splash Screen est-il de nous souhaiter la « bienvenue » ? Non, en plus de cet acte souvent commercial (présentation de la marque, du logo…), cela permet de tenir l'utilisateur informé pendant le chargement et tente de le divertir, ou au moins lui faire oublier cette attente pendant le chargement des processus liés à l'initialisation de l'application. Plus tard, l'écran de démarrage disparaît et l'application est activée pour être utilisée ! Tout le débat se trouve justement dans ce temps de démarrage que le Splash Screen tente de masquer. Certains éditeur y sont très attachés car ils veulent marteler leur logo, leurs couleurs, même si l’App démarre instantanément ils veulent un Splash Screen. D’autres misent sur une meilleure UX, c’est-à-dire une App qui démarre le plus vite possible et donc sans Splash Screen. Je ne trancherai pas ici d’autant que de projets en projets c’est in fine le client qui décide.
Ici je vais vous montrer un moyen très simple d'intégrer un Splash Screen dans vos applications .NET MAUI !
La méthode spéciale paresseux
Oui, il existe une vraie méthode de paresseux, vraiment simple qui ne demande aucune connaissance ! Dans le dossier Resources/Splash du projet MAUI il existe déjà un Splash Screen, dont le nom est splash.svg. Il vous suffit de révéler le répertoire de stockage et d’y placer votre image (SVG) de supprimer celle qui s’y trouve et de renommer la vôtre « splash.svg ».
Et le tour est joué ! Plus facile c’est … difficile ! Mais cette méthode ne permet pas de maîtriser le minimum, comme la couleur de fond. C’est pourquoi je vais vous présenter la méthode la plus simple mais acceptable, allons-y…
La bonne méthode
La première étape consiste à ajouter votre image de Splash dans le projet.
Pour cela révéler l’emplacement disque du répertoire Resources/Splah du projet MAUI. Coller votre image dans ce répertoire. Il doit s’agir de préférence d’une image SVG !
Ensuite revenez dans le projet, Resources/Splash et inspectez les propriétés de votre image. Son action de build doit être positionnée sur MauiSplachScreen.
Attention, une seule image ayant cette caractéristique doit se trouver dans le répertoire Splash !
L’image ci-dessous montre l’arborescence où se cache l’image Splash par défaut, c’est elle que vous devez remplacer par la vôtre (peu importe son nom).
Une fois la substitution de l’image effectuée on vérifie sont mode de build :
Dans mon VS actuel les options ne sont pas classées par ordre alphabétique… il faut donc farfouiner un peu dans la liste pour trouver MauiSplashScreen !
Définir la couleur d’arrière-plan
Si vous lancez l’App tout va fonctionner et votre image sera bien centrée et redimensionnée comme il faut, sans crénelage (avantage du vectoriel SVG). Toutefois la couleur de fond violette de MAUI ne va peut-être pas avec les couleurs de votre image ! Comment changer cette couleur ?
Il faut se rendre dans le projet, à la ligne où le Splash est défini :
Et à cet endroit nous avons la possibilité de définir la propriété Color de la balise MauiSplashScreen, comme en XAML. C’est-à-dire qu’ici nous pouvons utiliser les couleurs XAML (par exemple « Orange ») ou des couleurs exprimées en hexadécimal comme
Color="#e2784a"
Le logo que je vais utiliser est orange bien lumineux, un fond noir lui ira très bien :
Ce qui donne le résultat suivant (émulation d’un Pixel 5) :
L’aspect esthétique est laissé à votre discrétion et surtout à celle de votre infographiste, chacun son job !
Règles spécifiques aux plateformes
Comme annoncé c’est vraiment très simple ! Mais cela ne veut pas dire qu’il n’y a pas quelques pièges. Notamment selon les plateformes.
Par exemple le nom du fichier image doit intégralement être en minuscules. Pas d’espace, de symboles spéciaux, rien.
Il doit aussi débuter et se terminer par une lettre !
Les seuls caractères autorisés sont les alphanumériques avec une exception le souligné (underscore) ou encore appelé « le trait du 8 » sur le clavier français.
Comme le Splash est une ressource comme les autres en réalité toutes les règles s’appliquant aux ressources s’appliquent aussi. Pour une liste complète je vous renvoie vers la doc Microsoft (https://developer.android.com/guide/topics/resources/providing-resources ).
Conclusion
La guerre des splash aura bien lieu car il n’a jamais été aussi facile d’en définir ! Et bien entendu il y a le camp des pros et celui des antis … Tranchez comme vous le souhaitez, mais désormais s’il faut un splash vous savez comment en ajouter un en quelques secondes !
Stay Tuned !