Xamarin.FormsObjeto visual de material de
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.
El proceso para habilitar Xamarin.Forms material visual en la aplicación es:
- 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.
- Inicialice material visual en cada proyecto de plataforma. Para obtener más información, vea Initialize Material Visual.
- Cree controles de material visual estableciendo la
Visual
propiedadMaterial
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. - [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:
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 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:
En las capturas de pantalla siguientes se muestra la misma interfaz de usuario representada mediante los representadores de 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 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.