Xamarin.FormsObjeto visual de material de

Descargar ejemploDescargar el ejemplo

Material Design es un sistema de diseño con opiniones creado por Google, que prescribe el tamaño, el color, el espaciado y otros aspectos de cómo deben verse y comportarse las vistas y los diseños.

Xamarin.Forms Material Visual se puede usar para aplicar reglas de diseño de materiales a Xamarin.Forms aplicaciones, creando aplicaciones que parecen muy idénticas en iOS y Android. Cuando material visual está habilitado, las vistas admitidas adoptan el mismo diseño multiplataforma, creando una apariencia unificada.

Capturas de pantalla del objeto visual de material

El proceso para habilitar Xamarin.Forms material visual en la aplicación es:

  1. Agregue .Xamarin.Forms Paquete NuGet de Visual.Material en los proyectos de plataforma iOS y Android. Este paquete NuGet ofrece representadores optimizados de diseño de materiales en iOS y Android. En iOS, el paquete proporciona la dependencia transitiva a Xamarin.iOS.MaterialComponents, que es un enlace de C# a los componentes de material de Google para iOS. En Android, el paquete proporciona destinos de compilación para asegurarse de que targetFramework está configurado correctamente.
  2. Inicialice material visual en cada proyecto de plataforma. Para obtener más información, vea Initialize Material Visual.
  3. Cree controles de material visual estableciendo la Visual propiedad Material en en las páginas que deben adoptar las reglas de diseño de material. Para obtener más información, vea Consumir representadores de material.
  4. [opcional] Personalizar controles de material. Para obtener más información, vea Personalizar controles de material.

Importante

En Android, Material Visual requiere una versión mínima de 5.0 (API 21) o superior, y un TargetFramework de la versión 9.0 (API 28). Además, el proyecto de plataforma requiere bibliotecas compatibles con Android 28.0.0 o posterior, y su tema debe heredar de un tema componentes de material o seguir heredando de un tema de AppCompat. Para obtener más información, consulte Introducción a los componentes de material para Android.

Material Visual admite actualmente los siguientes controles:

Los representadores de material realizan controles de material, que aplican las reglas de diseño de material. Funcionalmente, los representadores de material no son diferentes a los representadores predeterminados. Para obtener más información, vea Personalizar el objeto visual de material.

Inicializar objeto visual de material

Después de instalar .Xamarin.Forms Paquete NuGet de Visual.Material, los representadores de material deben inicializarse en cada proyecto de plataforma.

En iOS, esto debe producirse en AppDelegate.cs invocando el Xamarin.Forms.FormsMaterial.Init método después del Xamarin.Forms.Forms.Init método :

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

En Android, esto debe producirse en MainActivity.cs invocando el Xamarin.Forms.FormsMaterial.Init método después del Xamarin.Forms.Forms.Init método :

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

Aplicar objeto visual de material

Las aplicaciones pueden habilitar Material Visual estableciendo la VisualElement.Visual propiedad en una página, diseño o vista en Material:

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

El código de C# equivalente es el siguiente:

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

Al establecer la VisualElement.Visual propiedad en se dirige a Material la aplicación para que use los representadores visuales de material en lugar de los representadores predeterminados. La Visual propiedad se puede establecer en cualquier tipo que implemente IVisual, con la VisualMarker clase que proporciona las siguientes IVisual propiedades:

  • Default : indica que la vista debe representarse con el representador predeterminado.
  • MatchParent : indica que la vista debe usar el mismo representador que su elemento primario directo.
  • Material : indica que la vista debe representarse mediante un representador de material.

Importante

La Visual propiedad se define en la VisualElement clase , con vistas que heredan el valor de propiedad Visual de sus elementos primarios. Por lo tanto, establecer la Visual propiedad en un ContentPage garantiza que las vistas admitidas en la página usarán ese objeto Visual. Además, la Visual propiedad se puede invalidar en una vista.

En las capturas de pantalla siguientes se muestra una interfaz de usuario representada mediante los representadores predeterminados:

Captura de pantalla de los representadores predeterminados, en vistas de iOS y Android

En las capturas de pantalla siguientes se muestra la misma interfaz de usuario representada mediante los representadores de material:

Captura de pantalla de los representadores de material, en vistas de iOS y Android

Las principales diferencias visibles entre los representadores predeterminados y los representadores de material, que se muestran aquí, son que los representadores de material capitalizan texto y redondean Button las esquinas de Frame los bordes. Sin embargo, los representadores de material usan controles nativos y, por lo tanto, puede haber diferencias de interfaz de usuario entre plataformas para áreas como fuentes, sombras, colores y elevación.

Nota

Los componentes de diseño de materiales se adhieren estrechamente a las directrices de Google. Como resultado, los representadores de diseño de materiales sesgados hacia ese ajuste de tamaño y comportamiento. Cuando necesite un mayor control de los estilos o el comportamiento, todavía puede crear su propio Efecto, Comportamiento o Representador personalizado para lograr los detalles que necesita.

Personalizar el objeto visual de material

El paquete Material Visual NuGet es una colección de representadores que realizan los Xamarin.Forms controles. La personalización de controles de material visual es idéntica a la personalización de controles predeterminados.

Los efectos son la técnica recomendada cuando el objetivo es personalizar un control existente. Si existe un representador visual de material, es menos trabajo personalizar el control con un efecto que el de subclase del representador. Para obtener más información sobre los efectos, vea Xamarin.Forms efectos.

Los representadores personalizados son la técnica recomendada cuando no existe un representador de material. Las siguientes clases de representador se incluyen con Material Visual:

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

La subclase de un representador de material es casi idéntica a los representadores que no son de material. Sin embargo, al exportar un representador que subclase un representador material, debe proporcionar un tercer argumento al ExportRenderer atributo que especifica el 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
    {
        //...
    }
}

En este ejemplo, especifica ExportRendererAttribute que la CustomMaterialProgressBarRenderer clase se usará para representar la ProgressBar vista, con el IVisual tipo registrado como tercer argumento.

Nota

Un representador que especifica un IVisual tipo, como parte de su ExportRendererAttribute, se usará para representar vistas optó, en lugar del representador predeterminado. En el momento de la selección del representador, la Visual propiedad de la vista se inspecciona e incluye en el proceso de selección del representador.

Para obtener más información sobre los representadores personalizados, vea Representadores personalizados.