Kanonische Layouts

Canonical layouts are proven, versatile layouts that provide an optimal user experience on a variety of form factors.

The canonical layouts support small screen phones as well as tablets, foldables, and ChromeOS devices. Derived from Material Design guidance, the layouts are aesthetic as well as functional.

The Android framework includes specialized components that make implementation of the layouts straightforward and reliable.

The canonical layouts create engaging, productivity‑enhancing UIs that form the foundation of great apps.

List-detail

The list-detail layout enables users to explore lists of items that have descriptive, explanatory, or other supplementary information—the item detail.

The layout divides the app window into two side-by-side panes: one for the list, one for the detail. Users select items from the list to display the item detail. Deep links in the detail reveal additional content in the detail pane.

Expanded-width displays (see Use window size classes) accommodate both the list and detail at the same time. Selection of a list item updates the detail pane to show the related content for the selected item.

Medium- and compact-width displays show either the list or the detail, depending on user interaction with the app. When just the list is visible, selection of a list item displays the detail in place of the list. When just the detail is visible, pressing the back button redisplays the list.

Configuration changes such as device orientation changes or app window size changes can change the display's window size class. A list‑detail layout responds accordingly, preserving app state:

• If an expanded-width display showing both the list and detail panes narrows to medium or compact, the detail pane remains visible and the list pane is hidden
• If a medium- or compact-width display has just the detail pane visible and the window size class widens to expanded, the list and detail are shown together, and the list indicates that the item corresponding to the content in the detail pane is selected
• If a medium- or compact-width display has just the list pane visible and widens to expanded, the list and a placeholder detail pane are shown together

List-detail is ideal for messaging apps, contact managers, interactive media browsers or any app where the content can be organized as a list of items that reveal additional information.

Implementation

Das deklarative Paradigma von Compose unterstützt die Logik der Fenstergrößenklasse, mit der festgelegt wird, ob die Listen- und Detailbereiche gleichzeitig angezeigt werden (wenn die Breitenfenstergrößenklasse erweitert ist) oder nur der Listen- oder Detailbereich (wenn die Breitenfenstergrößenklasse mittel oder kompakt ist).

Um einen unidirektionalen Datenfluss zu gewährleisten, müssen alle Statusinformationen nach oben verschoben werden, einschließlich der aktuellen Fenstergrößenklasse und der Details des ausgewählten Listenelements (falls vorhanden). So haben alle Composables Zugriff auf die Daten und können korrekt gerendert werden.

Wenn bei kleinen Fenstergrößen nur der Detailbereich angezeigt wird, fügen Sie ein BackHandler hinzu, um den Detailbereich zu entfernen und nur den Listenbereich anzuzeigen. Die BackHandler ist nicht Teil der allgemeinen App-Navigation, da der Handler von der Fenstergrößenklasse und dem ausgewählten Detailstatus abhängt.

ListDetailPaneScaffold ist eine zusammensetzbare Funktion auf hoher Ebene, die die Implementierung von Layouts mit Listen und Details vereinfacht. Die Bereichslogik wird automatisch basierend auf den Fenstergrößenklassen verarbeitet und die Navigation zwischen Bereichen wird unterstützt.

Hier ist eine minimale Implementierung mit 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

Im Folgenden sind die wichtigsten Komponenten in diesem Beispiel aufgeführt:

• rememberListDetailPaneScaffoldNavigator: Erstellt einen Navigator zum Verwalten der Navigation zwischen der Liste und den Detailbereichen.
• listPane: Zeigt die Liste der Elemente an.
• detailPane: Zeigt den Inhalt eines ausgewählten Elements an.

Ausführliche Implementierungsbeispiele finden Sie hier:

• Entwicklerleitfaden zum Erstellen eines Listen-/Detail-Layouts
• list-detail-compose-Beispiel

Feed

A feed layout arranges equivalent content elements in a configurable grid for quick, convenient viewing of a large amount of content.

Size and position establish relationships among the content elements.

Content groups are created by making elements the same size and positioning them together. Attention is drawn to elements by making them larger than nearby elements.

Cards and lists are common components of feed layouts.

A feed layout supports displays of almost any size because the grid can adapt from a single, scrolling column to a multi‑column scrolling feed of content.

Feeds are especially well suited for news and social media apps.

Implementation

Ein Feed besteht aus einer großen Anzahl von Inhaltselementen in einem vertikal scrollenden Container, die in einem Raster angeordnet sind. Mit Lazy Lists lassen sich eine große Anzahl von Elementen in Spalten oder Zeilen effizient rendern. Mit Lazy Grids werden Elemente in Rastern gerendert. Dabei wird die Konfiguration der Elementgrößen und Spannen unterstützt.

Konfigurieren Sie die Spalten des Rasterlayouts basierend auf dem verfügbaren Anzeigebereich, um die zulässige Mindestbreite für Rasterelemente festzulegen. Beim Definieren von Rasterelementen können Sie die Spaltenüberspannung anpassen, um einige Elemente hervorzuheben.

Verwenden Sie für Abschnittsüberschriften, Trennzeichen oder andere Elemente, die die volle Breite des Feeds einnehmen sollen, maxLineSpan, um die volle Breite des Layouts zu nutzen.

Auf Displays mit kompakter Breite, auf denen nicht genügend Platz für mehr als eine Spalte ist, verhält sich LazyVerticalGrid wie ein LazyColumn.

Hier ist eine minimale Implementierung mit 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

Der Schlüssel zu einem adaptiven Feed ist die columns-Konfiguration. Mit GridCells.Adaptive(minSize = 180.dp) wird ein Raster erstellt, in dem jede Spalte mindestens 180.dp breit ist. Im Raster werden dann so viele Spalten angezeigt, wie in den verfügbaren Platz passen.

Eine Beispielimplementierung finden Sie im Feed with Compose-Beispiel.

Supporting pane

Supporting pane layout organizes app content into primary and secondary display areas.

The primary display area occupies the majority of the app window (typically about two thirds) and contains the main content. The secondary display area is a pane that takes up the remainder of the app window and presents content that supports the main content.

Supporting pane layouts work well on expanded-width displays (see Use window size classes) in landscape orientation. Medium- or compact‑width displays support showing both the primary and secondary display areas if the content is adaptable to narrower display spaces, or if the additional content can be initially hidden in a bottom or side sheet accessible by means of a control such as a menu or button.

A supporting pane layout differs from a list‑detail layout in the relationship of the primary and secondary content. Secondary pane content is meaningful only in relation to the primary content; for example, a supporting pane tool window is irrelevant by itself. The supplementary content in the detail pane of a list‑detail layout, however, is meaningful even without the primary content, for example, the description of a product from a product listing.

Use cases for supporting pane include:

• Productivity apps: A document or spreadsheet accompanied by reviewer comments in a supporting pane
• Media apps: A streaming video complemented by a list of related videos in a supporting pane, or the depiction of an album of music supplemented with a playlist
• Tools and settings: A media editing tool with palettes, effects, and other settings in a support pane

Implementation

Compose unterstützt die Logik für Fenstergrößenklassen. So können Sie festlegen, ob sowohl der Hauptinhalt als auch der unterstützende Inhalt gleichzeitig angezeigt werden sollen oder ob der unterstützende Inhalt an einem alternativen Ort platziert werden soll.

Alle Statusinformationen, einschließlich der aktuellen Fenstergrößenklasse und Informationen zu den Daten im Hauptinhalt und im unterstützenden Inhalt, müssen oben auf der Seite platziert werden.

Bei Displays mit kompakter Breite sollte der unterstützende Inhalt unter dem Hauptinhalt oder in einem Blatt am unteren Rand platziert werden. Bei mittleren und erweiterten Breiten wird der unterstützende Inhalt neben dem Hauptinhalt platziert. Die Größe wird entsprechend dem Inhalt und dem verfügbaren Platz angepasst. Bei mittlerer Breite wird der Anzeigebereich gleichmäßig zwischen Haupt- und unterstützenden Inhalten aufgeteilt. Bei erweiterter Breite sollten Sie dem Hauptinhalt 70% des Platzes und dem unterstützenden Inhalt 30% des Platzes zuweisen.

SupportingPaneScaffold ist eine allgemeine zusammensetzbare Funktion, die die Implementierung von unterstützten Bereichslayouts vereinfacht. Das Composable übernimmt automatisch die Bereichslogik basierend auf den Fenstergrößenklassen. Auf großen Bildschirmen werden die Bereiche nebeneinander angezeigt, auf kleinen Bildschirmen wird der unterstützende Bereich ausgeblendet. SupportingPaneScaffold unterstützt auch die Navigation zwischen Bereichen.

Hier ein Beispiel für eine minimale Implementierung:

@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

• rememberSupportingPaneScaffoldNavigator: Zusammensetzbare Funktion, die einen Navigator zum Verwalten der Sichtbarkeit von Bereichen erstellt, z. B. zum Ein- oder Ausblenden des unterstützenden Bereichs auf kompakten Bildschirmen.
• mainPane: Composable, das den primären Inhalt anzeigt
• supportingPane: Composable, in der der zusätzliche Inhalt angezeigt wird

Ausführliche Implementierungsbeispiele finden Sie hier:

• Entwicklerleitfaden zum Erstellen eines Layouts für den unterstützenden Bereich
• supporting-pane-compose-Beispiel

Additional resources

• Material Design — Canonical layouts