Xamarin.Forms Material Visual

Baixar o exemplo

O Design de Material é um sistema de design opinativo criado pelo Google, que prescreve o tamanho, a cor, o espaçamento e outros aspectos de como as exibições e layouts devem parecer e se comportar.

Xamarin.Forms O Material Visual pode ser usado para aplicar regras de Design de Material a Xamarin.Forms aplicativos, criando aplicativos que parecem praticamente idênticos no iOS e no Android. Quando o Material Visual está habilitado, as exibições com suporte adotam o mesmo design multiplataforma, criando uma aparência unificada.

O processo para habilitar Xamarin.Forms o Material Visual em seu aplicativo é:

1. Adicione o Xamarin.Forms. Pacote NuGet Visual.Material para seus projetos de plataforma iOS e Android. Esse pacote NuGet fornece renderizadores otimizados de Design de Material no iOS e no Android. No iOS, o pacote fornece a dependência transitiva para Xamarin.iOS.MaterialComponents, que é uma associação C# aos Componentes materiais do Google para iOS. No Android, o pacote fornece destinos de build para garantir que o TargetFramework esteja configurado corretamente.
2. Inicialize o Material Visual em cada projeto de plataforma. Para obter mais informações, consulte Inicializar o visual do material.
3. Crie controles visuais de material definindo a Visual propriedade Material como em qualquer página que deva adotar as regras de Design de Material. Para obter mais informações, consulte Consumir renderizadores de material.
4. [opcional] Personalizar controles de material. Para obter mais informações, consulte Personalizar controles de material.

Importante

No Android, o Material Visual requer uma versão mínima de 5.0 (API 21) ou superior e um TargetFramework da versão 9.0 (API 28). Além disso, seu projeto de plataforma requer bibliotecas de suporte do Android 28.0.0 ou superior e seu tema precisa herdar de um tema componentes materiais ou continuar herdando de um tema AppCompat. Para obter mais informações, consulte Introdução aos componentes de material para Android.

Atualmente, o Material Visual dá suporte aos seguintes controles:

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

Os controles de material são realizados por renderizadores de material, que aplicam as regras de Design de Material. Funcionalmente, os renderizadores de material não são diferentes dos renderizadores padrão. Para obter mais informações, consulte Personalizar o visual do material.

Inicializar o visual do material

Depois de instalar o Xamarin.Forms. Pacote NuGet Visual.Material , os renderizadores de material devem ser inicializados em cada projeto de plataforma.

No iOS, isso deve ocorrer em AppDelegate.cs invocando o Xamarin.Forms.FormsMaterial.Init método após o Xamarin.Forms.Forms.Init método :

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

No Android, isso deve ocorrer em MainActivity.cs invocando o Xamarin.Forms.FormsMaterial.Init método após o Xamarin.Forms.Forms.Init método :

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

Aplicar o visual do material

Os aplicativos podem habilitar o Material Visual definindo a VisualElement.Visual propriedade em uma página, layout ou exibição, como Material:

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

Este é o código C# equivalente:

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

Definir a VisualElement.Visual propriedade como Material direciona seu aplicativo para usar os renderizadores de Material Visual em vez dos renderizadores padrão. A Visual propriedade pode ser definida como qualquer tipo que implemente , com a VisualMarker classe fornecendo as seguintes IVisualIVisual propriedades:

• Default – indica que a exibição deve ser renderizada usando o renderizador padrão.
• MatchParent – indica que a exibição deve usar o mesmo renderizador que seu pai direto.
• Material – indica que a exibição deve ser renderizada usando um renderizador material.

Importante

A Visual propriedade é definida na classe , com exibições VisualElement herdando o Visual valor da propriedade de seus pais. Portanto, definir a Visual propriedade em um ContentPage garante que todos os modos de exibição com suporte na página usarão esse Visual. Além disso, a Visual propriedade pode ser substituída em uma exibição.

As capturas de tela a seguir mostram uma interface do usuário renderizada usando os renderizadores padrão:

As capturas de tela a seguir mostram a mesma interface do usuário renderizada usando os renderizadores de material:

O main diferenças visíveis entre os renderizadores padrão e os renderizadores de material, mostrados aqui, são que os renderizadores de material capitalizam Button o texto e arredondam os cantos das Frame bordas. No entanto, os renderizadores de material usam controles nativos e, portanto, ainda pode haver diferenças de interface do usuário entre plataformas para áreas como fontes, sombras, cores e elevação.

Observação

Os componentes de Design de Material seguem de perto as diretrizes do Google. Como resultado, os renderizadores de Design de Material são tendenciosos em relação a esse dimensionamento e comportamento. Quando você precisa de maior controle de estilos ou comportamento, ainda pode criar seu próprio Efeito, Comportamento ou Renderizador Personalizado para obter os detalhes necessários.

Personalizar o visual do material

O pacote NuGet do Material Visual é uma coleção de renderizadores que percebem os Xamarin.Forms controles. Personalizar controles visuais de material é idêntico à personalização de controles padrão.

Os efeitos são a técnica recomendada quando a meta é personalizar um controle existente. Se existir um renderizador de Material Visual, será menos trabalho personalizar o controle com um efeito do que subclasse do renderizador. Para obter mais informações sobre efeitos, consulte Xamarin.Forms efeitos.

Renderizadores personalizados são a técnica recomendada quando um renderizador material não existe. As seguintes classes de renderizador estão incluídas no Material Visual:

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

A subclasse de um renderizador material é quase idêntica aos renderizadores não Materiais. No entanto, ao exportar um renderizador que subclasse um renderizador material, você deve fornecer um terceiro argumento para o ExportRenderer atributo que especifica o 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
    {
        //...
    }
}

Neste exemplo, o ExportRendererAttribute especifica que a CustomMaterialProgressBarRenderer classe será usada para renderizar a ProgressBar exibição, com o IVisual tipo registrado como o terceiro argumento.

Observação

Um renderizador que especifica um IVisual tipo, como parte de seu ExportRendererAttribute, será usado para renderizar os modos de exibição, em vez do renderizador padrão. No momento da seleção do renderizador, a Visual propriedade da exibição é inspecionada e incluída no processo de seleção do renderizador.

Para obter mais informações sobre renderizadores personalizados, consulte Renderizadores personalizados.

Links relacionados

• Material Visual (exemplo)
• Criar um Xamarin.Forms Renderizador Visual
• Xamarin.Forms Efeitos
• Renderizadores personalizados