Criando layouts específicos em apps universais

Já comentamos anteriormente que o Windows 10 introduziu a Plataforma Universal do Windows (UWP), que unificou o núcleo do Windows permitindo que o mesmo aplicativo seja executado em uma ampla variedade de dispositivos como Windows Phone, Desktops, Surface Hub, HoloLens, Xbox, IoT devices e outros dispositivos Windows.

Do ponto de vista do desenvolvedor, ao criar um aplicativo UWP, você está criando um aplicativo que tem o potencial de ser executado em qualquer dispositivo Windows. Imagine isso alinhado com a estratégia da Microsoft que planeja ter 1 bilhão de dispositivos rodando Windows 10 nos próximos anos.

criando_layouts_especificos_em_apps_universais_1_billion_devices

Do ponto de vista do usuário, o UWP permite a mesma experiência pessoal independente do dispositivo utilizado.

Criar um aplicativo que pareça ser bom em todos os dispositivos pode ser um grande desafio. Precisamos levar em consideração alguns conceitos sobre a adaptação das interfaces, permitindo assim que o aplicativo ofereça a melhor usabilidade independentemente do tamanho de tela ou forma de interação.

Muitos desses conceitos já foram abordados aqui quando falamos sobre o Adaptive UI em Aplicativos Universais. Na maioria dos casos, essas dicas funcionam bem mas o que podemos fazer se precisarmos trabalhar com layouts específicos de acordo com cada família de dispositivos?

É isso o que veremos nesse post. Como criar telas customizadas para mobile, desktop etc. dentro do mesmo aplicativo.

O conceito é muito simples. É algo que o desenvolvedor Android está acostumado ao criar pastas separadas por resolução para organizar os arquivos de layout. No nosso caso, vamos precisar criar pastas seguindo a nomeclatura DeviceFamily-[family] onde family pode ser Desktop, Mobile, IoT etc.

Para ver isso em ação, crie usando o Visual Studio um projeto Blank App Universal Windows.

criando_layouts_especificos_em_apps_universais_create_project

Com o projeto aberto, crie 3 pastas clicando com o botão direito em cima do projeto -> Add -> New Folder. As pastas obrigatoriamente devem ter os nomes DeviceFamily-DesktopDeviceFamily-IoTDeviceFamily-Mobile.

criando_layouts_especificos_em_apps_universais_new_folder

O próximo passo é criar arquivos XAML em cada uma das pastas recém criadas. Para isso, clique com o botão direito em cima da pasta desejada -> Add -> New Item...

criando_layouts_especificos_em_apps_universais_new_item

Ao ser perguntado sobre o tipo do novo item, selecione o XAML View. O importante é manter o mesmo nome dos arquivos. No nosso caso, iremos customizar o layout do MainPage, portanto todos os arquivos criados devem ter o nome: MainPage.xaml.

criando_layouts_especificos_em_apps_universais_new_xaml

Ao final, você deverá ter a seguinte estrutura:

criando_layouts_especificos_em_apps_universais_estrutura

Agora chegou a hora de customizar o XAML da forma que desejar. Para efeito de demonstração, iremos alterar a cor de fundo do Grid além de adicionar um TextBlock. Dessa forma teremos:

DeviceFamily-Desktop

<Page x:Class="talkitbr.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:talkitbr" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid Background="Red">
        <TextBlock Text="Olá Desktop!" FontSize="30" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Page>

DeviceFamily-IoT

<Page x:Class="talkitbr.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:talkitbr" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid Background="Blue">
        <TextBlock Text="Olá Raspberry Pi!" FontSize="30" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Page>

DeviceFamily-Mobile

<Page x:Class="talkitbr.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:talkitbr" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid Background="Green">
        <TextBlock Text="Olá Mobile!" FontSize="30" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Page>

Ao rodar esse aplicativo, o resultado esperado são telas com aparências especificas para cada uma das famílias de dispositivos:

criando_layouts_especificos_em_apps_universais_desktop

criando_layouts_especificos_em_apps_universais_iot

criando_layouts_especificos_em_apps_universais_mobile

Observação: Da mesma forma que usamos a criação de pastas para organizar os arquivos de layout por família de dispositivos, existe também a possibilidade de alterar o nome do arquivo de layout, por exemplo, MainPage.DeviceFamily-Mobile.xaml.

Você já estava familiarizado com esse recurso? Deixe aqui o seu comentário e continue nos seguindo no talkitbr. Até a próxima!

Fonte/Imagens: Microsoft

Anúncios

2 comentários

    • O uso de XAML segregado por famílias de devices só deve ser usado em casos onde o seu requisito pede layout de telas que são muito diferentes em cada dispositivo. Em todos os outros casos devemos construir interfaces que se adaptam ao espaço disponível na tela. Para isso possuímos recursos que nos permitem redimensionar os itens na tela, refazer os fluxos do conteúdo, reposicionar os elementos da tela etc. O uso de visual state triggers é muito importante para isso e falaremos mais dele nos próximos posts.

      Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s