Condividi tramite

Xamarin.Forms Oggetto visivo materiale

  • Articolo

Material Design è un sistema di progettazione opinionato creato da Google, che prescrive le dimensioni, il colore, la spaziatura e altri aspetti del modo in cui le visualizzazioni e i layout devono apparire e comportarsi.

Xamarin.Forms L'oggetto visivo materiale può essere usato per applicare regole di progettazione materiale alle Xamarin.Forms applicazioni, creando applicazioni che sembrano in gran parte identiche in iOS e Android. Quando l'oggetto visivo materiale è abilitato, le visualizzazioni supportate adottano la stessa progettazione multipiattaforma, creando un aspetto unificato.

Screenshot dell'oggetto visivo materiale

Il processo per abilitare Xamarin.Forms l'oggetto visivo materiale nell'applicazione è:

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

Importante

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

L'oggetto visivo materiale supporta attualmente i controlli seguenti:

I controlli materiali sono realizzati dai renderer materiali, che applicano le regole material design. Funzionalmente, i renderer materiali non sono diversi dai renderer predefiniti. Per altre informazioni, vedere Personalizzare l'oggetto visivo materiale.

Inizializzare l'oggetto visivo materiale

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

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

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

In Android, questo dovrebbe 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 l'oggetto visivo materiale impostando la VisualElement.Visual proprietà in una pagina, un layout o una vista su Material:

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

Il codice C# equivalente è il seguente:

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

L'impostazione della proprietà su Material indirizza l'applicazione VisualElement.Visual all'uso dei renderer di oggetti visivi materiali anziché dei renderer predefiniti. La Visual proprietà può essere impostata su qualsiasi tipo che implementa IVisual, con la VisualMarker classe che fornisce le proprietà seguenti IVisual :

  • Default : indica che il rendering della vista deve essere eseguito usando il renderer predefinito.
  • MatchParent : indica che la vista deve usare lo stesso renderer dell'elemento padre diretto.
  • Material : indica che il rendering della vista deve essere eseguito usando un renderer materiale.

Importante

La Visual proprietà viene definita nella VisualElement classe , con viste che ereditano il valore della Visual proprietà dai relativi elementi padre. Pertanto, l'impostazione della Visual proprietà su un ContentPage garantisce che tutte le visualizzazioni supportate nella pagina usino tale oggetto Visivo. Inoltre, è possibile eseguire l'override della Visual proprietà in una visualizzazione.

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

Screenshot dei renderer predefiniti in iOS e Android

Gli screenshot seguenti mostrano la stessa interfaccia utente di cui è stato eseguito il rendering usando i renderer material:

Screenshot dei renderer materiali in iOS e Android

Le principali differenze visibili tra i renderer predefiniti e i renderer materiali, illustrati di seguito, sono che i renderer materiali in maiuscolo Button il testo e arrotondano gli angoli dei Frame bordi. Tuttavia, i renderer materiali 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 material Design sono strettamente conformi alle linee guida di Google. Di conseguenza, i renderer material design sono distorti 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 NuGet Material Visual è una raccolta di renderer che realizzano i Xamarin.Forms controlli. La personalizzazione dei controlli oggetti visivi materiali è identica alla personalizzazione dei controlli predefiniti.

Gli effetti sono la tecnica consigliata quando l'obiettivo è personalizzare un controllo esistente. Se esiste un renderer visivo materiale, è meno necessario personalizzare il controllo con un effetto rispetto a quello di sottoclassare il renderer. Per altre informazioni sugli effetti, vedere Xamarin.Forms effetti.

I renderer personalizzati sono la tecnica consigliata quando non esiste un renderer materiale. 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 materiale è quasi identica ai renderer non materiali. 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 ExportRendererAttribute che la CustomMaterialProgressBarRenderer classe verrà utilizzata per eseguire il rendering della ProgressBar vista, con il IVisual tipo registrato come terzo argomento.

Nota

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

Per altre informazioni sui renderer personalizzati, vedere Renderer personalizzati.