Xamarin.Forms Oggetto visivo material

Scaricare l'esempio Scaricare l'esempio

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

Xamarin.Forms L'oggetto visivo materiale può essere usato per applicare regole di progettazione dei materiali alle applicazioni, creando applicazioni per lo più 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/" data-linktype="external">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 proprietà Xamarin_Forms _VisualElement_Visual" data-linktype="absolute-path">su in tutte le pagine che devono adottare le regole di progettazione dei VisualMaterial 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/" data-linktype="external">Xamarin.Forms . Visual.Material NuGet pacchetto, i renderer Material devono essere inizializzati in ogni progetto di piattaforma.

In iOS questa operazione deve verificarsi in AppDelegate.cs richiamando il metodo dopo il metodo :

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

In Android questa operazione deve verificarsi in MainActivity.cs richiamando il metodo dopo il 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 proprietà Xamarin_Forms _VisualElement_Visual" data-linktype="absolute-path">in VisualElement.Visual una pagina, un layout Material o una visualizzazione su :

<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 Xamarin_Forms _VisualElement_Visual" data-linktype="absolute-path">può essere impostata su qualsiasi tipo che implementa , con la classe che fornisce le VisualIVisualVisualMarker proprietà 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 dell'elemento padre diretto.
  • Material : indica che il rendering della visualizzazione deve essere eseguito usando un renderer Material.

Importante

La proprietà Xamarin_Forms _VisualElement_Visual" data-linktype="absolute-path">è definita nella classe , con le viste che ereditano il valore della proprietà dagli elementi VisualVisualElementVisual 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, nelle visualizzazioni iOS e Android

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

Screenshot dei renderer material, nelle visualizzazioni iOS e Android

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 dell'interfaccia utente tra le piattaforme per aree quali tipi di carattere, ombreggiature, colori e elevazione dei privilegi.

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 orenderer 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, è meno importante personalizzare il controllo con un effetto rispetto a sottoclassare il renderer. Per altre informazioni sugli effetti, vedere Xamarin.Forms effects .

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 CustomMaterialProgressBarRendererProgressBarIVisual argomento.

Nota

Un renderer che specifica un tipo, come parte del relativo , verrà usato per eseguire il rendering delle visualizzazioni con consenso esplicito, anziché il IVisualExportRendererAttribute 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.