Autant le dire maintenant, créer un Splash Screen est devenu un sujet clivant ! Il y a ceux qui veulent les bannir et ceux qui les trouvent indispensables… Loin de moi l’idée de trancher dans le vif dans ce troll sans fin, je vais juste vous montrer comme en faire proprement. A vous de décider…
Rappel sur la notion de Splash Screen
Un écran de démarrage ou “Splash Screen” est une image ou une page qui s'affiche lorsque vous chargez votre application pour la première fois, tandis que l'application est en cours d'initialisation. L'écran de démarrage restera visible jusqu'à ce que la première page de l'application soit prête à s'afficher. Xamarin Forms n'a pas de fonctionnalité pour ajouter un écran de démarrage, vous devez le faire par plate-forme.
UWP
UWP utilise une image pour afficher un écran de démarrage. Vous pouvez placer cette image en allant sur
Projet> Package.appxmanifest> Ressources visuelles> Splashscreen
Il existe une différence majeure entre les applications WinRT et les applications UWP. WinRT obligeait une image en mode portrait comme écran de démarrage, UWP accepte une image en paysage mais ne prendra jamais le plein écran. Étant donné que la plupart des applications démarrent dans le mode Portrait, vous n'obtiendrez jamais l'image en plein écran. Mais bon tout cela peut changer au gré des versions, mais faîtes attention !
UWP souhaite que vous affichiez votre logo au centre de l'écran et que vous ayez un arrière-plan uni. Pour ce faire, créez une image dans les tailles spécifiées avec le logo au centre et une couleur d'arrière-plan unie de votre choix. Réglez ensuite l'option Couleur d'arrière-plan à l'écran sur la même couleur d'arrière-plan unie que dans l'exemple ci-dessous (affichage de Package.appmanifest) :
UWP évolue, Windows Phone est mort mais va peut-être renaître, certaines règles s’appliquent désormais uniquement à UWP pour PC, le smartphone DUO à double écran devrait fonctionner sous Android donc exit UWP, mais soyez attentifs à ces détails sinon votre App ne sera pas correctement mise en avant sur le Store (s’il existe encore à ce moment).
Android
Un écran de démarrage dans Android est plus complexe car il vous oblige à créer une nouvelle activité. Si vous êtes nouveau dans Xamarin.Android, une activité est une interface utilisateur unique avec laquelle l'utilisateur peut normalement interagir. Xamarin Forms utilise MainActivity pour charger l'application, nous devons créer une autre activité. Cet exemple suppose que vous utilisez AppCompat , ce qui est recommandé pour toutes les nouvelles applications Android.
Etape 1
Placez vos images en plein écran (par exemple, splashscreen.png) dans le dossier approprié des ressources de dessin. Chaque dossier de dessin s'associera aux tailles suivantes
- Le MDPI est de 320 × 480 dp = 320x480px (par défaut x1)
- LDPI est 0,75 x MDPI = 240x360px
- HDPI est de 1,5 x MDPI = 480x720px
- XHDPI est 2 x MDPI = 640x960px
- XXHDPI est 3 x MDPI = 960x1440px
- XXXHDPI est 4 x MDPI = 1280x1920px
Etape 2
Créez un nouveau style qui fait référence à la nouvelle image. Placez-le dans Resources> values> styles.xml (Build Action: Android Resource)
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="splashscreen" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@drawable/splashscreen</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsTranslucent">false</item>
<item name="android:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">true</item>
</style>Etape 3
Créez une nouvelle classe SplashActivity.cs
[Activity(Label = "Mobile App Name", Icon = "@drawable/icon", Theme = "@style/splashscreen",
MainLauncher = true, NoHistory = true)]
public class SplashActivity : AppCompatActivity
{
protected override void OnResume()
{
base.OnResume();
StartActivity(typeof(MainActivity));
}
}
Une approche plus fine
Fournir une expérience plus rapide et des temps de chargement plus court est possible via une autre méthode.
Dans vos ressources> valeurs> styles.xml créez votre thème d'écran de démarrage. Par exemple :
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="splashscreen" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@drawable/splashscreen</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsTranslucent">false</item>
<item name="android:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">true</item>
</style>Accédez ensuite à votre MainActivity.cs et assurez- vous que MainLauncher = true. Assurez-vous qu'aucune autre activité n'a MainLauncher = true.
Dans MainActivity.cs, changez le thème par défaut en écran de démarrage.
[Activity(Label = "Mobile App", Theme = "@style/splashscreen",
Icon = "@drawable/icon", MainLauncher = true,
ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation,
LaunchMode = LaunchMode.SingleTop)]
public class MainActivity : Xamarin.Forms.Platform.Android.FormsAppCompatActivity
Enfin dans OnCreate, changez de thème avec le code ci-dessous :
protected override void OnCreate(Bundle bundle)
{
base.Window.RequestFeature(WindowFeatures.ActionBar);
// Name of the MainActivity theme you had there before.
// Or you can use global::Android.Resource.Style.ThemeHoloLight
base.SetTheme(Resource.Style.MainTheme);
base.OnCreate(bundle);
...La version 9-Patch
Avec les bitmaps le problème est bien entendu de s’adapter aux différentes résolutions et tailles d’écran. Android propose un “bricolage” appelé 9-patch qui consiste à utiliser des parties d’une image PNG pour les “enfler” si besoin est sans tout déformer. Des outils existent pour créer de telles images.
Pour les splash screen c’est parfois une bonne idée en économisant les ressources puisque cela évite de fournir la même image dans toutes les résolutions. Mais les résultats peuvent être décevants…
iOS
iOS utilise une image pour afficher un écran de démarrage en fonction de la taille d'écran sur laquelle l'application s'exécute.
Créez une image d'écran de démarrage dans les tailles suivantes.
- 320 × 480
- 640 × 960
- 640 × 1136
Là encore l’OS variant avec le temps prenez le temps de vérifier les dernières préconisations avant de vous lancer …
Accédez à Propriétés> Application iOS> Images de lancement iPhone et importez les images. Elles seront automatiquement ajoutées au dossier Resources de votre projet iOS.
N’oubliez pas de scroller pour ajouter une image spéciale pour les iPads si cela vous concerne (en général cela concerne Apple donc mieux vaut faire ce qu’ils veulent si vous ne voulez pas avoir un rejet de votre App !).
Conclusion
Controversés les écrans Splash Screen peuvent malgré tout servir, notamment pour assommer l’utilisateur du logo de la marque… c’est une stratégie.
Une bonne App devrait présenter immédiatement du contenu utile, quitte à utiliser des zones grises comme on le fait sur le Web, cela donne l’impression d’une plus grande réactivité.
Ce sont tous ces points et d’autres qui créent la polémique autour des splash screen et qui divisent autant les informaticiens en deux clans, les pours et les contre qui s’affrontent parfois dans des forums. Nous avons l’habitude dans notre métier de ces joutes enfantines où les protagonistes semblent avoir 5 ans et jouer à qui fait pipi le plus loin. Rien de neuf sous le soleil.
En revanche ce qui est important c’est que toute décision de design ne revient qu’à vous seul, ou au designer s’il y en a un. Ne vous laissez pas influencer. Faîtes ce qui vous semble juste et bon pour l’App considérée (en ayant fait un tour de ce qui se fait dans le même domaine…).
Et puis n’ayez pas peur de faire marche arrière, seuls les idiots et ceux qui ne font rien ne se trompent jamais. Si le Splash Screen est de trop, virez-le ! S’il en manque un finalement, ajoutez-en un !
L’auto-critique, le bon sens, voilà ce qui doit vous guider, plus que les modes ou les ragots à la machine à café !
Un informaticien Libre dans un monde Libre ! 
Stay Tuned !