Layout canonici

I layout canonici sono layout collaudati e versatili che offrono un'esperienza utente ottimale su una varietà di fattori di forma.

I layout canonici supportano gli smartphone con schermi piccoli, nonché tablet, dispositivi pieghevoli e dispositivi ChromeOS. Derivati dalle indicazioni di Material Design, i layout sono sia estetici che funzionali.

Il framework Android include componenti specializzati che rendono l'implementazione dei layout semplice e affidabile.

I layout canonici creano UI coinvolgenti e che migliorano la produttività, che costituiscono la base di app di alta qualità.

Elenco-dettagli

Il layout elenco-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 divide 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.

I display con larghezza espansa (vedi Utilizzare le classi di dimensioni delle finestre) possono ospitare contemporaneamente sia l' elenco che i dettagli. La selezione di una voce dell'elenco aggiorna il riquadro dei dettagli per mostrare i contenuti correlati dell'elemento selezionato.

I display con 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 una voce dell'elenco mostra i dettagli al posto dell'elenco. Quando sono visibili solo i dettagli, se premi il pulsante Indietro viene visualizzato di nuovo l'elenco.

Le modifiche alla configurazione, come i cambiamenti di orientamento del dispositivo o delle dimensioni della finestra dell'app, possono modificare la classe di dimensioni della finestra del display. Un layout elenco-dettagli risponde di conseguenza, mantenendo lo stato dell'app:

• Se un display con larghezza espansa che mostra sia l'elenco che i riquadri dei dettagli si restringe a una larghezza media o compatta, il riquadro dei dettagli rimane visibile e il riquadro dell'elenco viene nascosto.
• Se un display con larghezza media o compatta ha visibile solo il riquadro dei dettagli e la classe di dimensioni della finestra si espande, l'elenco e i dettagli vengono mostrati insieme e l'elenco indica che è selezionato l'elemento corrispondente ai contenuti nel riquadro dei dettagli.
• Se un display con larghezza media o compatta ha visibile solo il riquadro dell'elenco e si espande, l'elenco e un riquadro dei dettagli segnaposto vengono mostrati insieme.

list-detail è ideale per le app di messaggistica, i gestori di contatti, i browser di contenuti multimediali interattivi o qualsiasi app in cui i contenuti possono essere organizzati come un elenco di elementi che rivelano informazioni aggiuntive.

Figura 1. App di messaggistica che mostra un elenco di conversazioni e i dettagli di una conversazione selezionata.

Implementazione

Il paradigma dichiarativo di Compose supporta la logica della classe di dimensioni della finestra che determina se mostrare contemporaneamente i riquadri dell'elenco e dei dettagli (quando la classe di dimensioni della finestra di larghezza è espansa) o solo il riquadro dell'elenco o dei dettagli (quando la classe di dimensioni della finestra di larghezza è media o compatta).

Per garantire un flusso di dati unidirezionale, esegui l'hoisting di tutto lo stato, incluse le dimensioni della finestra corrente e i dettagli dell'elemento dell'elenco selezionato (se presente), in modo che tutti i componibili abbiano accesso ai dati e possano eseguire il rendering correttamente.

Quando mostri solo il riquadro dei dettagli con finestre di piccole dimensioni, 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 di dimensioni della finestra e dallo stato dei dettagli selezionato.

ListDetailPaneScaffold è un composable di alto livello che semplifica l'implementazione dei layout list-detail. Gestisce automaticamente la logica dei riquadri in base alle classi di dimensioni della finestra e supporta la navigazione tra i riquadri.

Ecco un'implementazione minima che utilizza ListDetailPaneScaffold:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyListDetailPaneScaffold() {
    val navigator = rememberListDetailPaneScaffoldNavigator()
    ListDetailPaneScaffold(
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        listPane = {
            // Listing Pane
        },
        detailPane = {
            // Details Pane
        }
    )
}
CanonicalLayoutSamples.kt

Di seguito sono riportati i componenti chiave di questo esempio:

• rememberListDetailPaneScaffoldNavigator: crea un navigatore per gestire la navigazione tra i riquadri dell'elenco e dei dettagli.
• listPane: mostra l'elenco degli elementi.
• detailPane: mostra i contenuti di un elemento selezionato.

Per esempi di implementazione dettagliati, consulta:

• Guida per gli sviluppatori Creazione di un layout list-detail
• list-detail-compose sample

Feed

Un layout feed dispone gli 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 le relazioni tra gli elementi di contenuti.

I gruppi di contenuti vengono creati rendendo gli elementi delle stesse dimensioni e posizionandoli insieme. L'attenzione viene attirata sugli elementi rendendoli più grandi degli elementi vicini.

Le schede e gli elenchi sono componenti comuni dei layout feed.

Un layout feed supporta display di quasi tutte le dimensioni perché la griglia può adattarsi da una singola colonna scorrevole a un feed di contenuti scorrevole a più colonne.

I feed sono particolarmente adatti per le app di notizie e social media.

Figura 2. App di social media che mostra i post in schede di dimensioni diverse.

Implementazione

Feed 包含大量内容元素，这些内容元素位于一个纵向滚动容器中，而该容器采用网格布局。延迟列表可高效地在列或行中呈现大量的项。延迟网格以网格形式呈现项，支持配置项的大小和 span。

根据可用的显示区域配置网格布局的列，以设置网格项允许的最小宽度。定义网格项时，只需调整列 span 即可让某些项比其他项更为醒目。

对于部分标题、分隔线或要占据 Feed 的整个宽度的其他项，请使用 maxLineSpan 占据布局的整个宽度。

如果较小宽度的显示屏没有足够的空间来显示一个以上的列，LazyVerticalGrid 就会像 LazyColumn 一样运行。

以下是使用 LazyVerticalGrid 的最小实现：

@Composable
fun MyFeed(names: List<String>) {
    LazyVerticalGrid(
        // GridCells.Adaptive automatically adapts column count based on available width
        columns = GridCells.Adaptive(minSize = 180.dp),
    ) {
        items(names) { name ->
            Text(name)
        }
    }
}
CanonicalLayoutSamples.kt

自适应 Feed 的关键在于 columns 配置。GridCells.Adaptive(minSize = 180.dp) 会创建一个网格，其中每列至少为 180.dp 宽。然后，网格会显示可用空间中可容纳的列数。

如需查看示例实现，请参阅使用 Compose 构建 Feed 示例。

Riquadro di supporto

Il layout del riquadro di supporto organizza i contenuti dell'app in aree di visualizzazione primarie 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 la parte rimanente della finestra dell'app e presenta contenuti che supportano i contenuti principali.

I layout del riquadro di supporto funzionano bene sui display con larghezza espansa (vedi Utilizzare le classi di dimensioni delle finestre) in orientamento orizzontale. I display con larghezza media o compatta supportano la visualizzazione sia delle aree di visualizzazione primarie che secondarie se i contenuti sono adattabili a spazi di visualizzazione più stretti o se i contenuti aggiuntivi possono essere inizialmente nascosti in un foglio inferiore o laterale accessibile tramite un controllo come un menu o un pulsante.

Un layout del riquadro di supporto differisce da un layout elenco-dettagli nella relazione tra i contenuti primari e secondari. I contenuti del riquadro secondario sono significativi solo in relazione ai contenuti primari; ad esempio, una finestra degli strumenti del riquadro di supporto è irrilevante di per sé. I contenuti supplementari nel riquadro dei dettagli di un layout elenco-dettagli, tuttavia, sono significativi anche senza i contenuti primari, ad esempio la descrizione di un prodotto da una scheda di prodotto.

I casi d'uso del riquadro di supporto includono:

• App per la produttività: un documento o un foglio di lavoro accompagnato dai commenti dei revisori in un riquadro di supporto.
• App per contenuti multimediali: un video in streaming e un elenco di video correlati in un riquadro di supporto oppure la rappresentazione di un album musicale integrato da una playlist.
• Strumenti e impostazioni: uno strumento di modifica dei contenuti multimediali con tavolozze, effetti e altre impostazioni in un riquadro di supporto.

Figura 3. App di shopping con descrizioni dei prodotti in un riquadro di supporto.

Implementazione

Compose supporta la logica della classe di dimensioni della finestra, che ti consente di determinare se mostrare contemporaneamente sia i contenuti principali sia quelli di supporto o se posizionare i contenuti di supporto in una posizione alternativa.

Esegui l'hoisting di tutto lo stato, inclusa la classe di dimensioni della finestra corrente e le informazioni relative ai dati nei contenuti principali e 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 ed espanse, posiziona i contenuti di supporto accanto ai contenuti principali, con dimensioni appropriate in base ai contenuti e allo spazio disponibile. Per la larghezza media, dividi lo spazio di visualizzazione in modo uniforme tra i contenuti principali e quelli di supporto. Per la larghezza espansa, assegna il 70% dello spazio ai contenuti principali e il 30% ai contenuti di supporto.

SupportingPaneScaffold è un componibile di alto livello che semplifica l'implementazione dei layout dei riquadri di supporto. Il composable gestisce automaticamente la logica dei riquadri in base alle classi di dimensioni della finestra, visualizzando i riquadri affiancati su schermi di grandi dimensioni o nascondendo il riquadro di supporto su schermi di piccole dimensioni. SupportingPaneScaffold supporta anche la navigazione tra i riquadri.

Di seguito è riportata un'implementazione minima:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MySupportingPaneScaffold() {
    // Creates and remembers a navigator to control pane visibility and navigation
    val navigator = rememberSupportingPaneScaffoldNavigator()
    SupportingPaneScaffold(
        // Directive and value help control pane visibility based on screen size and state
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        mainPane = {
            // Main Pane for the primary content
        },
        supportingPane = {
            //Supporting Pane for supplementary content
        }
    )
}
CanonicalLayoutSamples.kt

Componenti chiave nell'esempio:

• rememberSupportingPaneScaffoldNavigator: composable che crea un navigatore per gestire la visibilità dei riquadri (ad esempio, nascondendo o mostrando il riquadro di supporto su schermi compatti)
• mainPane: Composable che mostra i contenuti principali
• supportingPane: composable che mostra i contenuti supplementari

Per esempi di implementazione dettagliati, consulta:

• Guida per gli sviluppatori Crea un layout con riquadro di supporto
• supporting-pane-compose

Risorse aggiuntive

• Material Design: layout canonici