Listy to kontenery elementów z wbudowanym przewijaniem i fokusowaniem.
Zasady
Jasna organizacja: listy powinny zawierać informacje w jasnym, łatwym do przejrzenia układzie pionowym.
Spójna prezentacja elementów: elementy listy powinny mieć spójną strukturę wizualną.
Możliwość zaznaczenia i nawigacja: w interfejsach opartych na nawigacji kierunkowej listy muszą wyraźnie wskazywać zaznaczony element.
Interaktywność: elementy listy często reprezentują elementy, które można wybrać lub na których można wykonać działanie.
Użycie i umieszczenie
Listy mogą zawierać różne treści pokrewne z powtarzalnymi elementami. W przeciwieństwie do stosów listy wypełniają kontener widoku aplikacji.
Używanie półprzezroczystych nakładek do wskazywania treści, które nie mieszczą się w widoku
Gdy lista zawiera więcej elementów, niż mieści się w widoku, w pobliżu jej granic pojawia się czarna zasłona.
Listy mogą mieć tytuł, jeśli jest to konieczne
Aby zwiększyć przejrzystość, możesz użyć w liście statycznego lub przyklejonego tytułu.
Nie
Używanie głębi do wskazywania ostrości
Elementy listy przesuwają się między głębokością 0 a +4 w przypadku stanu bez fokusu i z fokusem.
Elementy listy mogą być interaktywne
Elementy na liście mogą pełnić funkcję działań. Ogranicz działanie do elementu listy
Anatomia
Lista składa się z kontenera z możliwością przewijania i elementów listy rozmieszczonych w równych odstępach. Listy powinny przewijać się w pionie z minimalnym przekroczeniem, gdy liczba elementów przekracza obszar widoczny.
A. Kontener – przewijany obszar
B. Pozycja na liście
C. Kraty ochronne
List
Item: każdy element na liście.
A. Kształt
B. Obramowanie
C. Ikona główna
D. Zawartość tekstowa
E. Wskaźnik końcowy
Dostosowywanie
Większość dostosowań dotyczy elementów listy.
| Właściwości | Dostosowywanie | Domyślne |
|---|---|---|
| Element listy: kształt | Tak | 40 dp |
| Element listy: ikona na początku i na końcu | Tak | Ikona symbolu średniego |
| Element listy: wartości dopełnienia | Tak | 2d dp, 20 dp |
| Element listy: treść | Tak | Jednowierszowy: jeden komponent Text dla etykiety głównej z użyciem stylu Body Small. Dwuwierszowy: kolumna zawierająca 2 komponenty Text dla etykiety głównej i dodatkowej. Główny: Title Small. Dodatkowy: Body Small. |
| Lista: verticalArrangement | Tak | 20 dp |