Guia de início rápido: projetando aplicativos para diferentes tamanhos de janela

Artigo
12/12/2015

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Ao projetar um aplicativo para ter uma boa aparência e funcionar bem em qualquer tamanho de janela, você pode criar layouts adicionais para complementar o layout horizontal padrão de tela inteira. Você pode projetar o aplicativo para permitir uma largura mínima de 320 pixels, em vez do mínimo padrão de 500 pixels, e para alternar para um layout vertical quando a altura do aplicativo for maior do que a largura. Estas são opções de design.

Veja este recurso em ação como parte da nossa série Recursos para aplicativos, do início ao fim: Interface do usuário de aplicativo da Windows Store, do início ao fim

Objetivo: Após ler este artigo, você vai entender como alterar a largura mínima de um aplicativo, de 500 para 320 pixels, e como alterar o design para que o aplicativo tenha uma boa aparência e funcione bem em larguras estreitas. Você também vai saber como projetar um aplicativo com movimento panorâmico horizontal, de modo que ele mude para um layout vertical sempre que a altura do aplicativo for maior do que a largura.

Pré-requisitos

Criar seu primeiro aplicativo da Windows Store em JavaScript

Diretrizes de experiência do usuário para layout e dimensionamento

O exemplo: layout de janelas com altura maior do que a largura

Este artigo demonstra as opções de design adicionais para layouts altos e estreitos. A implementação desses layouts está descrita no Exemplo de layout para janelas com altura maior do que a largura. Esse exemplo baseia-se no modelo Aplicativo de Grade do Microsoft Visual Studio.

O modelo Aplicativo de Grade tem quatro páginas:

default (default.html), que simplesmente carrega a página groupedItems depois que o aplicativo é iniciado.
groupedItems (pages\groupItems\groupedItems.html), que permite ao usuário exibir grupos e itens e ainda selecionar um rótulo de grupo para navegar até a página de detalhes do grupo (groupDetail) ou selecionar um item para navegar até o modo de exibição de item de página inteira (itemDetail).
groupDetail (pages\groupDetail\groupDetail.html), que permite ao usuário exibir os detalhes e os itens do grupo e selecionar um item para navegar até o modo de exibição de item de página inteira (itemDetail).
itemDetail (pages\itemDetail\itemDetail.html), que representa o modo de exibição de página inteira de um item.

Neste artigo, você vai usar o layout padrão de cada página. Nós abordamos apenas as mudanças necessárias ao code-behind JavaScript das páginas groupDetail e groupedItems.

A principal técnica de codificação aqui é verificar se há mudanças nas propriedades offsetWidth e offsetHeight de uma página. Se alguns valores de largura e altura forem atingidos depois que um usuário mudar a largura da página ou a orientação do dispositivo, a página vai mudar o layout e o comportamento de seus controles.

Para tentar fazer isso, no Visual Studio, crie uma nova instância do projeto JavaScript da Windows Store Aplicativo de Grade e siga o restante destas instruções.

Definir a largura mínima

Por padrão, a largura mínima de um aplicativo da Windows Store é de 500 pixels. A altura do aplicativo sempre preenche a tela. A altura mínima de tela de um aplicativo é de 768 pixels.

Se o seu aplicativo funciona bem em larguras estreitas, ou se a multitarefa é um cenário importante para ele e você deseja que os usuários o mantenham na mesma tela com outros aplicativos, mude a largura mínima de 500 para 320 pixels. Dessa forma, os usuários poderão redimensionar o aplicativo suavemente para qualquer tamanho de tela, desde tela inteira até 320 pixels de largura.

Você altera a largura mínima do aplicativo no arquivo de manifesto package.appxmanifest. Para isso, no Visual Studio, execute as etapas a seguir.

Abra o arquivo de manifesto package.appxmanifest. O manifesto é aberto automaticamente no Designer de Manifesto.
Abra a guia Aplicativo e encontre o campo Largura mínima.
Use a lista suspensa para alterar a largura mínima para 320 px.
Se você abrir o arquivo de manifesto package.appxmanifest em um editor de texto, vai ver o elemento ApplicationView como um filho do elemento VisualElements. Por exemplo, a nova largura mínima no arquivo de manifesto vai ter esta aparência.
```
<ApplicationView MinWidth="width320" /> 
```

Agora que seu aplicativo pode ser redimensionado até 320 pixels, você tem de modificá-lo para ser utilizado em larguras estreitas. Especificamente, você vai alternar o aplicativo para aplicar panorâmica na vertical, e não na horizontal.

Definir o comportamento para o modo de exibição de grupos e itens

No arquivo pages\groupedItems\groupedItems.js, adicione o código ao método ready da função ui.Pages.define. Esse método é chamado após o término da inicialização e renderização de toda a página. Nesse método, chame a função _initializeLayout, que você vai definir mais tarde. (Para referência, o código que você tem que adicionar é marcado com os comentários *** START *** e *** END ***.)
```
ui.Pages.define("/pages/groupedItems/groupedItems.html", {
    // ...
    ready: function (element, options) {
        var listView = element.querySelector(".groupeditemslist").winControl;
        listView.element.focus();
        // *** START ***
        this._initializeLayout(listView);
        // *** END ***
    },
    // ...
```

No arquivo groupedItems.js, adicione o código ao método updateLayout da função ui.Pages.define. Esse método é chamado sempre que o usuário alterna o aplicativo entre os estados de layout, como estreito, retrato e paisagem. Nesse método, faça uma referência ao controle ListView da página, desabilite as animações da página temporariamente e chame a função _initializeLayout, que você vai definir mais tarde.

ui.Pages.define("/pages/groupedItems/groupedItems.html", {
    // ...
    updateLayout: function (element) {
        /// <param name="element" domElement="true" />

        // TODO: Respond to changes in layout.
        // *** START ***
        var listView = element.querySelector(".groupeditemslist").winControl;

        // Don't show page entrance animations when the app switches layouts.
        var handler = function (e) {
            listView.removeEventListener("contentanimating", handler, false);
            e.preventDefault;
        }
        listView.addEventListener("contentanimating", handler, false);

        this._initializeLayout(listView);
        // *** END ***
    },
    // ...

No arquivo groupedItems.js, adicione o código à função ui.Pages.define para definir a função _initializeLayout. Essa função determina se o layout da página é estreito, retrato ou paisagem e ajusta o controle ListView da página de acordo. Ambos os métodos ready e updateLayout chamam essa função. Veja a seguir o que essa função faz.

Se a largura da página for maior que 320 pixels, mas menor que 500 pixels, o controle ListView da página vai mostrar os dados apenas como uma lista de grupos com rolagem vertical. (500 pixels é um exemplo de largura. Você escolhe a largura para a mudança do layout. Nesse exemplo, nós escolhemos 500 pixels como o ponto em que o aplicativo alterna seu layout. Para qualquer largura inferior a 500 pixels, o aplicativo vai usar o layout estreito.)
Se a largura da página for menor que a sua altura, o controle ListView vai mostrar os dados como uma lista de grupos com rolagem vertical que inclui itens.
Caso contrário, o controle ListView vai mostrar os dados como uma grade de grupos com rolagem horizontal que inclui itens.

ui.Pages.define("/pages/groupedItems/groupedItems.html", {
    // ...
    // *** START ***
    _initializeLayout: function (listView) {
        // Narrow layout.
        if (document.documentElement.offsetWidth < 500) {
            // Show data as a vertically-scrolling list of groups only.
            listView.itemDataSource = Data.groups.dataSource;
            listView.groupDataSource = null;
            listView.layout = new ui.ListLayout();                
        }
        // Portait layout.
        else if (document.documentElement.offsetWidth < document.documentElement.offsetHeight) {
            // Show data as as a vertically-scrolling list of groups that contain items.
            listView.itemDataSource = Data.items.dataSource;
            listView.groupDataSource = Data.groups.dataSource;
            listView.layout = new ui.ListLayout();                                
        }
        // Landscape layout.
        else {
            // Show data as a horizontally-scrolling grid of groups contain items.
            listView.itemDataSource = Data.items.dataSource;
            listView.groupDataSource = Data.groups.dataSource;
            listView.layout = new ui.GridLayout();
        }
    },
    // *** END ***
    // ...

Definir o comportamento para o modo de exibição de detalhes e itens do grupo

No arquivo pages\groupDetail\groupDetail.js, adicione o código ao método updateLayout da função ui.Pages.define. Esse método é chamado sempre que o usuário alterna o aplicativo entre os layouts retrato e paisagem. Nesse método, faça uma referência ao controle ListView da página, desabilite as animações da página temporariamente e chame a função _initializeLayout, que você vai definir mais tarde. Role também o controle ListView para que o item correto seja o primeiro item visível.

ui.Pages.define("/pages/groupDetail/groupDetail.html", {
    // ...
    updateLayout: function (element) {
        /// <param name="element" domElement="true" />

        // TODO: Respond to changes in layout.
        // *** START ***
        var listView = element.querySelector(".itemslist").winControl;

        // Don't show page entrance animations when the app switches layouts.
        var handler = function (e) {
            listView.removeEventListener("contentanimating", handler, false);
            e.preventDefault();
        }
        listView.addEventListener("contentanimating", handler, false);

        var firstVisible = listView.indexOfFirstVisible;

        this._initializeLayout(listView);

        if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
            listView.indexOfFirstVisible = firstVisible;
        }
        // *** END ***
    },
    // ...

No arquivo groupDetail.js, adicione o código à função ui.Pages.define para definir a função _initializeLayout. Essa função determina se o layout da página é retrato ou paisagem e ajusta o controle da página de acordo. O método updateLayout chama essa função. Veja a seguir o que essa função faz.
- Se a largura da página for maior que 320 pixels, mas menor que 500 pixels, o controle ListView da página vai mostrar os dados apenas como uma lista de grupos com rolagem vertical. (500 pixels é um exemplo de largura. Você escolhe a largura para a mudança do layout. Nesse exemplo, nós escolhemos 500 pixels como o ponto em que o aplicativo alterna seu layout. Para qualquer largura inferior a 500 pixels, o aplicativo vai usar o layout estreito.)
- Se a largura da página for menor que a sua altura, o controle ListView vai mostrar os dados como uma lista com rolagem vertical, sem mostrar um cabeçalho de grupo.
- Caso contrário, o controle ListView vai mostrar os dados como uma grade com rolagem horizontal, mostrando o cabeçalho de grupo à esquerda.
```
ui.Pages.define("/pages/groupDetail/groupDetail.html", {
    // ...
    // *** START ***
    _initializeLayout: function (listView) {
        // Portrait layout.
        if (document.documentElement.offsetWidth < document.documentElement.offsetHeight) {
            listView.layout = new ui.ListLayout();
            var header = document.getElementsByTagName("header");
            header.item(0).style.display = "none";
        }
        // Landscape layout.
        else {
            listView.layout = new ui.GridLayout({ groupHeaderPosition: "left" });
            var header = document.getElementsByTagName("header");
            header.item(0).style.display = "inherit";
        }
    },
    // *** END ***
    // ...
```

Alternar layouts

Agora você pode ver o que acontece com o layout do aplicativo quando você alterna os tamanhos de janela.

No Visual Studio, inicie o aplicativo no simulador. (Para saber como, veja Executar aplicativos da Windows Store no simulador.)
Clique no modo de toque básico.
Arraste a parte superior da página para o lado e mova o divisor até a página ficar com 500 pixels de largura. Os dados aparecem como uma lista de grupos com rolagem vertical que inclui itens.
Mova o divisor até a página ficar com 320 pixels de largura. Os dados aparecem apenas como uma lista de grupos com rolagem vertical.
Clique em Girar no sentido horário. Os dados aparecem como uma lista de grupos com rolagem vertical que inclui itens.
Experimente tocar nos títulos dos grupos, dos itens e no botão Voltar; e também mudar as larguras das páginas e as orientações dos dispositivos.

Resumo

Agora, você já sabe como projetar seu aplicativo para ter uma boa aparência e funcionar bem em larguras estreitas e em layouts com altura maior do que a largura.

Tópicos relacionados

Guia de início rápido: definindo layouts de aplicativo