I layout canonici su schermi grandi sono layout di app collaudati e versatili che offrono un'esperienza utente ottimale sui dispositivi con schermi grandi.
I layout canonici sono adattabili e adattivi. Supportano smartphone con schermi di piccole dimensioni, tablet, pieghevoli e dispositivi ChromeOS. I layout, che sono stati ricavati dalle linee guida di Material Design, sono estetici e funzionali.
Il framework Android include componenti specializzati che rendono l'implementazione dei layout semplice e affidabile utilizzando le viste o Jetpack Compose.
I layout canonici creano UI coinvolgenti e che migliorano la produttività, che sono alla base di fantastiche app.
Se conosci già i layout canonici degli schermi grandi, ma non sai quali API Android utilizzare per la tua app, vai alla sezione Applicabilità qui sotto per stabilire quale layout è adatto ai casi d'uso della tua app.
Progetti UX per schermi di grandi dimensioni
Scopri quanto può essere utile la tua app su schermi di grandi dimensioni.
Visita la galleria per schermi di grandi dimensioni per vedere una raccolta selezionata di layout per schermi grandi.
Fai un tour
Dettaglio elenco
Il layout dei dettagli dell'elenco consente agli utenti di esplorare elenchi di elementi con informazioni descrittive, esplicative o di altro tipo (i dettagli dell'elemento).
Il layout suddivide la finestra dell'app in due riquadri affiancati: uno per l'elenco e uno per i dettagli. Gli utenti selezionano gli elementi dall'elenco per visualizzarne i dettagli. I link diretti nei dettagli rivelano contenuti aggiuntivi nel riquadro dei dettagli.
Le visualizzazioni a larghezza espansa (vedi le classi di dimensioni della finestra) supportano contemporaneamente l'elenco e i dettagli. La selezione di un elemento dell'elenco aggiorna il riquadro dei dettagli per mostrare i contenuti correlati per l'elemento selezionato.
I display di larghezza media e compatta mostrano l'elenco o i dettagli, a seconda dell'interazione dell'utente con l'app. Quando è visibile solo l'elenco, quando selezioni una voce dell'elenco viene visualizzato il dettaglio al posto dell'elenco. Quando sono visibili solo i dettagli, premi il pulsante Indietro per visualizzare di nuovo l'elenco.
Modifiche alla configurazione, ad esempio modifiche all'orientamento del dispositivo o alle dimensioni della finestra dell'app, possono cambiare la classe delle dimensioni delle finestre del display. Un layout dei dettagli dell'elenco risponde di conseguenza, mantenendo lo stato dell'app:
- Se una visualizzazione a larghezza estesa in cui sia l'elenco sia i riquadri dei dettagli si restringe a media o compatta, il riquadro dei dettagli rimane visibile e quello dell'elenco è nascosto.
- Se in uno schermo di larghezza media o compatta è visibile solo il riquadro dei dettagli e la classe di dimensioni della finestra si espande in modo da espandere, l'elenco e i dettagli vengono visualizzati insieme e l'elenco indica che è selezionato l'elemento corrispondente ai contenuti nel riquadro dei dettagli.
- Se in uno schermo di larghezza media o compatta è visibile solo il riquadro dell'elenco che si espande in uno stato espanso, l'elenco e il riquadro dei dettagli segnaposto vengono visualizzati insieme
La funzionalità Dettagli elenco è ideale per le app di messaggistica, i gestori di contatti, i browser di file o qualsiasi app in cui i contenuti possono essere organizzati come elenco di elementi in cui vengono mostrate informazioni aggiuntive.
Implementazione
È possibile creare un layout con i dettagli dell'elenco con una varietà di tecnologie, tra cui Compose, visualizzazioni e incorporamento delle attività (per le app precedenti). Consulta la sezione Applicabilità di seguito per scegliere la tecnologia più adatta alla tua app.
Scrivi
Il paradigma dichiarativo di Compose supporta la logica della classe delle dimensioni della finestra, che determina se mostrare contemporaneamente l'elenco e i riquadri dei dettagli (quando la classe delle dimensioni della finestra di larghezza è espansa) o solo l'elenco o il riquadro dei dettagli (quando la classe di dimensioni della finestra di larghezza è media o compatta).
Per garantire un flusso di dati unidirezionale, solleva tutto lo stato, inclusi la classe delle dimensioni della finestra corrente e i dettagli dell'elemento attualmente selezionato (se presente), in modo che tutti gli elementi componibili abbiano accesso ai dati e possano essere visualizzati correttamente.
Quando mostri solo il riquadro dei dettagli nelle finestre di piccole dimensioni, aggiungi un elemento BackHandler per rimuovere il riquadro dei dettagli e visualizzare solo il riquadro dell'elenco. BackHandler non fa parte della navigazione complessiva dell'app poiché il gestore dipende dalla classe delle dimensioni della finestra e dallo stato dei dettagli selezionato.
Per un esempio di implementazione, consulta l'esempio Dettagli elenco con Compose.
Visualizzazioni e frammenti
La libreria SlidingPaneLayout è progettata per una facile implementazione di layout dei dettagli di elenchi basati su viste o frammenti.
Innanzitutto, dichiara SlidingPaneLayout come elemento principale del layout XML. Successivamente, aggiungi i due elementi secondari, viste o frammenti, che rappresentano l'elenco e descrivono i contenuti in dettaglio.
Implementare una metodologia di comunicazione per trasferire i dati tra le viste o i frammenti dei dettagli dell'elenco. L'app ViewModel è consigliata per la sua capacità di archiviare la logica di business e di sopravvivere alle modifiche alla configurazione.
SlidingPaneLayout determina automaticamente se visualizzare l'elenco e i dettagli insieme o individualmente. In una finestra con spazio orizzontale sufficiente per ospitare entrambi, l'elenco e i dettagli vengono visualizzati affiancati. In una finestra che non dispone di spazio sufficiente, viene visualizzato l'elenco o il dettaglio a seconda dell'interazione dell'utente con l'app.
Per un esempio di implementazione, consulta l'esempio Dettaglio elenco con viste.
Incorporamento delle attività
Utilizza l'incorporamento delle attività per consentire alle app legacy con più attività di visualizzare due attività affiancate sullo stesso schermo o una sopra l'altra. Se l'app implementa l'elenco e i dettagli di un layout dei dettagli dell'elenco in attività separate, l'incorporamento delle attività consente di creare facilmente un layout dei dettagli dell'elenco con un refactoring minimo o nullo del codice.
Implementa l'incorporamento delle attività specificando una suddivisione della finestra delle attività mediante un file di configurazione XML. La suddivisione definisce l'attività principale, che avvia la suddivisione, e un'attività secondaria. Specifica la larghezza di visualizzazione minima per la suddivisione utilizzando i punti di interruzione di classe per le dimensioni della finestra. Quando la larghezza di visualizzazione è inferiore al punto di interruzione minimo, le attività vengono visualizzate una sopra l'altra. Ad esempio, se la larghezza minima della visualizzazione è 600 dp, sui display compatti le attività vengono visualizzate una sopra l'altra sui display compatti, ma affiancate su quelle di medie dimensioni ed espanse.
L'incorporamento delle attività è supportato su Android 12L (livello API 32) e versioni successive, ma potrebbe essere disponibile anche su livelli API inferiori se implementato dai produttori dei dispositivi. Quando l'incorporamento delle attività non è disponibile su un dispositivo, il comportamento di fallback comporta l'attività dell'elenco o l'attività dei dettagli che occupa l'intera finestra dell'app in base all'interazione dell'utente con l'app.
Per ulteriori informazioni, consulta la sezione Incorporamento delle attività.
Per un esempio di implementazione, consulta l'esempio Dettagli elenco con incorporamento delle attività.
Feed
Un layout del feed organizza elementi di contenuti equivalenti in una griglia configurabile per una visualizzazione rapida e comoda di una grande quantità di contenuti.
Le dimensioni e la posizione stabiliscono relazioni tra gli elementi dei contenuti.
I gruppi di contenuti vengono creati creando elementi delle stesse dimensioni e posizionandoli insieme. Gli elementi vengono attirati dall'attenzione, rendendoli più grandi degli elementi vicini.
Le schede e gli elenchi sono componenti comuni dei layout dei feed.
Un layout del feed supporta le visualizzazioni di quasi tutte le dimensioni, in quanto la griglia può adattarsi da una singola colonna a scorrimento a un feed di contenuti a scorrimento a più colonne.
I feed sono particolarmente adatti alle app di notizie e di social media.
Implementazione
Scrivi
Un feed è costituito da un gran numero di elementi di contenuti in un contenitore a scorrimento verticale disposti in una griglia. Gli elenchi lenti mostrano in modo efficiente un numero elevato di elementi in colonne o righe. Le griglie lazy eseguono il rendering degli elementi in griglie, supportando la configurazione di dimensioni e sezioni degli elementi.
Configura le colonne del layout a griglia in base all'area di visualizzazione disponibile per impostare la larghezza minima consentita per gli elementi della griglia. Quando definisci gli elementi della griglia, regola le sezioni delle colonne per mettere in risalto alcuni elementi rispetto ad altri.
Per le intestazioni di sezione, i divisori o altri elementi progettati per occupare l'intera larghezza del feed, utilizza maxLineSpan in modo da occupare l'intera larghezza del layout.
Sui display di larghezza compatta che non hanno abbastanza spazio per mostrare più di una colonna, LazyVerticalGrid si comporta come un LazyColumn.
Per un esempio di implementazione, vedi l'esempio relativo al feed con Compose.
Visualizzazioni e frammenti
Una RecyclerView esegue in modo efficiente un numero elevato di elementi in una singola colonna. Una GridLayoutManager dispone gli elementi in una griglia, consentendo di configurare le dimensioni e le sezioni degli elementi.
Configura le colonne della griglia in base alle dimensioni dell'area di visualizzazione disponibile per impostare la larghezza minima consentita per gli elementi.
La strategia di distribuzione predefinita GridLayoutManager, che è un intervallo per elemento, può essere sostituita creando una SpanSizeLookup personalizzata. Regola l'intervallo per mettere in risalto alcuni elementi rispetto ad altri.
Sui display a larghezza compatta che hanno spazio sufficiente per una sola colonna, utilizza LinearLayoutManager anziché GridLayoutManager.
Per un esempio di implementazione, consulta l'esempio Feed con visualizzazioni.
Riquadro di supporto
Il layout dei riquadri di supporto organizza i contenuti delle app in aree di visualizzazione principali e secondarie.
L'area di visualizzazione principale occupa la maggior parte della finestra dell'app (in genere circa due terzi) e include i contenuti principali. L'area di visualizzazione secondaria è un riquadro che occupa la parte rimanente della finestra dell'app e presenta contenuti a supporto dei contenuti principali.
I layout dei riquadri di supporto funzionano bene su display a larghezza espansa (vedi classi di dimensioni delle finestre) con orientamento orizzontale. I display di larghezza media o compatta supportano la visualizzazione sia dell'area display principale che di quella secondaria se i contenuti sono adattabili a spazi di visualizzazione più ristretti o se i contenuti aggiuntivi possono essere inizialmente nascosti in un riquadro inferiore o laterale accessibile tramite un controllo come un menu o un pulsante.
Un layout del riquadro di supporto differisce da un layout dei dettagli dell'elenco nella relazione tra i contenuti principali e secondari. I contenuti del riquadro secondario sono significativi solo in relazione ai contenuti principali; ad esempio, la finestra dello strumento del riquadro di supporto è di per sé irrilevante. I contenuti supplementari nel riquadro dei dettagli di un layout con dettagli elenco, tuttavia, sono significativi anche senza i contenuti principali, ad esempio la descrizione di un prodotto di una scheda di prodotto.
I casi d'uso per il riquadro di supporto includono:
- App per la produttività:un documento o un foglio di lavoro con i commenti dei revisori in un riquadro di supporto.
- App multimediali: un video in streaming completato da un elenco di video correlati in un riquadro di supporto o la rappresentazione di un album musicale integrato con una playlist
- App di ricerca e riferimento:un modulo di inserimento di query con i risultati in un riquadro di supporto.
Implementazione
Scrivi
Scrivi supporta la logica delle classi di dimensioni delle finestre, che ti consente di stabilire se mostrare contemporaneamente sia i contenuti principali sia i contenuti di supporto oppure di posizionare i contenuti di supporto in una posizione alternativa.
Solleva tutto lo stato, inclusa la classe delle dimensioni della finestra corrente e le informazioni relative ai dati nei contenuti principali e nei contenuti di supporto.
Per i display di larghezza compatta, posiziona i contenuti di supporto sotto i contenuti principali o all'interno di un riquadro inferiore. Per le larghezze medie e estese, posiziona i contenuti di supporto accanto ai contenuti principali, con le dimensioni appropriate in base ai contenuti e allo spazio disponibili. Per una larghezza media, dividi equamente lo spazio di visualizzazione tra i contenuti principali e quelli di supporto. Per una larghezza espansa, assegna il 70% dello spazio ai contenuti principali e il 30% ai contenuti di supporto.
Per un esempio di implementazione, consulta l'esempio relativo al riquadro di supporto con Compose.
Visualizzazioni e frammenti
Un layout riquadro di supporto viene implementato utilizzando un layout di supporto come LinearLayout o ConstraintLayout. Stabilisci le classi di dimensioni delle finestre che dividono la quantità di spazio di visualizzazione orizzontale disponibile per la tua app in tre categorie: compatta (< 600 dp), media (>= 600 dp) ed espansa (>= 840 dp).
Per ogni classe di dimensioni delle finestre, definisci i layout come segue:
- Compatta: nella cartella delle risorse dell'app
layout, posiziona i contenuti che visualizzano il riquadro di supporto sotto i contenuti principali o all'interno di un riquadro inferiore - Medium: nella cartella
layout-w600dp, fornisci contenuti di supporto che consentano di visualizzare i contenuti principali e il rendering dei riquadri affiancati, suddividendo lo spazio di visualizzazione orizzontale in modo uguale - Espanso: nella cartella
layout-w840dp, includi i contenuti del riquadro di supporto che mostrano i contenuti principali e il rendering dei riquadri affiancati; tuttavia, il riquadro di supporto occupa solo il 30% dello spazio orizzontale e lascia il restante 70% per i contenuti principali.
Utilizza una ViewModel per la comunicazione tra i contenuti principali e il riquadro di supporto, utilizzando viste, frammenti o una combinazione di questi.
Per esempi di implementazione, consulta i seguenti esempi:
Applicabilità
I layout canonici creano presentazioni sfaccettate dei contenuti per un facile accesso e un'esplorazione approfondita. Utilizza il seguente diagramma di flusso per determinare il layout e la strategia di implementazione più adatti ai casi d'uso della tua app.
Per esempi di layout canonici implementati in diversi tipi di app, consulta la galleria per schermi grandi.
Risorse aggiuntive
- Dettagli elenco
- Riquadro di supporto
- Feed
- Material Design - Layout canonici
- Eseguire la migrazione della UI ai layout adattabili
- Navigazione per le UI adattabili