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
Compose 的声明性范式支持用于作出如下判断的窗口大小类别逻辑：同时显示列表窗格和详情窗格（当宽度窗口大小类别为较大时），还是只显示列表窗格或详情窗格（当宽度窗口大小类别为中等或较小时）。
为确保单向数据流，请提升所有状态，包括当前窗口大小类别和所选列表项的详细信息（如果有），以便所有可组合项都可以访问相应数据并进行正确的呈现。
当小窗口中只显示详情窗格时，添加 BackHandler 即可移除详情窗格并转为只显示列表窗格。BackHandler 不是应用整体导航的一部分，因为处理程序取决于窗口大小类别和所选详情状态。
如需查看示例实现，请参阅使用 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