Xamarin.Forms Material Visual

Artikel
07/13/2023

Material Design ist ein von Google erstelltes Meinungsentwurfssystem, das größe, Farbe, Abstand und andere Aspekte der Darstellung und des Verhalten von Ansichten und Layouts vorschreibt.

Xamarin.Forms Material Visual kann verwendet werden, um Material Design-Regeln auf Xamarin.Forms Anwendungen anzuwenden und Anwendungen zu erstellen, die unter iOS und Android weitgehend identisch aussehen. Wenn Material Visual aktiviert ist, übernehmen unterstützte Ansichten plattformübergreifend denselben Entwurf, sodass ein einheitliches Erscheinungsbild entsteht.

Der Prozess zum Aktivieren von Xamarin.Forms Material Visual in Ihrer Anwendung sieht wie folgt aus:

Fügen Sie hinzu Xamarin.Forms. Visual.Material NuGet-Paket für Ihre iOS- und Android-Plattformprojekte. Dieses NuGet-Paket bietet optimierte Material Design-Renderer unter iOS und Android. Unter iOS stellt das Paket die transitive Abhängigkeit zu Xamarin.iOS.MaterialComponents bereit, bei der es sich um eine C#-Bindung an die Materialkomponenten von Google für iOS handelt. Unter Android stellt das Paket Buildziele bereit, um sicherzustellen, dass Ihr TargetFramework ordnungsgemäß eingerichtet ist.
Initialisieren Sie Material Visual in jedem Plattformprojekt. Weitere Informationen finden Sie unter Initialisieren des Materialvisuals.
Erstellen Sie Material Visual-Steuerelemente, indem Sie die Visual -Eigenschaft Material auf allen Seiten festlegen, die die Materialentwurfsregeln übernehmen sollen. Weitere Informationen finden Sie unter Nutzen von Materialrenderern.
[optional] Anpassen von Materialsteuerelementen Weitere Informationen finden Sie unter Anpassen von Materialsteuerelementen.

Wichtig

Unter Android erfordert Material Visual mindestens version 5.0 (API 21) und ein TargetFramework von Version 9.0 (API 28). Darüber hinaus erfordert Ihr Plattformprojekt Android-Supportbibliotheken 28.0.0 oder höher, und das Design muss von einem Material Components-Design erben oder weiterhin von einem AppCompat-Design erben. Weitere Informationen finden Sie unter Erste Schritte mit Materialkomponenten für Android.

Material Visual unterstützt derzeit die folgenden Steuerelemente:

Materialsteuerelemente werden von Materialrenderern realisiert, die die Materialentwurfsregeln anwenden. Funktionell unterscheiden sich Material-Renderer nicht von den Standardrenderern. Weitere Informationen finden Sie unter Anpassen des Materialvisuals.

Initialisieren des Materialvisuals

Nach der Installation von Xamarin.Forms. Visual.Material NuGet-Paket: Die Material-Renderer müssen in jedem Plattformprojekt initialisiert werden.

Unter iOS sollte dies in AppDelegate.cs auftreten, indem die Xamarin.Forms.FormsMaterial.Init -Methode nach der Xamarin.Forms.Forms.Init -Methode aufgerufen wird:

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

Unter Android sollte dies in MainActivity.cs auftreten, indem die Xamarin.Forms.FormsMaterial.Init -Methode nach der Xamarin.Forms.Forms.Init -Methode aufgerufen wird:

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

Materialvisual anwenden

Anwendungen können Material Visual aktivieren, indem sie die VisualElement.Visual -Eigenschaft auf einer Seite, einem Layout oder einer Ansicht auf Materialfestlegen:

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

Der entsprechende C#-Code lautet:

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

Wenn Sie die VisualElement.Visual -Eigenschaft auf festlegen Material , wird Ihre Anwendung anweisen, die Material Visual-Renderer anstelle der Standardrenderer zu verwenden. Die Visual -Eigenschaft kann auf einen beliebigen Typ festgelegt werden, der implementiert IVisual, wobei die VisualMarker -Klasse die folgenden IVisual Eigenschaften bereitstellt:

Default – gibt an, dass die Ansicht mithilfe des Standardrenderers gerendert werden soll.
MatchParent – gibt an, dass die Ansicht den gleichen Renderer wie ihr direktes übergeordnetes Element verwenden soll.
Material – gibt an, dass die Ansicht mit einem Material-Renderer gerendert werden soll.

Wichtig

Die Visual -Eigenschaft wird in der VisualElement -Klasse definiert, wobei Ansichten den Visual Eigenschaftswert von ihren übergeordneten Elementen erben. Daher stellt das Festlegen der Visual -Eigenschaft auf einem ContentPage sicher, dass alle unterstützten Ansichten auf der Seite dieses Visual verwenden. Darüber hinaus kann die Visual -Eigenschaft in einer Ansicht überschrieben werden.

Die folgenden Screenshots zeigen eine Benutzeroberfläche, die mit den Standardrenderern gerendert wird:

Die folgenden Screenshots zeigen dieselbe Benutzeroberfläche, die mit den Material-Renderern gerendert wurde:

Die hier gezeigten Standard sichtbaren Unterschiede zwischen den Standardrenderern und Material-Renderern bestehen darin, dass die Material-Renderer Text groß schreiben Button und die Ecken von Frame Rahmen umrunden. Material-Renderer verwenden jedoch native Steuerelemente, sodass es weiterhin Unterschiede bei der Benutzeroberfläche zwischen Plattformen für Bereiche wie Schriftarten, Schatten, Farben und Rechte gibt.

Hinweis

Material Design-Komponenten halten sich eng an die Richtlinien von Google. Daher sind Material Design-Renderer auf diese Größe und dieses Verhalten ausgerichtet. Wenn Sie eine bessere Kontrolle über Stile oder Verhaltensweisen benötigen, können Sie dennoch eigene Effekte, Verhaltensweisen oder benutzerdefinierten Renderer erstellen, um die gewünschten Details zu erreichen.

Anpassen des Materialvisuals

Das Material Visual NuGet-Paket ist eine Sammlung von Renderern, die die Xamarin.Forms Steuerelemente realisieren. Das Anpassen von Material Visual-Steuerelementen ist mit dem Anpassen von Standardsteuerelementen identisch.

Effekte sind die empfohlene Technik, wenn das Ziel darin besteht, ein vorhandenes Steuerelement anzupassen. Wenn ein Material Visual-Renderer vorhanden ist, ist es weniger arbeite, das Steuerelement mit einem Effekt anzupassen, als den Renderer unterzuklassigen. Weitere Informationen zu Effekten finden Sie unter Xamarin.Forms Effekte.

Benutzerdefinierte Renderer werden empfohlen, wenn kein Material-Renderer vorhanden ist. Die folgenden Rendererklassen sind in Material Visual enthalten:

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

Die Unterklasse eines Material-Renderers ist fast identisch mit Nicht-Material-Renderern. Wenn Sie jedoch einen Renderer exportieren, der einen Material-Renderer unterklassiert, müssen Sie ein drittes Argument für das ExportRenderer Attribut angeben, das den VisualMarker.MaterialVisual Typ angibt:

using Xamarin.Forms.Material.Android;

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

In diesem Beispiel gibt an ExportRendererAttribute , dass die CustomMaterialProgressBarRenderer -Klasse zum Rendern der ProgressBar Ansicht verwendet wird, wobei der IVisual Typ als drittes Argument registriert ist.

Hinweis

Ein Renderer, der einen IVisual Typ als Teil von ExportRendererAttributeangibt, wird zum Rendern von aktivierten Ansichten anstelle des Standardrenderers verwendet. Zum Zeitpunkt der Rendererauswahl wird die Visual Eigenschaft der Ansicht überprüft und in den Rendererauswahlprozess einbezogen.

Weitere Informationen zu benutzerdefinierten Renderern finden Sie unter Benutzerdefinierte Renderer.

Xamarin.Forms Material Visual

Initialisieren des Materialvisuals

Materialvisual anwenden

Anpassen des Materialvisuals

Verwandte Links

Zusätzliche Ressourcen