Layout delle app

Dopo aver capito come gestire le diverse forme degli orologi, decidi quale piattaforma vuoi utilizzare.

I layout più comuni delle app includono:

• Schermo singola (più semplice): gli elementi dell'interfaccia utente sono limitati a ciò che è visibile in una sola volta senza dover scorrere.
• Contenitore verticale (più comune): i contenuti si trovano oltre la parte visibile dello schermo e sono accessibili tramite scorrimento.
• Altre opzioni: elenchi, paging o panoramica 2D.

Questi tipi di layout sono descritti nelle sezioni seguenti. Se hai bisogno di più schermi, puoi utilizzare una combinazione di tipi di layout.

Nota: per la tua attività, eredita da un ComponentActivity o, se utilizzi frammenti, da un FragmentActivity. Gli altri tipi di attività utilizzano elementi UI specifici per dispositivi mobili che non sono necessari per Wear OS.

Schermo singolo

L'utente vede tutti gli elementi in una singola schermata senza dover scorrere. Ciò significa che puoi includere solo pochi elementi.

Figura 1. Esempio di layout a schermata singola.

Le singole schermate funzionano bene con un BoxInsetLayout in combinazione con un ConstraintLayout per organizzare gli elementi.

Contenitore verticale

Il contenitore verticale è il tipo più comune di layout dell'app. Alcuni contenuti non sono visibili sullo schermo, ma sono accessibili scorrendo.

La Figura 2 mostra diversi layout di app completi in cui solo una parte dei contenuti può essere visualizzata sullo schermo circolare di uno smartwatch. In questi esempi, i contenuti principali si trovano nella parte superiore del container, mentre gli altri percorsi dell'utente critici (CUJ) e le impostazioni si trovano nella parte inferiore. Si tratta di una best practice per la disposizione dei contenuti.

Figura 2. Esempi di layout del contenitore verticale.

Diversamente da quanto accade nel layout delle app con una sola schermata, non usare BoxInsetLayout. Utilizza invece un ConstraintLayout all'interno di un NestedScrollView. All'interno di ConstraintLayout, posiziona i widget più adatti alla tua app per sfruttare lo spazio in più ai lati di un display circolare.

Figura 3. Contenuti in un elemento ConstraintLayout all'interno di un elemento NestedScrollView.

Assicurati che i contenuti nella parte superiore e inferiore del contenitore verticale siano sufficientemente piccoli da poter essere inseriti nella parte superiore e inferiore di un display circolare, come nell'esempio nella figura 3.

Nota: se possibile, aggiungi un indicatore di scorrimento a NestedScrollView impostando android:scrollbars="vertical" nel file XML. Questo aiuta gli utenti a capire che sono disponibili più contenuti e li aiuta a vedere dove si trovano rispetto a tutti i contenuti.

Altre opzioni per i layout delle app

• Elenchi: mostra grandi insiemi di dati con il widget WearableRecyclerView ottimizzato per le piattaforme indossabili. Per maggiori informazioni, consulta la pagina Creare elenchi su Wear OS.
• Pagina orizzontale: per i casi d'uso con più schermate di pari livello, utilizza uno scorrimento orizzontale. Se utilizzi il paging orizzontale, devi supportare la funzione di scorrimento per ignorare per il bordo sinistro.
• Panning 2D: per casi d'uso come le mappe, gli utenti possono trascinare alla panoramica in direzioni diverse. Attiva la funzionalità scorri per ignorare se la tua attività occupa tutto lo schermo.