Listen sind Container für Elemente mit integriertem Scrollen und Fokus.
Grundsätze
Übersichtliche Organisation: Listen sollten Informationen in einer übersichtlichen, vertikalen Anordnung präsentieren, die sich leicht überfliegen lässt.
Konsistente Darstellung von Elementen: Listenelemente sollten einer einheitlichen visuellen Struktur folgen.
Fokus und Navigation: In Benutzeroberflächen, die auf der Navigation in eine bestimmte Richtung basieren, muss in Listen das fokussierte Element deutlich angegeben werden.
Interaktivität: Listenelemente stellen häufig auswählbare oder ausführbare Elemente dar.
Nutzung und Platzierung
Listen können verschiedene untergeordnete Inhalte mit wiederholbaren Elementen enthalten. Im Gegensatz zu Stacks füllen Listen den App-Ansichtscontainer aus.
Scrims verwenden, um Inhalte anzuzeigen, die nicht in den View passen Wenn eine Liste mehr Elemente enthält, als in einen View passen, wird in der Nähe der Grenzen der Liste ein schwarzer Scrim verwendet.
Listen können bei Bedarf einen Titel verwenden Ein statischer oder fixierter Titel kann in einer Liste zur besseren Übersichtlichkeit verwendet werden.
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 interaktiv sein
Elemente in einer Liste können als Aktionen fungieren. Aktion auf den Listeneintrag beschränken
Heben Sie das Steuerelement hervor, das durch Tippen aktiviert wird, auch wenn Sie etwas anderes scrollen können. Wenn eine Liste oder Karte hinter einem anderen Element gescrollt werden kann, fokussieren Sie nur das Element, das auf Tippen reagiert.
Das sollten Sie tun
Das sollten Sie nicht tun
Anatomie
Die Liste besteht aus einem scrollbaren Container und Listenelementen mit einheitlichem Abstand. Listen sollten vertikal scrollen, wenn die Anzahl der Elemente den Darstellungsbereich überschreitet.
A. Container – scrollbarer Bereich
B. Listeneintrag
C. Systemleisten
List
Item: Jedes einzelne Element in der Liste.
A. Form
B. Rahmen
C. Vorangestelltes Symbol
D. Textinhalt
E. Nachlaufender Indikator
Anpassung
Die meisten Anpassungen erfolgen mit Listenelementen.
| Properties | Anpassung | 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 |