Xamarin.Forms Visuel matériel

Article
07/13/2023

Material Design est un système de conception opinionné créé par Google, qui prescrit la taille, la couleur, l’espacement et d’autres aspects de la façon dont les vues et les dispositions doivent ressembler et se comporter.

Xamarin.Forms Material Visual peut être utilisé pour appliquer des règles de conception de matériau aux Xamarin.Forms applications, en créant des applications qui ont l’air largement identiques sur iOS et Android. Lorsque Material Visual est activé, les vues prises en charge adoptent la même conception multiplateforme, créant ainsi une apparence unifiée.

Le processus d’activation Xamarin.Forms de Material Visual dans votre application est le suivant :

Ajoutez le Xamarin.Forms. Package NuGet Visual.Material pour vos projets de plateforme iOS et Android. Ce package NuGet fournit des convertisseurs Material Design optimisés sur iOS et Android. Sur iOS, le package fournit la dépendance transitive à Xamarin.iOS.MaterialComponents, qui est une liaison C# aux composants material de Google pour iOS. Sur Android, le package fournit des cibles de build pour garantir que votre TargetFramework est correctement configuré.
Initialiser le visuel matériel dans chaque projet de plateforme. Pour plus d’informations, consultez Initialize Material Visual.
Créez des contrôles visuels matériels en définissant la Visual propriété Material sur sur toutes les pages qui doivent adopter les règles de conception de matériau. Pour plus d’informations, consultez Consommer des convertisseurs de matériau.
[facultatif] Personnaliser les contrôles Material. Pour plus d’informations, consultez Personnaliser les contrôles de matériau.

Important

Sur Android, Material Visual nécessite une version minimale de 5.0 (API 21) ou ultérieure, et un TargetFramework de la version 9.0 (API 28). En outre, votre projet de plateforme nécessite des bibliothèques de prise en charge Android 28.0.0 ou ultérieures, et son thème doit hériter d’un thème Composants matériels ou continuer à hériter d’un thème AppCompat. Pour plus d’informations, consultez Prise en main des composants material pour Android.

Material Visual prend actuellement en charge les contrôles suivants :

Les contrôles de matériau sont réalisés par les convertisseurs de matériaux, qui appliquent les règles de conception de matériau. Sur le plan fonctionnel, les convertisseurs Material ne sont pas différents des convertisseurs par défaut. Pour plus d’informations, consultez Personnaliser le visuel matériel.

Initialiser le visuel de matériau

Après avoir installé .Xamarin.Forms Package NuGet Visual.Material, les convertisseurs Material doivent être initialisés dans chaque projet de plateforme.

Sur iOS, cela doit se produire dans AppDelegate.cs en appelant la Xamarin.Forms.FormsMaterial.Init méthode après la Xamarin.Forms.Forms.Init méthode :

global::Xamarin.Forms.Forms.Init();
global::Xamarin.Forms.FormsMaterial.Init();

Sur Android, cela doit se produire dans MainActivity.cs en appelant la Xamarin.Forms.FormsMaterial.Init méthode après la Xamarin.Forms.Forms.Init méthode :

global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
global::Xamarin.Forms.FormsMaterial.Init(this, savedInstanceState);

Appliquer un visuel de matériau

Les applications peuvent activer Material Visual en définissant la VisualElement.Visual propriété d’une page, d’une mise en page ou d’une Materialvue sur :

<ContentPage Visual="Material"
             ...>
    ...
</ContentPage>

Le code C# équivalent est :

ContentPage contentPage = new ContentPage();
contentPage.Visual = VisualMarker.Material;

La définition de la VisualElement.Visual propriété sur Material indique à votre application d’utiliser les convertisseurs de visuels matériels au lieu des convertisseurs par défaut. La Visual propriété peut être définie sur n’importe quel type qui implémente IVisual, la VisualMarker classe fournissant les propriétés suivantes IVisual :

Default : indique que la vue doit s’afficher à l’aide du convertisseur par défaut.
MatchParent : indique que la vue doit utiliser le même convertisseur que son parent direct.
Material : indique que la vue doit s’afficher à l’aide d’un renderer Material.

Important

La Visual propriété est définie dans la VisualElement classe , avec des vues qui héritent de la valeur de propriété Visual de leurs parents. Par conséquent, la définition de la Visual propriété sur un ContentPage garantit que toutes les vues prises en charge dans la page utiliseront ce visuel. En outre, la Visual propriété peut être remplacée sur une vue.

Les captures d’écran suivantes montrent une interface utilisateur rendue à l’aide des convertisseurs par défaut :

Les captures d’écran suivantes montrent la même interface utilisateur rendue à l’aide des convertisseurs Material :

Les différences main visibles entre les convertisseurs par défaut et les convertisseurs Material, illustrées ici, sont que les convertisseurs Material mettez en majuscules Button le texte et arrondint les coins des Frame bordures. Toutefois, les renderers material utilisent des contrôles natifs, et il peut donc y avoir des différences d’interface utilisateur entre les plateformes pour des zones telles que les polices, les ombres, les couleurs et l’élévation.

Notes

Les composants Material Design respectent étroitement les directives de Google. Par conséquent, les convertisseurs Material Design sont orientés vers ce dimensionnement et ce comportement. Lorsque vous avez besoin d’un plus grand contrôle des styles ou du comportement, vous pouvez toujours créer votre propre effet, comportement ou renderer personnalisé pour obtenir les détails dont vous avez besoin.

Personnaliser le visuel de matériau

Le package NuGet de visuel matériel est une collection de renderers qui réalisent les Xamarin.Forms contrôles. La personnalisation des contrôles visuels matériels est identique à la personnalisation des contrôles par défaut.

Les effets sont la technique recommandée lorsque l’objectif est de personnaliser un contrôle existant. S’il existe un renderer Material Visual, il est moins nécessaire de personnaliser le contrôle avec un effet que de sous-classer le convertisseur. Pour plus d’informations sur les effets, consultez Xamarin.Forms effets.

Les renderers personnalisés sont la technique recommandée lorsqu’il n’existe pas de renderer Material. Les classes de renderer suivantes sont incluses dans Material Visual :

MaterialButtonRenderer
MaterialCheckBoxRenderer
MaterialEntryRenderer
MaterialFrameRenderer
MaterialProgressBarRenderer
MaterialDatePickerRenderer
MaterialTimePickerRenderer
MaterialPickerRenderer
MaterialActivityIndicatorRenderer
MaterialEditorRenderer
MaterialSliderRenderer
MaterialStepperRenderer

La sous-classe d’un renderer Material est presque identique aux renderers non-Material. Toutefois, lors de l’exportation d’un renderer qui sous-classe un renderer Material, vous devez fournir un troisième argument à l’attribut ExportRenderer qui spécifie le VisualMarker.MaterialVisual type :

using Xamarin.Forms.Material.Android;

[assembly: ExportRenderer(typeof(ProgressBar), typeof(CustomMaterialProgressBarRenderer), new[] { typeof(VisualMarker.MaterialVisual) })]
namespace MyApp.Android
{
    public class CustomMaterialProgressBarRenderer : MaterialProgressBarRenderer
    {
        //...
    }
}

Dans cet exemple, spécifie ExportRendererAttribute que la CustomMaterialProgressBarRenderer classe sera utilisée pour afficher la ProgressBar vue, avec le IVisual type inscrit comme troisième argument.

Notes

Un convertisseur qui spécifie un IVisual type, dans le cadre de son ExportRendererAttribute, sera utilisé pour afficher les vues choisies, plutôt que le convertisseur par défaut. Au moment de la sélection du convertisseur, la Visual propriété de la vue est inspectée et incluse dans le processus de sélection du convertisseur.

Pour plus d’informations sur les convertisseurs personnalisés, consultez Renderers personnalisés.

Xamarin.Forms Visuel matériel

Initialiser le visuel de matériau

Appliquer un visuel de matériau

Personnaliser le visuel de matériau

Liens connexes

Ressources supplémentaires