Écran d’éclaboussure dans .net Maui

L’écran Splash de notre application est notre «première impression» pour nos utilisateurs, y compris généralement le nom, le logo et les couleurs de marque de l’application. Apprenez à créer un écran d’éclaboussures dans .net Maui.

L’une des premières «étapes» que nous prenons habituellement lors de la rencontre avec quelqu’un est de nous présenter. En règle générale, nous partageons notre nom et peut-être un peu plus sur qui nous sommes. Le même concept est vrai avec les applications – ils créent également une première impression, et c’est là que le écran d’éclaboussure vient.

Le écran d’éclaboussure est cette «première impression» que nous présentons aux utilisateurs de nos applications. C’est l’occasion de présenter le nom, le logo et les couleurs de marque de l’application. En termes plus spécifiques, le écran d’éclaboussure est un écran de bienvenue ou d’introduction affiché au début d’une application.

Oh, alors est-ce juste une introduction? Pas du tout! Il sert également d’interaction ou de distraction utile pour l’utilisateur tandis que notre application charge tous les processus nécessaires pour démarrer. Cela empêche les utilisateurs de ressentir tout le poids du temps d’attente initial. Imaginez les laisser regarder un écran vierge sans rétroaction pendant que l’application se charge – cela peut être assez frustrant! Le écran d’éclaboussure rend l’expérience plus fluide et plus professionnelle.

Maintenant que nous avons une compréhension beaucoup plus claire de ce qu’est un écran d’éclaboration, dans cet article, nous apprendrons à travailler avec .FILET.

Comment ajouter un écran d’éclaboussures à mon projet?

Travailler avec l’écran Splash est simple! Suivez ces étapes:

1. Ajouter l’image

Allez à votre projet et accédez au Ressources / écran d’éclat dossier. Collez simplement l’image que vous souhaitez utiliser pour votre écran Splash ici.

⚠️ Lors du démarrage d’un nouveau projet, il comprend une image par défaut nommée splash.svg. Voici deux approches recommandées:

• Ajoutez une image avec un nom différent: Vous pouvez ajouter un nouveau .svg fichier et supprimer la valeur par défaut splash.svg Pour éviter les ressources inutiles dans votre projet.
• Ou remplacez l’image par défaut: Alternativement, vous pouvez remplacer l’image par défaut en nommant votre nouveau fichier splash.svglui permettant de remplacer automatiquement l’original.

Lors du nom de cette image, le nom doit adhérer aux règles suivantes pour se conformer aux conventions de dénomination des ressources d’Android:

• Ça doit être dans minuscule.
• Il doit commencer et fin avec un lettre.
• Il peut ne contiennent que des caractères alphanumériques ou souligner.

2. Définissez l’action de construction

Après avoir ajouté l’image, cliquez avec le bouton droit dessus, sélectionnez Construire une action Et puis choisissez Mauisplashscreen valeur.

Et c’est tout! Une fois que vous avez fait cela, une ligne sera ajoutée au fichier de projet faisant référence à l’image que vous avez ajoutée, comme ce qui suit:

<ItemGroup> 
  <MauiSplashScreen Include="Resources\Splash\splash.svg" /> 
</ItemGroup>

Voici un exemple que j’ai créé avec le logo Telerik, avec un arrière-plan blanc:

🌟 Bonus: comment régler la couleur d’arrière-plan et teinter le logo de l’écran de Splash

Pour améliorer la conception de votre écran d’éclaboussures, vous pouvez définir la couleur d’arrière-plan de votre choix en utilisant le Color propriété, suivie de la valeur de couleur que vous préférez. Vous avez également la possibilité de teinter le logo de l’écran Splash en utilisant le TintColor Propriété, ce qui est particulièrement utile pour les images simples lorsque vous souhaitez modifier temporairement leur couleur sans modifier l’original.

Dans le code, cela ressemblerait à ceci:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" TintColor="#66B3FF" Color="Pink" />

Comment fonctionne Splash Screen?

En naviguant vers le Ressources ➡️ Dossier d’écran d’éclatvous trouverez l’emplacement de l’écran Splash pour l’ensemble du projet. Ce fichier permet l’automatisation de la redimensionnement, donc l’écran Splash s’adapte aux différentes résolutions requises pour chaque plate-forme ou appareil. Cet écran redimensionné est ensuite ajouté au package de votre application.

Pour apprendre à empêcher l’emballage d’écran d’éclat, reportez-vous à la section sur Désactivation de l’emballage d’écran d’éclaboussure.

Contrairement aux approches précédentes de Xamarin, où nous avons dû fournir des images distinctes pour chaque dimension (comme HDPI, MDPI, etc.), .NET MAUI rationalise le processus en le manipulant automatiquement avec uniquement l’image de base.

Quelques points importants à garder à l’esprit en ce qui concerne la manipulation d’images dans .net Maui:

• Vous pouvez utiliser n’importe quel format d’image standard, comme PNG, Jpeg ou SVG.
• Si vous utilisez SVG Fichiers, gardez à l’esprit que lorsque vous les référez dans XAML ou C #, vous devrez utiliser le .png extension au lieu de .svg.
• Le seul endroit où le fichier SVG est mentionné directement est dans le .cs fichier, où son utilisation est définie.
• .Net Maui convertit automatiquement SVG fichiers PNG Pendant le processus de construction.

✍️ Dans la mesure du possible, optez pour les images SVG, comme, contrairement aux formats basés sur Bitmap comme PNG ou JPG, qui peuvent sembler floues lorsqu’ils sont à l’échelle. Les SVG peuvent être agrandis à n’importe quelle taille sans perdre de qualité.

Taille de base

Comme mentionné dans les paragraphes précédents, chaque appareil et plate-forme peut avoir des dimensions différentes. C’est pourquoi .net Maui vous permet de définir une taille de base pour l’image utilisée dans l’écran Splash. Cette taille de base sert de point de référence, permettant à l’image d’être automatiquement redimensionné en fonction des exigences de chaque appareil. Cela signifie que l’image peut être ajustée à des tailles plus petites ou plus grandes, mais elle utilisera toujours la taille de base comme référence.

Voici quelques points importants à considérer:

• Pour les images bitmap (comme PNG ou JPEG): Il est essentiel de définir une taille de base afin que .NET Maui peut automatiquement redimensionner l’image. Sans cela, l’image peut ne pas s’adapter correctement à toutes les plates-formes.
• Pour les images vectorielles (comme SVG): Si une taille de base n’est pas définie, .net Maui utilisera les dimensions spécifiées dans le fichier SVG comme taille de base par défaut.

Voyons l’échantillon suivant:

Cette image provenait du documentation officielleavec quelques modifications apportées aux couleurs et à l’aspect général.

Image B établit le taille de base à partir de laquelle toutes les autres dimensions requises sont dérivées. Ses dimensions sont définies sur 424 x 520. En référence à cette taille de base, les ajustements suivants sont effectués:

• UN: À partir de la taille de base de 424 x 520, l’image est réduite 210 x 260.
• C: Pour diverses plates-formes, différentes tailles d’image sont nécessaires. Pour répondre à ces besoins, l’image est redimensionnée à plusieurs dimensions, en utilisant toujours la taille de base de 424 x 520 comme référence.

Comment régler la base de la taille?

Ajoutez simplement le BaseSize propriété au SplashScreenspécifiant les dimensions où la première valeur représente la largeur et la seconde représente la hauteur.

Voici à quoi cela ressemble dans le code:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" BaseSize="128,128" />

Au moment de la compilation, comme mentionné précédemment, l’écran Splash s’adapte automatiquement pour correspondre à la résolution du périphérique cible. Si vous souhaitez empêcher ce comportement, vous pouvez définir le Resize property à false. Voici un exemple de la façon de configurer ceci:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" Resize="false" />

Configurations spécifiques à la plate-forme

Androïde

Sur Android, l’écran Splash est ajouté à votre package d’applications représenté par deux fichiers:

• Ressources / valeurs / Maui_Colors.xml: Définit les couleurs utilisées dans l’écran Splash
• Ressources / Drawable / Maui_Splash_image.xml: Contient la référence à l’image utilisée comme icône d’écran d’éclaboussure

Cet écran Splash est automatiquement affiché dans votre application grâce au thème Maui .NET par défaut, Maui.SplashTheme. Par conséquent, votre MainActivity La classe doit ressembler à l’exemple suivant:

using Android.App; 
using Android.Content.PM; 

namespace MauiSampleApp 
{   
    [Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize)]
    
    public class MainActivity : MauiAppCompatActivity
    { 
    } 
}

ios

Dans iOS, l’écran Splash est automatiquement inclus dans le package d’applications comme un storyboard nommé MauiSplash.storyboard. Ceci est reflété dans le fichier info.plist, où il est défini comme la valeur du Uilaunchstoryboardname clé. (⚠️ Vous n’avez pas besoin de l’ajouter manuellement; c’est juste pour vous aider à comprendre comment cela fonctionne.)

Voici un exemple de ce à quoi ressemblerait l’info.plist:

<?xml version="1.0" encoding="UTF-8"?>

    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> 
    <plist version="1.0"> 
    <dict> 
    ... 
    <key>UILaunchStoryboardName</key> 
    <string>MauiSplash</string> 
    ... 
    </dict> 
</plist>

✍️ Points à garder à l’esprit

• Sur Android 12+ (API 31 et supérieur), l’écran Splash dispose d’une icône centrée. Tu peux Voir plus d’informations ici.
• Dans iOS 16.4 et plus tard, les simulateurs n’afficheront pas un écran d’éclaboussures à moins que votre application ne soit signée. Pour plus de détails, consultez ces informations.

Conclure

C’est tout! 🤩 Maintenant, vous avez une compréhension plus profonde de ce qu’est un écran d’éclaboussures, comment l’implémenter et comment il fonctionne dans .net Maui. Vous êtes maintenant mieux équipé pour l’adapter parfaitement à vos applications!

Merci d’avoir lu cet article! 💚💕

Rendez-vous la prochaine fois! 🙋‍♀️

Références

Cet article était basé sur la documentation officielle.