Kanonische Layouts

Kanonische Layouts sind bewährte, vielseitige Layouts, die bei einer Vielzahl von Formfaktoren eine optimale User Experience bieten.

Abbildung von Geräten mit großen Bildschirmen, auf denen die kanonischen Layouts zu sehen sind.

Die kanonischen Layouts unterstützen Smartphones mit kleinem Bildschirm sowie Tablets, faltbare Smartphones und ChromeOS-Geräte. Die Layouts basieren auf den Material Design-Richtlinien und sind sowohl ästhetisch als auch funktional.

Das Android-Framework enthält spezielle Komponenten, die die Implementierung der Layouts einfach und zuverlässig machen.

Die kanonischen Layouts schaffen ansprechende, produktivitätssteigernde Benutzeroberflächen, die die Grundlage für gute Apps bilden.

Wenn Sie bereits mit den kanonischen adaptiven App-Layouts vertraut sind, aber noch nicht welche Android-APIs Sie verwenden sollen, erfahren Sie hier .

Listendetail

Wireframe des Layouts für Listendetails.

Im Listendetaillayout können Nutzer Listen mit Artikeln mit beschreibenden, erläuternden oder anderen ergänzenden Informationen aufrufen – den Artikeldetails.

Das Layout unterteilt das App-Fenster in zwei nebeneinander liegende Bereiche: einen für die Liste und einen für die Details. Nutzer wählen Artikel aus der Liste aus, um die Artikeldetails aufzurufen. Deeplinks in den Details öffnen zusätzliche Inhalte im Detailbereich.

Auf Bildschirmen mit erweiterter Breite (siehe Fenstergrößenklassen verwenden) können sowohl die Liste als auch die Details gleichzeitig angezeigt werden. Wenn Sie ein Listenelement auswählen, werden im Detailbereich die zugehörigen Inhalte für das ausgewählte Element angezeigt.

Auf Displays mit mittlerer und kompakter Breite wird je nach Nutzerinteraktion mit der App entweder die Liste oder die Detailansicht angezeigt. Wenn nur die Liste sichtbar ist, wird durch Auswahl eines Listenelements die Detailansicht anstelle der Liste angezeigt. Wenn nur die Details sichtbar sind, wird durch Drücken der Zurück-Schaltfläche die Liste wieder angezeigt.

Konfigurationsänderungen, z. B. Änderungen der Geräteausrichtung oder der Größe des App-Fensters, können die Fenstergrößenklasse des Displays ändern. Ein Listen-Detail-Layout reagiert entsprechend und behält den App-Status bei:

  • Wenn ein Display mit maximierter Breite, auf dem sowohl der Listen- als auch der Detailbereich angezeigt werden, auf „mittel“ oder „kompakt“ verkleinert wird, bleibt der Detailbereich sichtbar und der Listenbereich wird ausgeblendet.
  • Wenn bei einer Anzeige mittlerer oder kompakter Breite nur der Detailbereich sichtbar ist und die Fenstergrößenklasse erweitert wird, werden die Liste und die Details zusammen angezeigt. Die Liste zeigt an, dass das Element ausgewählt ist, das dem Inhalt im Detailbereich entspricht.
  • Wenn bei einer Anzeige mittlerer oder kompakter Breite nur der Listenbereich sichtbar ist und dieser maximiert wird, werden die Liste und ein Platzhalter-Detailbereich zusammen angezeigt.

Listendetails eignen sich ideal für Messaging-Apps, Kontaktmanager, Dateibrowser oder jede andere App, in der Inhalte als Liste von Elementen organisiert werden können, die zusätzliche Informationen enthalten.

Abbildung 1: Messaging-App mit einer Liste der Unterhaltungen und den Details einer ausgewählten Unterhaltung

Implementierung

Ein Listendetaillayout kann mit einer Vielzahl von Technologien erstellt werden, darunter Compose, Ansichten und das Einbetten von Aktivitäten (für ältere Apps). Im Abschnitt Einschlägigkeit finden Sie Informationen dazu, welche Technologie für Ihre App am besten geeignet ist.

Die Bibliothek SlidingPaneLayout dient zur Implementierung von Layouts mit Listendetails, die auf Ansichten oder Fragmenten basieren.

Deklariere zuerst ein SlidingPaneLayout als Stammelement deines XML-Layouts. Fügen Sie als Nächstes die beiden untergeordneten Elemente hinzu, entweder Ansichten oder Fragmente, die die Listen- und Detailinhalte darstellen.

Implementieren Sie eine Kommunikationsmethode, um Daten zwischen den Listendetailansichten oder -fragmenten zu übergeben. ViewModel wird empfohlen, da damit Geschäftslogik gespeichert und Konfigurationsänderungen überstanden werden können.

SlidingPaneLayout bestimmt automatisch, ob die Liste und die Details zusammen oder einzeln angezeigt werden. In einem Fenster mit ausreichend horizontalem Platz werden Liste und Details nebeneinander angezeigt. In einem Fenster, das nicht genügend Platz bietet, wird je nach Interaktion des Nutzers mit der App entweder die Liste oder die Details angezeigt.

Eine Beispielimplementierung finden Sie im Beispiel Listendetail mit Schiebefeld.

Eingebettete Aktivitäten

Mit der Aktivitätseinbettung können Sie zulassen, dass Legacy-Anwendungen mit mehreren Aktivitäten zwei Aktivitäten nebeneinander auf demselben Bildschirm oder gestapelt (eine überlagern) anzeigen. Wenn in Ihrer App die Liste und die Details eines Listen-Detaillayouts in separaten Aktivitäten implementiert sind, können Sie mithilfe der Aktivitäts-Embedding-Funktion ein Listen-Detaillayout mit minimaler oder keiner Code-Refaktorisierung erstellen.

Implementieren Sie das Einbetten von Aktivitäten, indem Sie eine Aufteilung des Aufgabenfensters mithilfe einer XML-Konfigurationsdatei angeben. Die Aufteilung definiert die primäre Aktivität, die die Aufteilung initiiert, und eine sekundäre Aktivität. Geben Sie mithilfe der Unterbrechungen der Fenstergrößenklasse eine Mindestanzeigebreite für die Aufteilung an. Wenn die Displaybreite unter dem Mindestwert liegt, werden die Aktivitäten übereinander angezeigt. Wenn die Mindestanzeigebreite beispielsweise 600 dp beträgt, werden die Aktivitäten auf kompakten Displays überlagernd dargestellt, auf mittelgroßen und erweiterten Bildschirmen jedoch nebeneinander.

Das Einbetten von Aktivitäten wird unter Android 12L (API-Level 32) und höher unterstützt. Es kann aber auch auf niedrigeren API-Levels verfügbar sein, wenn es von Geräteherstellern implementiert wird. Wenn die Aktivitäts-Embedding-Funktion auf einem Gerät nicht verfügbar ist, führt das zu einem Fallback-Verhalten, bei dem die Listen- oder Detailaktivität je nach Nutzerinteraktion mit der App das gesamte App-Fenster einnimmt.

Weitere Informationen finden Sie unter Aktivitäten einbetten.

Eine Beispielimplementierung findest du im Beispiel Listendetails mit eingebetteten Aktivitäten.

Feed

Wireframe des Feedlayouts.

Bei einem Feedlayout werden gleichartige Inhaltselemente in einem konfigurierbaren Raster angeordnet, damit eine große Menge an Inhalten schnell und bequem angezeigt werden kann.

Größe und Position schaffen Beziehungen zwischen den Inhaltselementen.

Contentgruppen werden erstellt, indem Elemente dieselbe Größe haben und zusammen angeordnet werden. Die Aufmerksamkeit wird auf Elemente gelenkt, indem sie größer als die nahe gelegenen Elemente sind.

Karten und Listen sind gängige Komponenten von Feedlayouts.

Ein Feedlayout unterstützt Displays in fast jeder Größe, da das Raster von einer einzelnen scrollbaren Spalte zu einem mehrspaltigen scrollbaren Feed mit Inhalten angepasst werden kann.

Feeds eignen sich besonders für Nachrichten- und Social-Media-Apps.

Abbildung 2: Social-Media-App mit Beiträgen in Karten unterschiedlicher Größe

Implementierung

Ein RecyclerView rendert effizient eine große Anzahl von Elementen in einer einzelnen Spalte. Mit GridLayoutManager werden Elemente in einem Raster angeordnet, sodass die Elementgrößen und -spannen konfiguriert werden können.

Konfigurieren Sie die Rasterspalten anhand der Größe des verfügbaren Anzeigebereichs, um die minimal zulässige Breite für Elemente festzulegen.

Die Standard-Spannungsstrategie von GridLayoutManager, also eine Spanne pro Element, kann überschrieben werden, indem eine benutzerdefinierte SpanSizeLookup erstellt wird. Passen Sie die Spannweite an, um bestimmte Elemente stärker hervorzuheben.

Auf Displays mit kompakter Breite, die nur Platz für eine Spalte bieten, verwenden Sie anstelle von GridLayoutManager den Befehl LinearLayoutManager.

Eine Beispielimplementierung findest du im Beispiel Feed mit Aufrufen.

Stützbereich

Wireframe des Layouts des unterstützenden Bereichs.

Mit dem unterstützenden Bereichslayout werden App-Inhalte in primäre und sekundäre Displaybereiche unterteilt.

Der primäre Anzeigebereich nimmt den Großteil des App-Fensters (in der Regel etwa zwei Drittel) ein und enthält den Hauptinhalt. Der sekundäre Anzeigebereich ist ein Bereich, der den Rest des App-Fensters einnimmt und Inhalte zeigt, die den Hauptinhalt unterstützen.

Unterstützte Bereichslayouts funktionieren gut auf Displays mit erweiterter Breite (siehe Fenstergrößenklassen verwenden) im Querformat. Bei Displays mit mittlerer oder kompakter Breite können sowohl der primäre als auch der sekundäre Bereich angezeigt werden, wenn die Inhalte an schmalere Anzeigebereiche angepasst werden können oder wenn die zusätzlichen Inhalte anfänglich in einem unteren oder seitlichen Tabellenblatt ausgeblendet werden können, das über ein Steuerelement wie ein Menü oder eine Schaltfläche aufgerufen werden kann.

Ein unterstützendes Bereichslayout unterscheidet sich in der Beziehung zwischen dem primären und sekundären Inhalt von einem Listendetaillayout. Inhalte im sekundären Bereich sind nur in Bezug auf die primären Inhalte relevant. Ein Toolfenster im sekundären Bereich ist beispielsweise für sich genommen irrelevant. Die ergänzenden Inhalte im Detailbereich eines Listendetaillayouts sind jedoch auch ohne die primären Inhalte sinnvoll, z. B. die Beschreibung eines Produkts aus einem Produkteintrag.

Anwendungsfälle für den Infobereich:

  • Produktivitäts-Apps:Ein Dokument oder eine Tabelle mit Kommentaren von Prüfern in einem zusätzlichen Bereich
  • Medien-Apps:Streaming-Video, das durch eine Liste ähnlicher Videos in einem unterstützenden Bereich ergänzt wird, oder die Darstellung eines Musikalbums, das durch eine Playlist ergänzt wird
  • Such- und Referenzanwendungen:ein Abfrageeingabeformular mit Ergebnissen in einem unterstützenden Bereich
Abbildung 3: Shopping-App mit Produktbeschreibungen in einem unterstützenden Fenster

Implementierung

Ein unterstützendes Steuerfeld-Layout wird mit einem Hilfslayout wie LinearLayout oder ConstraintLayout implementiert. Fenstergrößenklassen festlegen die die für Ihre App verfügbare horizontale Anzeigefläche in drei Kategorien: „Kompakt“ (< 600 dp), „mittel“ (>= 600 dp) und „Erweitert“ (≥ 840 dp).

Definieren Sie die Layouts für jede Fenstergrößenklasse wie folgt:

  • Kompakt:Platzieren Sie im Ordner layout der App-Ressourcen Inhalte, die Rendert den unterstützenden Bereich unter dem Hauptinhalt oder in einem Tabellenblatt am unteren Rand
  • Mittel: Geben Sie im Ordner layout-w600dp unterstützende Inhalte des Bereichs an. sodass der Hauptinhalt und der unterstützende Bereich nebeneinander gerendert werden, gleichmäßige Aufteilung der horizontalen Anzeigefläche
  • Maximiert: Fügen Sie im Ordner layout-w840dp Inhalte für den Infobereich hinzu, sodass sich der Hauptinhalt und der Infobereich nebeneinander darstellen. Der Infobereich nimmt jedoch nur 30 % des horizontalen Bereichs ein, sodass die restlichen 70 % für den Hauptinhalt übrig bleiben.

Verwenden Sie ein ViewModel für die Kommunikation zwischen dem Hauptinhalt und dem unterstützenden Scheiben, ob mit Ansichten, Fragmenten oder einer Kombination.

Implementierungsbeispiele finden Sie in den folgenden Beispielen:

Geltungsbereich

Die kanonischen Layouts ermöglichen eine vielseitige Präsentation von Inhalten für einfachen Zugriff und detaillierte explorative Datenanalysen. Anhand des folgenden Flussdiagramms können Sie ermitteln, welche Layout- und Implementierungsstrategie für die Anwendungsfälle Ihrer App am besten geeignet ist.

Beispiele für die kanonischen Layouts, die in verschiedenen Arten von Apps implementiert sind, finden Sie in der Galerie für große Bildschirme.

Abbildung 4: Entscheidungsbaum für das kanonische Layout auf großen Bildschirmen

Weitere Informationen