Xamarin.FormsObjeto visual de material de

Download Sample Descargar el ejemplo

Diseño de materiales es un sistema de diseño con opinión creado por Google, que prescribe el tamaño, el color, el espaciado y otros aspectos de cómo las vistas y los diseños deben tener un aspecto y comportamiento.

Xamarin.Forms Material Visual se puede usar para aplicar reglas de diseño de material a Xamarin.Forms las 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.

Material Visual screenshots

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

  1. Agregue .Xamarin.Forms Visual.Material NuGet paquete a los proyectos de la 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( Inicializar objeto visual de material).
  3. Cree controles de objeto visual de material 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 Consumo de 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 de compatibilidad de Android 28.0.0 o superior, y su tema debe heredar de un tema componentes de material o seguir heredando de un tema 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 materiales. Funcionalmente, los representadores de material no son diferentes de 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 Visual.Material NuGet paquete, 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 Visual valor de propiedad de sus elementos primarios. Por lo tanto, establecer la Visual propiedad en un ContentPage elemento 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:

Screenshot of default renderers, on iOS and Android

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

Screenshot of Material renderers, on iOS and 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 Button el texto y redondean 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 están sesgados hacia ese ajuste de tamaño y comportamiento. Si necesita 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 objetos visuales de material 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 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 creación de subclases 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 de 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, ExportRendererAttribute especifica 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 las vistas, 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.