Xamarin.Forms suportou iOS, Android e Windows por um longo período de tempo. Também adicionamos novas plataformas para acompanhar as mudança, como Tizen e MacOS, e tendo o Linux e Windows WPF no horizonte.

By Adrian StevensOctober 16, 2017 , tradução por Alessandro Binhara

Essas plataformas são executadas em uma grande variedade de dispositivos, incluindo telefones, tablets, desktops e TVs. Isso representa um desafio interessante para nós como desenvolvedores; Como desenhamos uma UI inteligente que escala e isso faz sentido em cada idioma que se é apresentado?

Responda ao tamanho da tela

Por padrão, Xamarin.Forms Layouts e controles são projetados para serem sensíveis e muitas vezes crescem e se encolhem para tirar proveito do espaço disponível na tela. Se for necessário mais controle, a classe Xamarin.Forms Page tem um evento SizeChanged que podemos usar para determinar o tamanho de tela disponível em tempo de execução. Este evento é gerado quando a Página é exibida, permitindo-nos ajustar ou alterar a UI da nossa página com base na Largura ou Altura da tela.

Responda à Orientação

Podemos usar o evento SizeChanged para responder às mudanças de orientação. SizeChanged será disparado quando a tela é girada. Podemos determinar a orientação comparando as propriedades da Largura e da Altura da página.


Responda ao tipo de dispositivo

Muitas vezes pensamos em respostas adaptativas em termos de tamanho da tela, mas também precisamos responder a como o usuário interage com o dispositivo. Por exemplo, usamos toque em dispositivos móveis e um mouse com teclado em um PC desktop.
Xamarin.Forms fornece uma propriedade idiomática estática na classe Device que podemos usar para verificar o tipo de dispositivo. Os dispositivos são classificados em quatro categorias: Telefone, Tablet, Desktop e TV.


Podemos usar Device.Idiom para alterar a UI que apresentamos. Temos várias opções que você pode usar, dependendo de uma série de mudanças que você precisa fazer.

Para pequenas mudanças, como ajustar os tamanhos dos botões, atualizamos os controles e layouts diretamente.


Quando você precisa adicionar ou remover partes de sua UI, o Xamarin.Forms fornece um ContentView que nos permite criar controles compostos. Definimos partes de UI reutilizáveis com comportamento e, em seguida, decidimos quais controles compostos para exibir com base no Idiom. Você pode pensar em um ContentView como uma página Xamarin.Forms parcial.


Quando as mudanças de UI são significativas entre os tipos de dispositivo, você pode criar várias páginas. Usamos Device.Idiom para decidir qual página exibir ou você pode até usar o ContentViews nessas páginas para evitar o código duplicado.

E se você estiver usando o MVVM, você pode definir um único Model View que seja usado para cada versão de sua Página, reduzindo ainda mais o código repetido!


Se você quiser saber mais sobre o design adaptativo, você pode encontrar uma documentação excelente aqui e aqui.

Dirija-se ao site da Universidade Xamarin para um treinamento mais excelente em Xamarin, incluindo cursos gratuitos auto-guiados!

Discuta esta publicação nos fóruns.