I layout canonici sono layout comprovati e versatili che offrono un'esperienza utente ottimale su una serie di fattori di forma.
I layout canonici supportano smartphone con schermi piccoli, nonché tablet, dispositivi pieghevoli e ChromeOS. Derivati dalle linee guida di Material Design, i layout sono estetici e funzionali.
Il framework Android include componenti specializzati che semplificano e rendono affidabile l'implementazione dei layout.
I layout canonici creano UI coinvolgenti e che migliorano la produttività, che costituiscono la base di app di alta qualità.
List-detail
Il layout elenco dei dettagli consente agli utenti di esplorare elenchi di elementi che contengono informazioni descrittive, esplicative o altre informazioni supplementari, ovvero 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 estesa (consulta Utilizzare le classi di dimensioni delle finestre) consentono di inserire contemporaneamente sia l'elenco che i dettagli. La selezione di un elemento dell'elenco aggiorna il riquadro dei dettagli per mostrare i contenuti correlati all'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, la selezione di un elemento dell'elenco mostra il dettaglio al posto dell'elenco. Quando è visibile solo il dettaglio, premendo il pulsante Indietro viene visualizzato di nuovo l'elenco.
Le modifiche alla configurazione, ad esempio le modifiche all'orientamento del dispositivo o alle dimensioni della finestra dell'app, possono modificare la classe delle dimensioni della finestra del display. Un layout elenco-dettagli risponde di conseguenza, preservando lo stato dell'app:
- Se una visualizzazione con larghezza espansa che mostra sia i riquadri dell'elenco sia quelli dei dettagli si restringe a media o compatta, il riquadro dei dettagli rimane visibile e il riquadro dell'elenco viene nascosto
- Se in una visualizzazione di larghezza media o compatta è visibile solo il riquadro dei dettagli e la classe della dimensione della finestra si espande, l'elenco e i dettagli vengono visualizzati insieme e l'elenco indica che l'elemento corrispondente ai contenuti nel riquadro dei dettagli è selezionato
- Se in una visualizzazione di larghezza media o compatta è visibile solo il riquadro dell'elenco e viene ampliata per essere espansa, vengono visualizzati insieme l'elenco e un riquadro dei dettagli del segnaposto
La visualizzazione elenco è ideale per app di messaggistica, gestori dei contatti, browser di file o qualsiasi app in cui i contenuti possono essere organizzati come elenco di elementi che forniscono informazioni aggiuntive.
Implementazione
Il paradigma dichiarativo di Compose supporta la logica della classe della dimensione della finestra che determina se mostrare contemporaneamente i riquadri di elenco e dettaglio (quando la classe della dimensione della finestra è espansa) o solo il riquadro di elenco o dettaglio (quando la classe della dimensione della finestra è media o compatta).
Per garantire il flusso unidirezionale dei dati, eleva tutto lo stato, inclusa la classe di dimensione della finestra corrente e i dettagli dell'elemento dell'elenco selezionato (se presente), in modo che tutti i composabili abbiano accesso ai dati e possano essere visualizzati correttamente.
Quando mostri solo il riquadro dei dettagli con dimensioni ridotte della finestra, aggiungi un 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 della dimensione della finestra e dallo stato dei dettagli selezionati.
Per un'implementazione di esempio, consulta l'esempio List-detail with Compose.
Feed
Un layout del feed organizza gli elementi di contenuti equivalenti in una griglia configurabile per visualizzare in modo rapido e pratico una grande quantità di contenuti.
Dimensioni e posizione stabiliscono le relazioni tra gli elementi dei contenuti.
I gruppi di contenuti vengono creati impostando gli elementi sulle stesse dimensioni e posizionandoli insieme. L'attenzione viene attirata sugli elementi rendendoli più grandi di quelli vicini.
Le schede e gli elenchi sono componenti comuni dei layout dei feed.
Un layout del feed supporta visualizzazioni di quasi tutte le dimensioni perché la griglia può adattarsi da una singola colonna scorrevole a un feed scorrevole con più colonne di contenuti.
I feed sono particolarmente adatti per le app di notizie e di social media.
Implementazione
Feed 包含大量内容元素，这些内容元素位于一个纵向滚动容器中，而该容器采用网格布局。延迟列表可高效地在列或行中呈现大量的项。延迟网格以网格形式呈现项，支持配置项的大小和 span。
根据可用的显示区域配置网格布局的列，以设置网格项允许的最小宽度。定义网格项时，只需调整列 span 即可让某些项比其他项更为醒目。
对于部分标题、分隔线或要占据 Feed 的整个宽度的其他项，请使用 maxLineSpan 占据布局的整个宽度。
如果较小宽度的显示屏没有足够的空间来显示一个以上的列，LazyVerticalGrid 就会像 LazyColumn 一样运行。
如需查看示例实现，请参阅使用 Compose 构建 Feed 示例。
Riquadro di supporto
Il layout del riquadro di supporto organizza i contenuti dell'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 contiene i contenuti principali. L'area di visualizzazione secondaria è un riquadro che occupa il resto della finestra dell'app e presenta contenuti che supportano i contenuti principali.
I layout dei riquadri di supporto funzionano bene sui display con larghezza espansa (vedi Utilizzare le classi di dimensione della finestra) in orientamento orizzontale. I display di larghezza media o compatta supportano la visualizzazione sia dell'area di visualizzazione principale che di quella secondaria se i contenuti sono adattabili a spazi di visualizzazione più stretti o se i contenuti aggiuntivi possono essere inizialmente nascosti in un riquadro in basso o laterale accessibile tramite un controllo come un menu o un pulsante.
Il layout del riquadro di supporto è diverso da quello dell'elenco dettagliato per quanto riguarda la relazione tra i contenuti principali e secondari. I contenuti del riquadro secondario sono significativi solo in relazione ai contenuti principali; ad esempio, una finestra dello strumento del riquadro di supporto è irrilevante da sola. I contenuti supplementari nel riquadro dei dettagli di un layout elenco dettagli, 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 accompagnato da commenti del revisore in un riquadro di supporto
- App multimediali: un video in streaming integrato da un elenco di video correlati in un riquadro di supporto o la rappresentazione di un album musicale integrato da una playlist
- App di ricerca e di riferimento:un modulo di inserimento di query con i risultati in un riquadro di supporto
Implementazione
Compose supporta la logica della classe delle dimensioni della finestra, che ti consente di determinare se mostrare contemporaneamente sia i contenuti principali che quelli di supporto o se posizionare i contenuti di supporto in una posizione alternativa.
Solleva tutto lo stato, inclusa la classe della dimensione della finestra corrente e le informazioni relative ai dati nei contenuti principali e di supporto.
Per display di larghezza compatta, posiziona i contenuti di supporto sotto quelli principali o all'interno di un riquadro inferiore. Per le larghezze medie e espanse, posiziona i contenuti di supporto accanto a quelli principali, regolandone le dimensioni in base ai contenuti e allo spazio disponibile. Per una larghezza media, suddividi lo spazio di visualizzazione in modo uniforme tra i contenuti principali e 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 Riquadro di supporto con Compose.
Risorse aggiuntive
- Material Design - Layout canonici