Dans le monde du développement mobile et multiplateforme, offrir une expérience utilisateur optimale sur une variété d'appareils et de tailles d'écran est un défi majeur. Le design adaptif, qui consiste à ajuster automatiquement l'interface utilisateur en fonction du type d'appareil et de son orientation, se révèle être une solution efficace. Dans cet article, je vais vous montrer comment utiliser les fonctionnalités OnIdiom et OnPlatform de .NET MAUI pour créer des designs adaptifs.
A partir d'exemples de code en XAML et en C#, je vous proposerai une étude des techniques de détection des changements d'orientation et des astuces de mise en page pour une adaptabilité maximale. Enfin, dernière astuce de la dernière chance, mais parfois il n'y a pas mieux, nous verrons comment implémenter des ContentPage spécifiques pour différents types d'appareils afin de garantir une interface utilisateur harmonieuse et réactive sans produire du code XAML farci de OnIdiom ou OnPlatform (ce qui ralenti le chargement de la page et augmente son poids s'il y en a trop).
Utilisation de OnIdiom et OnPlatform sous MAUI pour le Design Adaptif
Le design adaptif est une approche de conception qui permet aux applications de s'ajuster automatiquement aux différentes tailles d'écran et orientations des appareils. Contrairement au design réactif qui repose sur des mises en page fluides et des ajustements dynamiques, le design adaptif utilise des configurations prédéfinies pour différents types d'appareils (téléphones, tablettes, bureaux) et orientations (portrait, paysage). Cette méthode garantit une expérience utilisateur optimale sur une variété de dispositifs.
Utilisation de OnIdiom et OnPlatform sous MAUI
MAUI (Multi-platform App UI) offre deux méthodes principales pour le design adaptif : OnIdiom et OnPlatform. OnIdiom permet de spécifier différentes valeurs et configurations en fonction du type d'appareil (téléphone, tablette, bureau), tandis que OnPlatform permet de cibler des plateformes spécifiques comme Android, iOS, Windows, etc.
Utilisation de OnIdiom
<Label Text="Bonjour!"
FontSize="{OnIdiom Phone=14, Tablet=24, Desktop=30}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
Dans cet exemple, la taille de la police (FontSize) est adaptée selon le type d'appareil. Les téléphones utilisent une taille de police de 14, les tablettes de 24, et les ordinateurs de bureau de 30.
Toute propriété peut ainsi être modulée en fonction de l'Idiom (le type de plateforme). La couleur, la taille, etc.
On peut aussi utiliser cette approche dans le code C# :
var label = new Label
{
Text = "Bonjour!",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand
};
switch (DeviceInfo.Idiom)
{
case DeviceIdiom.Phone:
label.FontSize = 14;
break;
case DeviceIdiom.Tablet:
label.FontSize = 24;
break;
case DeviceIdiom.Desktop:
label.FontSize = 30;
break;
}
Utilisation de OnPlatform
<Label Text="Bonjour!"
TextColor="{OnPlatform Android=Green, iOS=Blue, WinUI=Red}"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
Cet exemple montre comment changer la couleur du texte en fonction de la plateforme. Sur Android, le texte sera vert, sur iOS bleu, et sur Windows rouge.
Idiom et Platform peuvent sembler assez redondant, mais il n'en est rien. Le premier décrit le type de device (smartphone, machine desktop...), le second le type d'OS ou de plateforme de développement (iOS, Android...). Les combinaisons sont ainsi possibles : on peut très bien avoir une tablette (idiom) sous iOS (plateforme) ou une tablette (même idiom) sous Android (autre plateforme).
Bien entendu, on peut manipuler OnPlatform en C#, comme pour l'idiom :
var label = new Label
{
Text = "Bonjour!",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand
};
switch (DeviceInfo.Platform)
{
case DevicePlatform.Android:
label.TextColor = Colors.Green;
break;
case DevicePlatform.iOS:
label.TextColor = Colors.Blue;
break;
case DevicePlatform.WinUI:
label.TextColor = Colors.Red;
break;
}
Détection des Changements d'Orientation
Pour créer une interface réactive aux changements d'orientation de l'appareil, vous pouvez utiliser des événements pour détecter ces changements et ajuster la mise en page en conséquence. Il s'agira ici de code C# car c'est de cette façon que ce problème se traite.
DeviceDisplay.MainDisplayInfoChanged += (s, e) =>
{
var orientation = e.DisplayInfo.Orientation;
if (orientation == DisplayOrientation.Landscape)
{
// Modifier la mise en page pour le mode paysage
}
else
{
// Modifier la mise en page pour le mode portrait
}
};
Astuces de Mise en Page pour les Changements d'Orientation
Voici quelques astuces à connaître pour la gestion du changement d'orientation. Je ne développerai pas, mais il est intéressant que vous sachiez que cela se pratique :
- Grilles Adaptatives : Utilisez des grilles avec des colonnes et des lignes ajustables.
- StackLayout Dynamique : Changez l'orientation des StackLayout en fonction de l'orientation de l'appareil.
- FlexLayout : Utilisez FlexLayout pour des mises en page plus flexibles.
Création de ContentPage Différents selon l'Idiom
Une autre approche pour le design adaptif est de créer des ContentPage distincts pour chaque type d'appareil et de les instancier en fonction de l'Idiom. Comme je le faisais remarquer en introduction c'est un peu la solution de la dernière chance. Mais elle n'est pas si stupide que cela. Il est vrai qu'avec MAUI et depuis les Xamarin.Forms on a l'habitude de vouloir tout mettre dans un code unique valable partout, ce qui fait en grande partie le charme de ces technologies. Mais parfois la lucidité impose des approches plus "rustiques" pour respecter des objectifs tout à fait louables comme : la vitesse de chargement d'une page, la lisibilité et la maintenabilité des pages XAML, etc. N'oubliez jamais qu'entre une technologie de la mort et les points juste cités, il n'y a JAMAIS à se poser de question, ce sont les points énoncés qui prennent systématiquement l'avantage. Entre avoir un code d'ingé débutant qui veut montrer ses muscles en utilisant toutes les astuces à la mode et un code lisible et maintenable qui se charge vite, il n'y a pas photo, ni discussion.
ContentPage pour Téléphone (PhonePage.xaml)
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourNamespace.PhonePage">
<StackLayout>
<Label Text="Page Téléphone"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
ContentPage pour Tablette (TabletPage.xaml)
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourNamespace.TabletPage">
<StackLayout>
<Label Text="Page Tablette"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
Instanciation en C#
public App()
{
InitializeComponent();
switch (DeviceInfo.Idiom)
{
case DeviceIdiom.Phone:
MainPage = new PhonePage();
break;
case DeviceIdiom.Tablet:
MainPage = new TabletPage();
break;
default:
MainPage = new MainPage();
break;
}
}
Variante avec ContentView
On peut appliquer la technique des ContentPage différentes à une échelle plus petite. Dans ce cas on conserve une ContentPage unique, mais c'est à l'intérieur de celle-ci qu'à l'aide de OnIdiom ou OnPlatform on va charger des ContentViews différentes.
Pas besoin d'exemple, vous avez compris le principe, gardez-le dans un coin de votre mémoire car cette approche "hybride" peut parfois s'avérer plus intéressante, plus pratique ou plus souple. Et elle permet de garder l'illusion de la page unique pour toutes les cibles... Ce qui n'est pas si illusoire si on tient compte des problèmes de navigation par exemple (parfois mieux vaut des pages qui ne changent pas et dont les noms permettent de naviguer facilement que des tas de pages "doublons" vers lesquelles il faut naviguer selon l'idiom ou la plateforme).
Conclusion
L'utilisation de OnIdiom et OnPlatform sous MAUI permet de créer des interfaces utilisateur adaptées à différents types d'appareils et plateformes. En combinant ces techniques avec la détection des changements d'orientation et des astuces de mise en page adaptative, vous pouvez offrir une expérience utilisateur cohérente et optimale sur une variété de dispositifs. L'approche alternative de la création de ContentPage ou ContentView spécifiques pour chaque Idiom / Platform renforce encore la flexibilité et la modularité des applications MAUI.
A vous de choisir les meilleures approches, ce qui dépend de multiples facteurs comme le budget alloué, la présence permanente ou non d'un designer, la diversité des cibles supportées, etc.
Bon développement, et
Stay Tuned !
Le Guide Complet de.NET MAUI ! Lien direct Amazon : https://amzn.eu/d/95wBULD
Près de 500 pages dédiées à l'univers .NET MAUI !
Existe aussi en version Kindle à prix réduit !