Kanonische Layouts

Verwenden Sie kanonische Layouts als Ausgangspunkt. Das sind einsatzbereite Kompositionen, mit denen sich Layouts an gängige Anwendungsfälle und Bildschirmgrößen anpassen lassen. Diese Layouts sind ästhetisch und funktional und basieren auf den Material 3-Richtlinien.

Abbildung 21:Kanonische Layouts

Das Android-Framework enthält spezielle Komponenten, mit denen sich die Layouts mit den APIs von Jetpack Compose oder Views einfach und zuverlässig implementieren lassen.

Listen-Detailansicht

Mit einem Layout mit Liste und Detail können Nutzer Listen mit Elementen durchsuchen, die beschreibende, erklärende oder andere zusätzliche Informationen enthalten – die Elementdetails. Bei kompakten Bildschirmgrößen ist nur die Listen- oder Detailansicht sichtbar. Listen sind die häufigste Form von Layouts für Apps, da sie eine Sammlung von Inhalten in einem zeilenbasierten Layout darstellen. Die Listenansicht mit Detailansicht eignet sich ideal für Messaging-Apps, Kontaktmanager, Dateibrowser oder jede App, in der Inhalte als Liste von Elementen organisiert werden können, die zusätzliche Informationen enthalten.

Inhalte können statisch oder dynamisch sein.

  • Dynamische Inhalte werden von Ihrer App spontan bereitgestellt und eignen sich ideal für von Nutzern erstellte Inhalte oder um die Präferenzen oder Aktionen des Nutzers widerzuspiegeln. Stellen Sie sich beispielsweise eine Foto-App mit einer scrollbaren Liste von nutzergenerierten Fotos vor, die für jeden Nutzer einzigartig ist und sich ändert, wenn der Nutzer weitere Bilder hochlädt. Diese Bilder sind dynamische Inhalte.
  • Statische Inhalte sind fest codierte Inhalte, die nur durch direkte Änderungen am Code Ihrer App geändert werden können. Beispiele für statische Inhalte sind Bilder und Text, die jeder Nutzer sehen kann.

Die Now in Android-Figma-Datei enthält mehrere Layoutbeispiele. Das folgende Beispiel zeigt eine eindimensionale Sammlung von Inhalten.

Abbildung 22:Eindimensionale Sammlung von Inhalten

Weitere Designrichtlinien für Listenkomponenten und ‑spezifikationen

Feed-Layout

Bei einem Feed-Layout werden gleichwertige Inhaltselemente in einem konfigurierbaren Raster angeordnet, damit sich eine große Menge an Inhalten schnell und bequem ansehen lässt. Weitere Informationen zu den Material 3-Richtlinien für die Verwendung von Karten in einer Sammlung Feeds können als Liste oder Raster auf kompakten Displays konfiguriert werden, in der Regel in Form von Karten oder Kacheln. Inhalte können dynamisch sein, d. h., sie werden aus einer dynamischen externen Quelle wie einer API abgerufen.

Ein Rasterlayout besteht aus Zeilen und Spalten, die durch implizite oder explizite Einschlussprinzipien gebildet werden. Ein Rasterlayout kann starr angewendet oder versetzt werden, um die Zeilen und Spalten zu variieren. Beide sollten einheitlich formatiert sein, um Nutzer nicht zu verwirren. Richtlinien für Material 3 zum Designen von Feeds

Sie können ein Feedlayout in Compose mit Lazy Lists oder Lazy Grids oder in Views mit RecyclerView oder CardView implementieren.

Beispiele für gängige Feedformate sind eine Fotogalerie und Podcasts in einem Rasterlayout.

Layout des Supportbereichs

Für eine mobile Ansicht sind möglicherweise unterstützende Inhalte oder Steuerelemente erforderlich. Sie werden in der Regel in Form von Tabellen oder Dialogfeldern dargestellt und können dazu beitragen, dass die primäre Ansicht übersichtlich bleibt. Weitere Informationen

Abbildung 24:Bottom Sheets können als unterstützende Inhalte für die primäre Ansicht dienen.

Weitere Informationen zu M3-Richtlinien für Bottom Sheets