Layout canonici

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

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

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

Wireframe del layout list-detail.

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

The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).

To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.

When showing just the detail pane on small window sizes, add a BackHandler to remove the detail pane and display just the list pane. The BackHandler is not part of the overall app navigation since the handler is dependent on the window size class and selected detail state.

ListDetailPaneScaffold is a high-level composable that simplifies the implementation of list-detail layouts. It automatically handles pane logic based on window size classes and supports navigation between panes.

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

The following are the key components in this example:

rememberListDetailPaneScaffoldNavigator: Creates a navigator to manage navigation between the list and detail panes.
listPane: Displays the list of items.
detailPane: Displays the content of a selected item.

For detailed implementation examples, see:

Build a list-detail layout developer guide
list-detail-compose sample

Feed

Wireframe del layout del 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

Un feed è costituito da un numero elevato di elementi di contenuti in un contenitore con scorrimento verticale disposti in una griglia. Le liste pigre eseguono il rendering in modo efficiente di un numero elevato di elementi in colonne o righe. Le griglie pigre eseguono il rendering degli elementi nelle griglie, supportando la configurazione delle dimensioni e degli intervalli 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 l'estensione delle colonne per dare risalto ad 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 per occupare l'intera larghezza del layout.

Sui display a larghezza compatta che non hanno spazio sufficiente per mostrare più di una colonna, LazyVerticalGrid si comporta esattamente come un LazyColumn.

Ecco un'implementazione minima che utilizza 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

La chiave per un feed adattivo è la configurazione columns. GridCells.Adaptive(minSize = 180.dp) crea una griglia in cui ogni colonna è larga almeno 180.dp. La griglia mostra quindi il maggior numero di colonne possibile nello spazio disponibile.

Per un esempio di implementazione, consulta l'esempio di feed con Compose.

Riquadro di supporto

Wireframe del layout del 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 supports window size class logic, which lets 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: