Listen sind Container für Elemente mit integriertem Scrollen und Fokus.
Grundsätze
Übersichtliche Organisation: Listen sollten Informationen in einer klaren, vertikalen Anordnung präsentieren, die sich leicht überfliegen lässt.
Konsistente Darstellung von Elementen: Listenelemente sollten einer einheitlichen visuellen Struktur folgen.
Fokussierbarkeit und Navigation: In Benutzeroberflächen, die auf der Richtungstasten-Navigation basieren, muss das fokussierte Element in Listen deutlich hervorgehoben werden.
Interaktivität: Listenelemente stellen oft 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.
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 Listengrenzen 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 den Listeneintrag beschränken
Anatomie
Die Liste besteht aus einem scrollbaren Container und Listenelementen mit einheitlichen Abständen. Listen sollten vertikal scrollen, wenn die Anzahl der Elemente den Darstellungsbereich überschreitet.
A. Container – scrollbarer Bereich
B. Listenelement
C. Systemleisten
List
Item: Jedes einzelne Element in der Liste.
A. Form
B. Rahmen
C. Vorangestelltes Symbol
D. Textinhalt
E. Nachlaufender Indikator
Personalisierung
Die meisten Anpassungen werden mit Listenelementen vorgenommen.
| Properties | Personalisierung | Standardeinstellungen |
|---|---|---|
| Listenelement: Form | Ja | 40 dp |
| Listenelement: Vorangestelltes und nachgestelltes Symbol | Ja | Symbol für mittleren Schweregrad |
| Listenelement: Werte auffüllen | 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 |