Xamarin.Forms Oggetto visivo material

Scaricare l'esempio. Scaricare l'esempio

Material Design è un sistema di progettazione di opinione creato da Google, che specifica dimensioni, colore, spaziatura e altri aspetti dell'aspetto e del comportamento delle visualizzazioni e dei layout.

Xamarin.Forms Material Visual può essere usato per applicare regole di material design alle applicazioni, creando applicazioni in gran parte Xamarin.Forms identiche in iOS e Android. Quando Material Visual è abilitato, le visualizzazioni supportate adottano la stessa progettazione multipiattaforma, creando un aspetto unificato.

Screenshot dell'oggetto visivo material.

Il processo per abilitare Xamarin.Forms Material Visual nell'applicazione è:

  1. Aggiungere . Xamarin.Forms Visual.Material NuGet pacchetto ai progetti della piattaforma iOS e Android. Questo NuGet pacchetto offre renderer di Material Design ottimizzati in iOS e Android. In iOS, il pacchetto fornisce la dipendenza transitiva a Xamarin.iOS.MaterialComponents,che è un'associazione C# a Material Components di Google per iOS. In Android il pacchetto fornisce destinazioni di compilazione per garantire che TargetFramework sia configurato correttamente.
  2. Inizializzare Material Visual in ogni progetto di piattaforma. Per altre informazioni, vedere Inizializzare l'oggetto visivo Material.
  3. Creare controlli material visual impostando la Visual proprietà su in tutte le pagine che devono adottare le regole di progettazione dei Material materiali. Per altre informazioni, vedere Utilizzare renderer material.
  4. [facoltativo] Personalizzare i controlli Material. Per altre informazioni, vedere Personalizzare i controlli material.

Importante

In Android Material Visual richiede una versione minima di 5.0 (API 21) o successiva e un targetFramework della versione 9.0 (API 28). Inoltre, il progetto di piattaforma richiede librerie di supporto Android 28.0.0 o successive e il relativo tema deve ereditare da un tema Componenti materiali o continuare a ereditare da un tema AppCompat. Per altre informazioni, vedere Introduzione a Material Components per Android.

Material Visual supporta attualmente i controlli seguenti:

I controlli dei materiali vengono realizzati dai renderer Material, che applicano le regole di progettazione dei materiali. Dal punto di vista funzionale, i renderer material non sono diversi rispetto ai renderer predefiniti. Per altre informazioni, vedere Personalizzare l'oggetto visivo materiale.

Inizializzare l'oggetto visivo Material

Dopo l'installazione di Xamarin.Forms . Visual.Material NuGet pacchetto, i renderer Material devono essere inizializzati in ogni progetto di piattaforma.

In iOS questa operazione dovrebbe verificarsi in AppDelegate.cs richiamando il Xamarin.Forms.FormsMaterial.Init metodo dopo il Xamarin.Forms.Forms.Init metodo :

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

In Android questa operazione deve verificarsi in MainActivity.cs richiamando il Xamarin.Forms.FormsMaterial.Init metodo dopo il Xamarin.Forms.Forms.Init metodo :

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

Applica oggetto visivo materiale

Le applicazioni possono abilitare Material Visual impostando la VisualElement.Visual proprietà in una pagina, un layout o una visualizzazione su Material :

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

Il codice C# equivalente è il seguente:

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

VisualElement.VisualL'impostazione della proprietà su indica Material all'applicazione di usare i renderer Material Visual anziché i renderer predefiniti. La Visual proprietà può essere impostata su qualsiasi tipo che implementa , con la classe che fornisce le proprietà IVisual VisualMarker IVisual seguenti:

  • Default : indica che il rendering della visualizzazione deve essere eseguito usando il renderer predefinito.
  • MatchParent : indica che la visualizzazione deve usare lo stesso renderer del relativo elemento padre diretto.
  • Material : indica che il rendering della visualizzazione deve essere eseguito usando un renderer Material.

Importante

La proprietà è definita nella classe , con le Visual VisualElement visualizzazioni che ereditano il Visual valore della proprietà dagli elementi padre. Pertanto, l'impostazione della proprietà su un garantisce che tutte Visual le ContentPage visualizzazioni supportate nella pagina usino tale oggetto visivo. Inoltre, la Visual proprietà può essere sottoposta a override in una vista.

Gli screenshot seguenti mostrano un'interfaccia utente sottoposta a rendering usando i renderer predefiniti:

! [Screenshot dei renderer predefiniti in iOS e Android] (material-visual-images/default-renderers.png "Viste che usano renderer predefiniti".

Gli screenshot seguenti mostrano la stessa interfaccia utente sottoposta a rendering usando i renderer Material:

! [Screenshot dei renderer material, in iOS e Android] (material-visual-images/material-renderers.png "Viste con renderer material".

Le principali differenze visibili tra i renderer predefiniti e i renderer Material, mostrate qui, sono che i renderer Material capitalizzano il testo e arrotondano Button gli angoli dei Frame bordi. Tuttavia, i renderer material usano controlli nativi e pertanto potrebbero esserci ancora differenze di interfaccia utente tra le piattaforme per aree quali tipi di carattere, ombreggiature, colori e elevazione.

Nota

I componenti di material design sono strettamente conformi alle linee guida di Google. Di conseguenza, i renderer material design sono biased verso il ridimensionamento e il comportamento. Quando è necessario un maggiore controllo degli stili o del comportamento, è comunque possibile creare il proprio effetto,comportamento o renderer personalizzato per ottenere i dettagli necessari.

Personalizzare l'oggetto visivo materiale

Il pacchetto material visual NuGet è una raccolta di renderer che realizzano i Xamarin.Forms controlli. La personalizzazione dei controlli Material Visual è identica alla personalizzazione dei controlli predefiniti.

Gli effetti sono la tecnica consigliata quando l'obiettivo è personalizzare un controllo esistente. Se esiste un renderer Material Visual, la personalizzazione del controllo con un effetto è inferiore rispetto alla sottoclasse del renderer. Per altre informazioni sugli effetti, vedere Xamarin.Forms effetti.

I renderer personalizzati sono la tecnica consigliata quando non esiste un renderer Material. Le classi renderer seguenti sono incluse in Material Visual:

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

La sottoclassazione di un renderer Material è quasi identica ai renderer non Material. Tuttavia, quando si esporta un renderer che sottoclassa un renderer Material, è necessario fornire un terzo argomento all'attributo ExportRenderer che specifica il VisualMarker.MaterialVisual tipo:

using Xamarin.Forms.Material.Android;

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

In questo esempio, specifica che la classe verrà usata per eseguire il rendering della vista, con il ExportRendererAttribute tipo registrato come terzo CustomMaterialProgressBarRenderer ProgressBar IVisual argomento.

Nota

Un renderer che specifica un tipo, come parte del relativo , verrà usato per eseguire il rendering delle visualizzazioni optate, anziché del IVisual ExportRendererAttribute renderer predefinito. Al momento della selezione del renderer, la proprietà della vista viene Visual ispezionata e inclusa nel processo di selezione del renderer.

Per altre informazioni sui renderer personalizzati, vedere Renderer personalizzati.