Objeto visual de material de Xamarin.Forms

Descarga del ejemplo

Material Design es un sistema de diseño de 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 material a las aplicaciones, creando aplicaciones que parecen prácticamente Xamarin.Forms idénticas en iOS y Android. Cuando material visual está habilitado, las vistas admitidas adoptan el mismo diseño multiplataforma, lo que crea una apariencia unificada.

El proceso para habilitar Xamarin.Forms Material Visual en la aplicación es:

1. Agregue xamarin.forms. Visual.Material/" data-linktype="external">Xamarin.Forms . Visual.Material NuGet paquete a los proyectos de plataforma iOS y Android. Este NuGet ofrece representadores de diseño de materiales optimizados 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 Inicializar objeto visual de material.
3. Cree controles de objeto visual de material estableciendo la propiedad Xamarin_Forms _VisualElement_Visual" data-linktype="absolute-path">en en cualquier página que deba adoptar las reglas de Visual diseño de Material material. Para obtener más información, vea Consumir representadores de material.
4. [opcional] Personalice los controles material. Para obtener más información, vea Personalizar controles de material.

Material Visual admite actualmente los siguientes controles:

• ActivityIndicator
• Button
• CheckBox
• DatePicker
• Editor
• Entry
• Frame
• Picker
• ProgressBar
• Slider
• Stepper
• TimePicker

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 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/" data-linktype="external">Xamarin.Forms . Visual.Material NuGet paquete, los representadores de material deben inicializarse en cada proyecto de plataforma.

En iOS, esto debe ocurrir en AppDelegate.cs invocando el método después del método :

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

En Android, esto debe ocurrir en MainActivity.cs invocando el método después del 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 propiedad Xamarin_Forms _VisualElement_Visual" data-linktype="absolute-path">en una página, diseño o VisualElement.Visual 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 propiedad en , se dirige a la aplicación para que use los VisualElement.VisualMaterial representadores de objetos visuales de material en lugar de los representadores predeterminados. La propiedad Xamarin_Forms _VisualElement_Visual" data-linktype="absolute-path">se puede establecer en cualquier tipo que implemente , y la clase proporciona las VisualIVisual siguientes VisualMarkerIVisual propiedades:

• Default : indica que la vista debe representarse mediante 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.

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

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

Las principales diferencias visibles entre los representadores predeterminados y los representadores de material, que se muestran aquí, son que los representadores de material capitalizan el texto y redondean las esquinas Button de Frame los bordes. Sin embargo, los representadores de materiales 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.

Personalización del objeto visual de material

El paquete visual NuGet material es una colección de representadores que se dan cuenta de los Xamarin.Forms controles. La personalización de controles de objeto visual 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 de material, es menos trabajo personalizar el control con un efecto que la subclase del representador. Para obtener más información sobre los efectos, vea Xamarin.Forms effects .

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 subclasificación de un representador de material es casi idéntica a la de los representadores que no son de material. Sin embargo, al exportar un representador que crea subclases de un representador material, debe proporcionar un tercer argumento al atributo ExportRenderer 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 que la clase se usará para representar la vista, con el ExportRendererAttribute tipo registrado como tercer CustomMaterialProgressBarRendererProgressBarIVisual argumento.

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

Vínculos relacionados

• Objeto visual de material (ejemplo)
• Create a Xamarin.Forms Visual Renderer
• Xamarin.Forms Effects
• Representadores personalizados