Guida introduttiva: Progettazione di app per diverse dimensioni di finestra

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Quando progetti un'app con un aspetto ottimale e che funzioni bene a qualsiasi dimensioni di finestra, devi scegliere se vuoi creare layout aggiuntivi a complemento del layout orizzontale a schermo intero predefinito. Puoi progettare un'app in grado di supportare una larghezza minima di 320 pixel invece della larghezza minima predefinita di 500 pixel e che passi a un layout verticale quando l'app è più alta che larga. Queste sono opzioni di progettazione facoltative.

Per una dimostrazione pratica di questa funzionalità, vedi gli argomenti della serie sulle funzionalità delle app: Interfaccia utente delle app di Windows Store, dall'inizio alla fine

Obiettivo: Questo articolo ti fornirà informazioni su come modificare la larghezza minima di un'app da 500 a 320 pixel e su come modificare la progettazione in modo che l'app presenti l'aspetto ottimale e che funzioni correttamente alle larghezze ridotte. Acquisirai anche informazioni su come progettare un'app con scorrimento orizzontale in grado di passare a un layout verticale ogni volta che l'altezza dell'app è maggiore della larghezza.

Prerequisiti

Creare la prima app di Windows Store in JavaScript

Linee guida per l'esperienza utente per il layout e la scalabilità

Esempio: layout per finestre più alte che larghe

Per altre informazioni sulle opzioni di progettazione aggiuntive per i layout alti e stretti e su come vengono implementati, vedi Esempio di layout per finestre più alte che larghe. Questo esempio è basato sul modello Applicazione griglia disponibile in Microsoft Visual Studio.

Il modello Applicazione griglia è composto da quattro pagine:

default (default.html), che carica semplicemente la pagina groupedItems dopo l'avvio dell'app.
groupedItems (pages\groupItems\groupedItems.html), che consente all'utente di visualizzare gruppi ed elementi e di selezionare un'etichetta di gruppo per passare alla pagina dei dettagli del gruppo (groupDetail) oppure di selezionare un elemento per passare alla visualizzazione degli elementi a pagina intera (itemDetail).
groupDetail (pages\groupDetail\groupDetail.html), che consente all'utente di visualizzare i dettagli e gli elementi del gruppo e di selezionare un elemento per passare alla visualizzazione degli elementi a pagina intera (itemDetail).
itemDetail (pages\itemDetail\itemDetail.html), che rappresenta la visualizzazione a pagina intera di un elemento.

In questo articolo useremo il layout predefinito di ogni pagina. Vedremo solo le modifiche da apportare al codice JavaScript associato alle pagine groupDetail e groupedItems.

La principale tecnica di scrittura del codice in questo caso consiste nel cercare le modifiche apportate alle proprietà offsetWidth e offsetHeight di una pagina. Se l'utente cambia l'orientamento del dispositivo o la larghezza della pagina e la larghezza e l'altezza raggiungono determinati valori, la pagina modifica il layout e il comportamento dei propri controlli.

Per una prova in Visual Studio, crea una nuova istanza del progetto Applicazione griglia di Windows Store in JavaScript e quindi atteniti alle istruzioni seguenti.

Definire la larghezza minima

Per impostazione predefinita, la larghezza minima di un'app di Windows Store è 500 pixel. L'altezza di un'app riempie sempre lo schermo. L'altezza dello schermo minima di un'app è 768 pixel.

Se la tua app funziona bene alle larghezze ridotte o se il multitasking rappresenta uno scenario importante per la tua app e desideri che gli utenti la tengano nella stessa schermata di altre app, puoi modificare la larghezza minima e impostarla su 320 pixel anziché su 500. In questo modo, gli utenti potranno ridimensionare l'app in modo fluido a qualsiasi dimensione, da schermo intero fino a una larghezza di 320 pixel.

Puoi modificare la larghezza minima dell'app nel file manifesto package.appxmanifest. Ecco come fare in Visual Studio:

Apri il file manifesto package.appxmanifest. Il manifesto viene aperto automaticamente in Progettazione manifesto dell'applicazione.
Apri la scheda Applicazione e cerca il campo Larghezza minima.
Usa l'elenco a discesa per impostare la larghezza minima su 320 px.
Se apri il file manifesto package.appxmanifest in un editor di testo, dovresti visualizzare l'elemento ApplicationView come figlio dell'elemento VisualElements. Ad esempio, ecco come appare la nuova larghezza minima nel file manifesto.
```
<ApplicationView MinWidth="width320" /> 
```

Ora che la tua app può essere ridimensionata fino a 320 pixel, devi modificare l'app in modo che sia utilizzabile anche con larghezze ridotte. In particolare, modifica l'app impostando lo scorrimento verticale anziché orizzontale.

Definire il comportamento per i gruppi e la visualizzazione degli elementi

Nel file pages\groupedItems\groupedItems.js aggiungi il codice al metodo ready della funzione ui.Pages.define. Questo metodo viene chiamato dopo il completamento dell'inizializzazione e del rendering. In questo metodo chiama la funzione _initializeLayout che definirai più avanti. Per riferimento, il codice da aggiungere è contrassegnato dai commenti *** 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 ***
    },
    // ...
```

Nel file groupedItems.js aggiungi il codice al metodo updateLayout della funzione ui.Pages.define. Questo metodo viene chiamato ogni volta che l'utente passa a uno stato di visualizzazione diverso, ad esempio a larghezza ridotta, verticale o orizzontale. In questo metodo crea un riferimento al controllo ListView della pagina, disabilita temporaneamente le animazioni di pagina e quindi chiama la funzione _initializeLayout, che definirai più avanti.

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

Nel file groupedItems.js aggiungi il codice alla funzione ui.Pages.define per definire la funzione _initializeLayout. Questa funzione determina se per la pagina è impostato il layout a larghezza ridotta, verticale o orizzontale e regola di conseguenza il controllo ListView della pagina. Viene chiamata da entrambi i metodi ready e updateLayout. Ecco quali operazioni esegue questa funzione:

Se la larghezza della pagina è maggiore di 320 pixel, ma minore di 500 pixel, il controllo ListView della pagina visualizza i dati solo sotto forma di un elenco a scorrimento verticale di gruppi. 500 pixel è un valore esemplificativo della larghezza. Puoi decidere la larghezza desiderata per il layout. In questo esempio, abbiamo stabilito che l'app passerà al relativo layout. Con qualsiasi larghezza inferiore ai 500 pixel, l'app userà il layout a larghezza ridotta.
Se la larghezza della pagina è minore dell'altezza, il controllo ListView visualizza i dati sotto forma di un elenco a scorrimento verticale di gruppi che contengono elementi.
Diversamente, il controllo ListView visualizza i dati sotto forma di una griglia a scorrimento orizzontale di gruppi che contengono elementi.

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

Definire il comportamento per i dettagli dei gruppi e la visualizzazione dettagli degli elementi

Nel file pages\groupDetail\groupDetail.js aggiungi il codice al metodo updateLayout della funzione ui.Pages.define. Questo metodo viene chiamato quando l'utente passa dal layout verticale a quello orizzontale e viceversa. In questo metodo crea un riferimento al controllo ListView della pagina, disabilita temporaneamente le animazioni di pagina e quindi chiama la funzione _initializeLayout, che definirai più avanti. Scorri inoltre il controllo ListView in modo che l'elemento corretto sia il primo elemento visibile.

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

Nel file groupDetail.js aggiungi il codice alla funzione ui.Pages.define per definire la funzione _initializeLayout. Questa funzione determina se per la pagina è impostato il layout verticale o orizzontale e regola di conseguenza il controllo della pagina. Il metodo updateLayout chiama questa funzione. Ecco quali operazioni esegue questa funzione:
- Se la larghezza della pagina è maggiore di 320 pixel, ma minore di 500 pixel, il controllo ListView della pagina visualizza i dati solo sotto forma di un elenco a scorrimento verticale di gruppi. 500 pixel è un valore esemplificativo della larghezza. Puoi decidere la larghezza desiderata per il layout. In questo esempio, abbiamo stabilito che l'app passerà al relativo layout. Con qualsiasi larghezza inferiore ai 500 pixel, l'app userà il layout a larghezza ridotta.
- Se la larghezza della pagina è minore dell'altezza, il controllo ListView visualizza i dati sotto forma di un elenco a scorrimento verticale senza includere un'intestazione di gruppo.
- Diversamente, il controllo ListView visualizza i dati sotto forma di griglia a scorrimento orizzontale con l'intestazione del gruppo visualizzata sulla sinistra.
```
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 ***
    // ...
```

Passare da un layout all'altro

A questo punto puoi vedere come cambia il layout dell'app quando si cambiano le dimensioni della finestra.

In Visual Studio avvia l'app nel simulatore. Per sapere come fare, vedi l'argomento relativo all'esecuzione di app di Windows Store nel simulatore.
Fai clic su Modalità tocco di base.
Trascina lateralmente la parte superiore della pagina e sposta la barra di divisione in modo che la pagina sia larga 500 pixel. I dati vengono visualizzati sotto forma di un elenco a scorrimento verticale di gruppi che contengono elementi.
Sposta la barra di divisione in modo che la pagina sia larga 320 pixel. I dati vengono visualizzati solo sotto forma di un elenco a scorrimento verticale di gruppi.
Fai clic su Ruota in senso orario. I dati vengono visualizzati sotto forma di un elenco a scorrimento verticale di gruppi che contengono elementi.
Prova anche a toccare titoli di gruppi, di titoli di elementi e il pulsante Indietro e a cambiare larghezza di pagina e orientamento del dispositivo.

Riepilogo

A questo punto dovresti esserti fatto un'idea di come progettare l'app in modo che presenti un aspetto ottimale e funzioni correttamente alle larghezze ridotte e nei layout più alti che larghi.

Argomenti correlati

Guida introduttiva: Definizione dei layout delle app

Condividi tramite