:::no-loc(Xamarin.Forms)::: Material visual:::no-loc(Xamarin.Forms)::: Material Visual

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

El diseño de material es un sistema de diseño de bien fundamentadas creado por Google que prescribe el tamaño, el color, el espaciado y otros aspectos de cómo deben buscarse y comportarse las vistas y los diseños.Material Design is an opinionated design system created by Google, that prescribes the size, color, spacing, and other aspects of how views and layouts should look and behave.

:::no-loc(Xamarin.Forms)::: El material visual se puede usar para aplicar reglas de diseño de materiales a :::no-loc(Xamarin.Forms)::: aplicaciones y crear aplicaciones que tengan una apariencia muy idéntica en iOS y Android.:::no-loc(Xamarin.Forms)::: Material Visual can be used to apply Material Design rules to :::no-loc(Xamarin.Forms)::: applications, creating applications that look largely identical on iOS and Android. Cuando el material visual está habilitado, las vistas admitidas adoptan el mismo diseño multiplataforma, lo que crea una apariencia unificada.When Material Visual is enabled, supported views adopt the same design cross-platform, creating a unified look and feel.

Capturas de pantallas de material visualMaterial Visual screenshots

El proceso para habilitar el :::no-loc(Xamarin.Forms)::: contenido visual en la aplicación es el siguiente:The process for enabling :::no-loc(Xamarin.Forms)::: Material Visual in your application is:

  1. Agregue el :::no-loc(Xamarin.Forms)::: . Paquete NuGet de visual. material en los proyectos de la plataforma iOS y Android.Add the :::no-loc(Xamarin.Forms):::.Visual.Material NuGet package to your iOS and Android platform projects. Este paquete de NuGet ofrece representadores de diseño de material optimizados en iOS y Android.This NuGet package delivers optimized Material Design renderers on iOS and 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.On iOS, the package provides the transitive dependency to Xamarin.iOS.MaterialComponents, which is a C# binding to Google's Material Components for iOS. En Android, el paquete proporciona destinos de compilación para asegurarse de que el TargetFramework está correctamente configurado.On Android, the package provides build targets to ensure that your TargetFramework is correctly set up.
  2. Inicialice el material visual en cada proyecto de plataforma.Initialize Material Visual in each platform project. Para obtener más información, vea Initialize material visual.For more information, see Initialize Material Visual.
  3. Cree controles visuales de materiales estableciendo la Visual propiedad en Material en cualquier página que deba adoptar las reglas de diseño del material.Create Material Visual controls by setting the Visual property to Material on any pages that should adopt the Material Design rules. Para obtener más información, consulte consumo de representadores de materiales.For more information, see Consume Material renderers.
  4. opta Personalizar los controles de materiales.[optional] Customize Material controls. Para obtener más información, vea Personalizar controles de materiales.For more information, see Customize Material controls.

Importante

En Android, el 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).On Android, Material Visual requires a minimum version of 5.0 (API 21) or greater, and a TargetFramework of version 9.0 (API 28). Además, el proyecto de plataforma requiere las bibliotecas de compatibilidad con Android 28.0.0 o superior, y su tema debe heredar de un tema de componentes de materiales o seguir heredando de un tema AppCompat.In addition, your platform project requires Android support libraries 28.0.0 or greater, and its theme needs to inherit from a Material Components theme or continue to inherit from an AppCompat theme. Para obtener más información, consulte Introducción a los componentes de materiales para Android.For more information, see Getting started with Material Components for Android.

El material visual actualmente admite los siguientes controles:Material Visual currently supports the following controls:

Los representadores de materiales tienen en cuenta los controles de materiales, que aplican las reglas de diseño de materiales.Material controls are realized by Material renderers, which apply the Material Design rules. Funcionalmente, los representadores de material no son diferentes a los representadores predeterminados.Functionally, Material renderers are no different to the default renderers. Para obtener más información, vea personalizar el material visual.For more information, see Customize Material Visual.

Inicializar el material visualInitialize Material Visual

Después de instalar el :::no-loc(Xamarin.Forms)::: . Paquete NuGet de visual. material , los representadores de materiales deben inicializarse en cada proyecto de plataforma.After installing the :::no-loc(Xamarin.Forms):::.Visual.Material NuGet package, the Material renderers must be initialized in each platform project.

En iOS, esto debe ocurrir en AppDelegate.CS invocando el :::no-loc(Xamarin.Forms):::.FormsMaterial.Init método después del :::no-loc(Xamarin.Forms):::.Forms.Init método:On iOS, this should occur in AppDelegate.cs by invoking the :::no-loc(Xamarin.Forms):::.FormsMaterial.Init method after the :::no-loc(Xamarin.Forms):::.Forms.Init method:

global:::::no-loc(Xamarin.Forms):::.Forms.Init();
global:::::no-loc(Xamarin.Forms):::.FormsMaterial.Init();

En Android, esto debe ocurrir en MainActivity.CS invocando el :::no-loc(Xamarin.Forms):::.FormsMaterial.Init método después del :::no-loc(Xamarin.Forms):::.Forms.Init método:On Android, this should occur in MainActivity.cs by invoking the :::no-loc(Xamarin.Forms):::.FormsMaterial.Init method after the :::no-loc(Xamarin.Forms):::.Forms.Init method:

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

Aplicar el material visualApply Material Visual

Las aplicaciones pueden habilitar el material visual estableciendo la VisualElement.Visual propiedad en una página, diseño o vista, para Material :Applications can enable Material Visual by setting the VisualElement.Visual property on a page, layout, or view, to Material:

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

El código de C# equivalente es el siguiente:The equivalent C# code is:

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

Al establecer la VisualElement.Visual propiedad en Material , se indica a la aplicación que use los representadores de material visual en lugar de los representadores predeterminados.Setting the VisualElement.Visual property to Material directs your application to use the Material Visual renderers instead of the default renderers. La Visual propiedad se puede establecer en cualquier tipo que implemente IVisual , con la VisualMarker clase que proporciona las IVisual propiedades siguientes:The Visual property can be set to any type that implements IVisual, with the VisualMarker class providing the following IVisual properties:

  • Default : indica que la vista debe representarse mediante el representador predeterminado.Default – indicates that the view should render using the default renderer.
  • MatchParent : indica que la vista debe utilizar el mismo representador que su elemento primario directo.MatchParent – indicates that the view should use the same renderer as its direct parent.
  • Material : indica que la vista debe representarse mediante un representador de materiales.Material – indicates that the view should render using a Material renderer.

Importante

La Visual propiedad se define en la VisualElement clase, con vistas que heredan el Visual valor de propiedad de sus elementos primarios.The Visual property is defined in the VisualElement class, with views inheriting the Visual property value from their parents. Por consiguiente, si Visual se establece la propiedad en, ContentPage se garantiza que cualquier vista admitida en la página utilizará ese visual.Therefore, setting the Visual property on a ContentPage ensures that any supported views in the page will use that Visual. Además, la Visual propiedad se puede invalidar en una vista.In addition, the Visual property can be overridden on a view.

Las siguientes capturas de pantallas muestran una interfaz de usuario que se representa mediante los representadores predeterminados:The following screenshots show a user interface rendered using the default renderers:

Captura de pantalla de los representadores predeterminados, en iOS y AndroidScreenshot of default renderers, on iOS and Android

Las siguientes capturas de pantallas muestran la misma interfaz de usuario que se representa mediante los representadores de materiales:The following screenshots show the same user interface rendered using the Material renderers:

Captura de pantalla de representadores de materiales, en iOS y AndroidScreenshot of Material renderers, on iOS and Android

Las principales diferencias visibles entre los representadores predeterminados y los representadores de materiales, que se muestran aquí, son que los representadores de materiales ponen en mayúsculas Button el texto y redondean las esquinas de los Frame bordes.The main visible differences between the default renderers and Material renderers, shown here, are that the Material renderers capitalize Button text, and round the corners of Frame borders. Sin embargo, los representadores de materiales usan controles nativos y, por lo tanto, puede haber diferencias en la interfaz de usuario entre plataformas para áreas como fuentes, sombras, colores y elevación.However, Material renderers use native controls, and therefore there may still be user interface differences between platforms for areas such as fonts, shadows, colors, and elevation.

Nota

Los componentes del diseño material se adhieren a las directrices de Google.Material Design components adhere closely to Google's guidelines. Como resultado, los representadores de diseño de material se sesgan hacia ese tamaño y comportamiento.As a result, Material Design renderers are biased towards that sizing and behavior. Cuando necesite un mayor control de los estilos o el comportamiento, puede crear su propio efecto, comportamientoo representador personalizado para obtener los detalles que necesita.When you require greater control of styles or behavior, you can still create your own Effect, Behavior, or Custom Renderer to achieve the detail you require.

Personalización del material visualCustomize Material Visual

El paquete de NuGet visual de material es una colección de representadores que obtienen los :::no-loc(Xamarin.Forms)::: controles.The Material Visual NuGet package is a collection of renderers that realize the :::no-loc(Xamarin.Forms)::: controls. La personalización de los controles visuales de materiales es idéntica a la personalización de los controles predeterminados.Customizing Material Visual controls is identical to customizing default controls.

Los efectos son la técnica recomendada cuando el objetivo es personalizar un control existente.Effects are the recommended technique when the goal is to customize an existing control. Si existe un representador visual de material, es menos trabajo personalizar el control con un efecto que en la subclase del representador.If a Material Visual renderer exists, it is less work to customize the control with an effect than it is to subclass the renderer. Para obtener más información sobre los efectos, vea :::no-loc(Xamarin.Forms)::: efectos.For more information about effects see :::no-loc(Xamarin.Forms)::: effects.

Los representadores personalizados son la técnica recomendada cuando no existe un representador de materiales.Custom renderers are the recommended technique when a Material renderer does not exist. Las siguientes clases de representador se incluyen con el material visual:The following renderer classes are included with Material Visual:

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

La subclase de un representador de materiales es casi idéntica a los representadores que no son de materiales.Subclassing a Material renderer is almost identical to non-Material renderers. Sin embargo, al exportar un representador que subclase un representador de materiales, debe proporcionar un tercer argumento al ExportRenderer atributo que especifica el VisualMarker.MaterialVisual tipo:However, when exporting a renderer that subclasses a Material renderer, you must provide a third argument to the ExportRenderer attribute that specifies the VisualMarker.MaterialVisual type:

using :::no-loc(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 utilizará para representar la ProgressBar vista, con el IVisual tipo registrado como tercer argumento.In this example, the ExportRendererAttribute specifies that the CustomMaterialProgressBarRenderer class will be used to render the ProgressBar view, with the IVisual type registered as the third argument.

Nota

Se usará un representador que especifique un IVisual tipo, como parte de su ExportRendererAttribute , para representar en las vistas, en lugar del representador predeterminado.A renderer that specifies an IVisual type, as part of its ExportRendererAttribute, will be used to render opted in views, rather than the default renderer. En el momento de la selección del representador, la Visual propiedad de la vista se inspecciona y se incluye en el proceso de selección del representador.At renderer selection time, the Visual property of the view is inspected and included in the renderer selection process.

Para obtener más información acerca de los representadores personalizados, vea representadores personalizados.For more information about custom renderers, see Custom Renderers.