Listen sind Container für Elemente mit integriertem Scrollen und Fokus.
Grundsätze
Übersichtliche Organisation: Listen sollten Informationen in einer klaren und leicht erfassbaren vertikalen Anordnung präsentieren.
Einheitliche Darstellung von Elementen: Listenelemente sollten einer einheitlichen visuellen Struktur folgen.
Fokussierbarkeit und Navigation: In Benutzeroberflächen, die auf der Navigation mit Richtungstasten basieren, muss das aktuell fokussierte Element in Listen deutlich angezeigt werden.
Interaktivität: Listenelemente stellen häufig auswählbare oder ausführbare Elemente dar.
Nutzung und Platzierung
Listen können verschiedene gleichgeordnete Inhalte mit wiederholbaren Elementen enthalten. Im Gegensatz zu Stacks füllen Listen den App-Ansichtscontainer aus.
In Listen können ein oder mehrere auswählbare Elemente in einer Ansicht angezeigt werden.
Scrims verwenden, um auf überlaufende Inhalte hinzuweisen
Wenn eine Liste mehr Elemente enthält, als in eine Ansicht passen, wird in der Nähe der Grenzen der Liste ein schwarzer Scrim verwendet.
Listen können bei Bedarf einen Titel haben
Ein statischer oder fixierter Titel kann in einer Liste verwendet werden, um für mehr Klarheit zu sorgen.
Das sollten Sie nicht tun
Tiefe verwenden, um den Fokus anzugeben
Listenelemente werden im nicht fokussierten und fokussierten Zustand zwischen 0 und +4 Ebenen verschoben.
Listenelemente können umsetzbar sein
Elemente in einer Liste können als Aktionen fungieren. Aktion auf das Listenelement beschränken
Anatomie
Die Liste besteht aus einem scrollbaren Container und Listenelementen mit einheitlichem Abstand. Listen sollten vertikal scrollen, mit minimalem Überschuss, wenn die Anzahl der Elemente den Darstellungsbereich überschreitet.
A. Container – scrollbarer Bereich
B. Listenelement
C. Systemleisten
Listenelement: Jedes einzelne Element in der Liste.
A. Form
B. Rahmen
C. Vorangestelltes Symbol
D. Textinhalt
E. Nachlaufender Indikator
Personalisierung
Die meisten Anpassungen erfolgen mit Listenelementen.
| Properties | Personalisierung | Standardeinstellungen |
|---|---|---|
| Listenelement: Form | Ja | 40 dp |
| Listenelement: Vorangestelltes und nachgestelltes Symbol | Ja | Symbol für mittleren Schweregrad |
| Listenelement: Auffüllwerte | Ja | 2d dp, 20 dp |
| Listenelement: Inhalt | Ja | Einzeilig: Ein Text-Composable für das primäre Label mit „Body Small“ Zweizeilig: Eine Spalte mit zwei Text-Composables für ein primäres und ein sekundäres Label Primär: „Title Small“ Sekundär: „Body Small“ |
| Liste: verticalArrangement | Ja | 20 dp |