Layout delle app

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

I layout comuni delle app includono:

• Singola schermata (più semplice): gli elementi dell'interfaccia utente sono limitati a ciò che è visibile contemporaneamente senza scorrere.
• Contenitore verticale (il più comune): i contenuti si trovano oltre la parte visibile dello schermo e sono accessibili scorrendo.
• Altre opzioni: elenchi, paginazione 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 i fragment, da un FragmentActivity. Gli altri tipi di attività utilizzano elementi dell'interfaccia utente specifici per il mobile che non sono necessari per Wear OS.

Singolo schermo

L'utente vede tutti gli elementi in un'unica schermata senza scorrere. Ciò significa che puoi includere solo un numero limitato di elementi.

Figura 1. Un esempio di layout a una sola schermata.

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

Contenitore verticale

Un 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 completi di app 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 contenitore, mentre altri percorsi degli utenti critici e impostazioni si trovano in basso. Si tratta di una best practice per la disposizione dei contenuti.

Figura 2. Esempi di layout dei contenitori verticali.

A differenza di un layout dell'app a schermo singolo, non utilizzare BoxInsetLayout. Utilizza invece un ConstraintLayout all'interno di un NestedScrollView. All'interno di ConstraintLayout, inserisci i widget più adatti alla tua app. In questo modo puoi sfruttare lo spazio aggiuntivo sui lati di un display circolare.

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

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

Nota:Se possibile, aggiungi un indicatore di scorrimento al tuo NestedScrollView impostando android:scrollbars="vertical" nel file XML. In questo modo, gli utenti possono capire che sono disponibili altri contenuti e vedere a che punto si trovano rispetto a tutti i contenuti.

Altre opzioni per i layout delle app

• Elenchi: visualizza grandi set di dati con il widget WearableRecyclerView ottimizzato per le piattaforme indossabili. Per saperne di più, vedi Creare elenchi su Wear OS.
• Paginazione orizzontale: per i casi d'uso con più schermate correlate, utilizza uno scorrimento orizzontale. Se utilizzi la paginazione orizzontale, devi supportare lo scorrimento per chiudere il bordo sinistro.
• Panoramica 2D: per casi d'uso come le mappe, gli utenti possono trascinare per spostarsi in direzioni diverse. Attiva Scorri per chiudere se la tua attività occupa l'intero schermo.