Les débats entre les partisans et les opposants aux écrans de démarrage sont anciens. Néanmoins, il peut être utile de connaître la méthode la plus efficace pour les créer, et je maîtrise cette méthode... Êtes-vous attentif ?
Splash Screen
À l'ouverture d'une application sur Android ou iOS, on observe souvent une page d'accueil en plein écran, affichant une image ou le logo de l'application avec une couleur de fond spécifique à la marque. Ce "Splash Screen" est éphémère, ne durant que quelques secondes avant de révéler les fonctionnalités de l'app. Son rôle va au-delà d'un simple accueil ; il sert aussi à informer l'utilisateur durant le chargement, voire à le distraire pour minimiser l'impression d'attente. Une fois le processus d'initialisation terminé, l'écran de démarrage s'évanouit et l'application devient opérationnelle. Le débat autour du Splash Screen porte sur le temps de démarrage qu'il cherche à occulter. Certains éditeurs y tiennent pour renforcer leur identité visuelle, insistant sur un Splash Screen même pour un démarrage instantané. D'autres privilégient une expérience utilisateur optimale avec un démarrage accéléré, donc sans Splash Screen. La décision finale revient souvent au client, variant d'un projet à l'autre.
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
Effectivement, il y a une méthode très simple pour les paresseux qui ne nécessite aucune compétence particulière ! Dans le dossier Resources/Splash de votre projet MAUI, vous trouverez un écran de démarrage nommé splash.svg. Vous n'avez qu'à afficher le dossier de stockage, y déposer votre image (SVG), supprimer l'ancienne et renommer la nouvelle en « splash.svg ».
Et voilà, c'est fait ! Plus simple, c'est compliqué ! Cependant, cette technique ne permet pas de contrôler les bases, telles que la couleur de fond. C'est pourquoi je vais vous montrer la méthode la plus simple mais néanmoins adéquate, suivez-moi…
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
Effectivement, c'est très simple en apparence ! Cependant, il existe certains pièges à éviter, qui varient selon les plateformes.
Ainsi, le nom du fichier image doit être exclusivement en lettres minuscules, sans espaces, symboles spéciaux, ni aucun autre caractère.
De plus, il est impératif que le nom commence et finisse par une lettre.
Les seuls caractères permis sont les alphanumériques, à l'exception de l'underscore, aussi connu sous le nom de « trait du 8 » sur les claviers 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 bataille des splash est inévitable car définir un splash n'a jamais été aussi simple ! Il y a évidemment les partisans et les opposants... Faites votre choix, mais maintenant, si vous avez besoin d'un splash, vous savez comment en créer un en un clin d'œil !
Stay Tuned !