Inicio rápido: Diseñar aplicaciones para distintos tamaños de ventana

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

A la hora de diseñar una aplicación que se vea y funcione bien en cualquier tamaño de ventana, debes elegir si quieres crear diseños adicionales para complementar el diseño horizontal a pantalla completa predeterminado. Puedes diseñar tu aplicación para que admita un ancho mínimo de 320 píxeles en lugar del mínimo predeterminado de 500 píxeles, y cambiar a un diseño vertical cuando la aplicación sea más alargada que ancha. Estas son las opciones de diseño adicionales.

Consulta esta característica en acción como parte de nuestra serie Características de aplicaciones, de principio a fin: Interfaz de usuario de aplicaciones de la Tienda Windows, de principio a fin

Objetivo: Después de leer este artículo, sabrás cómo cambiar el ancho mínimo de una aplicación de 500 píxeles a 320 píxeles, y cómo cambiar el diseño para que la aplicación se vea y funcione bien en tamaños estrechos. También comprenderás cómo diseñar una aplicación con movimiento panorámico horizontal que cambia a un diseño vertical cuando el alto de la aplicación es mayor que el ancho.

Requisitos previos

Crear la primera aplicación de la Tienda Windows con JavaScript

Directrices sobre la experiencia del usuario para diseño y escalado

Muestra: Diseño para ventanas que son más alargadas que anchas

Este artículo muestra las opciones adicionales para diseños alargados y estrechos, y describe cómo implementarlas en la muestra de un diseño para ventanas que son más alargadas que anchas. Esta muestra se basa en la plantilla Aplicación de cuadrícula de Microsoft Visual Studio.

La plantilla Aplicación de cuadrícula tiene cuatro páginas:

default (default.html), que simplemente carga la página groupedItems después de que se inicie la aplicación.
groupedItems (pages\groupItems\groupedItems.html), que permite que los usuarios vean grupos y elementos, y o bien seleccionen una etiqueta de grupo para navegar hasta la página de detalles de grupo (groupDetail) o bien seleccionen un elemento para navegar hasta la vista de elementos de página completa (itemDetail).
groupDetail (pages\groupDetail\groupDetail.html), que permite que los usuarios vean detalles de grupo y elementos, y seleccionen un elemento para navegar hasta la vista de elementos de página completa (itemDetail).
itemDetail (pages\itemDetail\itemDetail.html), que representa la vista de página completa de un elemento.

En este artículo usarás el diseño predeterminado para cada página. Únicamente abordamos cambios que son necesarios para el código JavaScript detrás de las páginas groupDetail y groupedItems.

La técnica de codificación de claves a continuación es para comprobar los cambios a las propiedades offsetWidth y offsetHeight de una página. Si se alcanzan determinados valores de ancho y alto como resultado del cambio que realiza el usuario en la orientación del dispositivo o el ancho de la página, esta cambia el diseño y el comportamiento de sus controles.

Para probarlo, en Visual Studio, crea una instancia nueva del proyecto Aplicación de cuadrícula de la Tienda Windows de JavaScript y, después, sigue el resto de instrucciones.

Definir el ancho mínimo

De forma predeterminada, el ancho mínimo de una aplicación de la Tienda Windows es de 500 píxeles. El alto de la aplicación siempre rellena la pantalla. El alto de pantalla mínimo de una aplicación es de 768 píxeles.

Si tu aplicación funciona bien con tamaños estrechos o si la multitarea es un escenario importante para tu aplicación, y quieres que los usuarios la mantengan en la misma pantalla que otras aplicaciones, puedes cambiar el ancho mínimo a 320 píxeles en lugar de 500. De esta forma, los usuarios pueden cambiar el tamaño de la aplicación fácilmente, desde pantalla completa a 320 píxeles de ancho.

Puedes cambiar el ancho mínimo de la aplicación en el archivo de manifiesto package.appxmanifest. Para ello, en Visual Studio, realiza estos pasos.

Abre el archivo de manifiesto package.appxmanifest. El manifiesto se abre automáticamente en el Diseñador de manifiestos.
Abre la pestaña Aplicación y busca el campo Ancho mínimo.
Usa la lista desplegable para cambiar el ancho mínimo a 320 píxeles.
Si abres el archivo de manifiesto package.appxmanifest en un editor de texto, deberías ver el elemento ApplicationView como secundario del elemento VisualElements. Por ejemplo, el nuevo ancho mínimo en el archivo de manifiesto tiene este aspecto.
```
<ApplicationView MinWidth="width320" /> 
```

Ahora que el tamaño de la aplicación se puede cambiar a 320 píxeles, debes modificarla para que se pueda usar en tamaños estrechos. En concreto, cambiarás la aplicación para que se desplace en vertical en lugar de hacerlo en horizontal.

Definir el comportamiento de las vistas de grupos y elementos

En el archivo pages\groupedItems\groupedItems.js, agrega el código al método ready de la función ui.Pages.define. A este método se le llama después de que se haya completado la inicialización y representación de la página. En este método, llama a la función _initializeLayout, que definirás más tarde. (Como referencia, el código que tienes que agregar se marca con los comentarios *** START *** y *** 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 ***
    },
    // ...
```

En el archivo groupedItems.js, agrega el código al método updateLayout de la función ui.Pages.define. A este método se le llama cada vez que el usuario alterna la aplicación entre estados de diseño, como estrecho, vertical y horizontal. En este método, haz una referencia al control ListView de la página, deshabilita temporalmente las animaciones de página y, después, llama a la función _initializeLayout, que definirás más adelante.

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 ***
    },
    // ...

En el archivo groupedItems.js, agrega el código a la función ui.Pages.define para definir la función _initializeLayout. Esta función determina si la página tiene un diseño estrecho, vertical u horizontal, y ajusta el control ListView de la página en consecuencia. Tanto los métodos ready y updateLayout llaman a esta función. Esto es lo que hace esta función.

Si el ancho de la página es mayor que 320 píxeles, pero menor que 500 píxeles, el control ListView de la página muestra los datos como una lista de grupos de desplazamiento vertical solo. (500 píxeles es un ancho de ejemplo. Puedes decidir a qué ancho quieres que se cambie el diseño. En esta muestra, elegimos 500 píxeles como el punto en el que la aplicación cambia su diseño. En cualquier ancho inferior a 500 píxeles, la aplicación usa el diseño estrecho).
Si el ancho de la página es menor que su altura, el control ListView muestra los datos como una lista grupos de desplazamiento vertical que contiene elementos.
De lo contrario, el control ListView muestra los datos como una cuadrícula de grupos de desplazamiento horizontal que contiene elementos.

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 el comportamiento de la vista de detalles del grupo y detalles de elementos

En el archivo pages\groupDetail\groupDetail.js, agrega el código al método updateLayout de la función ui.Pages.define. A este método se le llama siempre que el usuario alterna la aplicación entre los diseños vertical y horizontal. En este método, haz una referencia al control ListView de la página, deshabilita temporalmente las animaciones de página y, después, llama a la función _initializeLayout, que definirás más adelante. También, desplaza el control ListView para que el elemento correcto sea el primer elemento visible.

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 ***
    },
    // ...

En el archivo groupDetail.js, agrega el código a la función ui.Pages.define para definir la función _initializeLayout. Esta función determina si la página tiene un diseño vertical u horizontal, y ajusta el control de la página en consecuencia. El método updateLayout llama a esta función. Esto es lo que hace esta función.
- Si el ancho de la página es mayor que 320 píxeles, pero menor que 500 píxeles, el control ListView de la página muestra los datos como una lista de grupos de desplazamiento vertical solo. (500 píxeles es un ancho de ejemplo. Puedes decidir a qué ancho quieres que se cambie el diseño. En esta muestra, elegimos 500 píxeles como el punto en el que la aplicación cambia su diseño. En cualquier ancho inferior a 500 píxeles, la aplicación usa el diseño estrecho).
- Si el ancho de la página es menor que su altura, el control ListView muestra los datos como una lista de desplazamiento vertical en la que no se muestra un encabezado de grupo.
- De lo contrario, el control ListView muestra los datos como una cuadrícula de desplazamiento horizontal con el encabezado de grupo situado a la izquierda.
```
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 ***
    // ...
```

Cambiar de un diseño a otro

Ahora puedes ver lo que le ocurre al diseño de la aplicación cuando cambias los tamaños de las ventanas.

En Visual Studio, inicia la aplicación en el simulador. (Para obtener más información, consulta Ejecutar aplicaciones de la Tienda Windows en el simulador).
Haz clic en Modo táctil básico.
Arrastra la parte superior de la página al lateral y mueve la línea divisoria hasta que la página tenga 500 píxeles de ancho. Los datos se muestran como una lista de grupos de desplazamiento vertical que contiene elementos.
Mueve la línea divisoria para que la página tenga 320 píxeles de ancho. Los datos se muestran como una lista de grupos de desplazamiento vertical solo.
Haz clic en Girar en el sentido de las agujas del reloj. Los datos se muestran como una lista de grupos de desplazamiento vertical que contiene elementos.
Intenta pulsar los títulos de grupo, títulos de elemento y el botón Atrás, así como cambiar los anchos de página y las orientaciones del dispositivo.

Resumen

Ahora ya sabes cómo diseñar tu aplicación para que se vea y funcione bien en tamaños estrechos y en diseños que sean más alargados que anchos.

Temas relacionados

Inicio rápido: Definir diseños de aplicaciones

Compartir a través de