Layout canonici

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

Rappresentazione di dispositivi con schermo grande che mostrano i layout canonici.

I layout canonici supportano smartphone con schermi di piccole dimensioni, tablet, dispositivi pieghevoli e dispositivi ChromeOS. Derivati dalle indicazioni di Material Design, i layout sono estetici e 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 eccezionali.

list-detail

Wireframe del layout 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, uno per i dettagli. Gli utenti selezionano gli elementi dall'elenco per visualizzarne i dettagli. I link diretti nei dettagli mostrano contenuti aggiuntivi nel riquadro dei dettagli.

I display a larghezza estesa (vedi Utilizzare le classi di dimensioni delle finestre) mostrano 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 i dettagli al posto dell'elenco. Quando è visibile solo il dettaglio, se premi il pulsante Indietro viene visualizzato di nuovo l'elenco.

Le modifiche alla configurazione, come i cambiamenti di orientamento del dispositivo o le modifiche 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 un display a larghezza espansa che mostra sia il riquadro dell'elenco sia quello dei dettagli si restringe a medio o compatto, il riquadro dei dettagli rimane visibile e quello dell'elenco viene nascosto.
Se un display di larghezza media o compatta ha visibile solo il riquadro dei dettagli e la classe di dimensioni della finestra si allarga fino a diventare espansa, l'elenco e i dettagli vengono visualizzati insieme e l'elenco indica che l'elemento corrispondente ai contenuti nel riquadro dei dettagli è selezionato
Se un display di larghezza media o compatta ha visibile solo il riquadro dell'elenco e si allarga fino a essere espanso, vengono visualizzati insieme l'elenco e un riquadro dei dettagli segnaposto

L'interfaccia elenco-dettagli è ideale per app di messaggistica, gestori di contatti, browser 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 elenco e dettagli (quando la classe di dimensioni della finestra in larghezza è espansa) o solo il riquadro elenco o dettagli (quando la classe di dimensioni della finestra in larghezza è media o compatta).

Per garantire il flusso di dati unidirezionale, solleva tutto lo stato, inclusi la classe di dimensioni della finestra corrente e i dettagli dell'elemento di elenco selezionato (se presente), in modo che tutti i composable abbiano accesso ai dati e possano essere visualizzati correttamente.

Quando viene visualizzato solo il riquadro dei dettagli in finestre di piccole dimensioni, aggiungi BackHandler per rimuovere il riquadro dei dettagli e visualizzare solo il riquadro dell'elenco. BackHandler non fa parte della navigazione complessiva dell'app, poiché l'handler dipende dalla classe di dimensioni della finestra e dallo stato dei dettagli selezionato.

ListDetailPaneScaffold è un composable di alto livello che semplifica l'implementazione di layout elenco-dettagli. 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 elenco e dettagli.
listPane: mostra l'elenco degli elementi.
detailPane: mostra i contenuti di un elemento selezionato.

Per esempi di implementazione dettagliati, vedi:

Guida per gli sviluppatori Creare un layout elenco-dettagli
list-detail-compose campione

Feed

Wireframe del layout del feed.

Un layout feed dispone 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 dei 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 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 multicolonna di contenuti.

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

A feed consists of a large number of content elements in a vertical scrolling container laid out in a grid. Lazy lists efficiently render a large number of items in columns or rows. Lazy grids render items in grids, supporting configuration of the item sizes and spans.

Configure the columns of the grid layout based on the available display area to set the minimum allowable width for grid items. When defining grid items, adjust column spans to emphasize some items over others.

For section headers, dividers, or other items designed to occupy the full width of the feed, use maxLineSpan to take up the full width of the layout.

On compact-width displays that don't have enough space to show more than one column, LazyVerticalGrid behaves just like a LazyColumn.

Here is a minimal implementation using 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

The key to an adaptive feed is the columns configuration. GridCells.Adaptive(minSize = 180.dp) creates a grid where each column is at least 180.dp wide. The grid then displays as many columns as can fit in the available space.

For an example implementation, see the Feed with Compose sample.

Pannello di supporto

Wireframe del layout del riquadro di supporto.

Il layout del riquadro di supporto organizza i contenuti dell'app in aree di visualizzazione primaria e secondaria.

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 supportati funzionano bene su display con larghezza espansa (vedi Utilizzare le classi di dimensioni delle finestre) 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 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 per la relazione tra i contenuti primari e secondari. I contenuti del riquadro secondario sono significativi solo in relazione ai contenuti principali; ad esempio, una finestra di supporto degli strumenti del riquadro non è pertinente di per sé. 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 da una scheda di prodotto.

I casi d'uso per il riquadro di supporto includono:

App di produttività:un documento o un foglio di lavoro accompagnato dai commenti del revisore 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
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 supports window size class logic, which enables you to determine whether to show both the main content and the supporting content at the same time or place the supporting content in an alternative location.

Hoist all state, including current window size class and information related to the data in the main content and supporting content.

For compact-width displays, place the supporting content below the main content or inside a bottom sheet. For medium and expanded widths, place the supporting content next to the main content, sized appropriately based on the content and space available. For medium width, split the display space equally between the main and supporting content. For expanded width, give 70% of the space to the main content, 30% to the supporting content.

SupportingPaneScaffold is a high-level composable that simplifies the implementation of supporting pane layouts. The composable automatically handles pane logic based on window size classes, displaying panes side by side on large screens or hiding the supporting pane on small screens. SupportingPaneScaffold also supports navigation between panes.

The following is a minimal implementation:

@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

Key components in the example:

rememberSupportingPaneScaffoldNavigator: Composable that creates a navigator to manage pane visibility (for example, hiding or showing the supporting pane on compact screens)
mainPane: Composable that displays the primary content
supportingPane: Composable that displays the supplementary content

For detailed implementation examples, see: