W widoku listy treść jest wyświetlana w postaci elementów zamówienia na jednokolumnowej liście przewijanej w pionie. Ten widok najlepiej sprawdza się, gdy użytkownik odczytuje tekst i wyświetla dane podczas dokonywania wyboru.
Elementy list zajmują mniej miejsca w pionie niż elementy siatki, dzięki czemu na ekranie można wyświetlić więcej elementów.
Anatomia
W widoku listy każdy wiersz zawiera kafelek reprezentujący 1 element listy. Działania główne mogą wypełnić kafelek, aby użytkownicy mogli inicjować działanie z dowolnego miejsca w tym kafelku. W przypadku dodatkowych działań oznaczonych ikonami i tekstem można podjąć działania tylko w przypadku regionów, w których znajdują się te ikony i tekst.
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-anatomy-1.png?authuser=8&hl=pl)
2. Przełącznik włączony
3. Przełącznik wyłączony
4. Tekst podstawowy i dodatkowy.
5. Kafelek z treścią
Specyfikacja
Jednowierszowy element listy
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-1.png?authuser=8&hl=pl)
Dwuwierszowy element listy
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-3.png?authuser=8&hl=pl)
Odwrócony element listy w dwóch wierszach
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-4.png?authuser=8&hl=pl)
Wielowierszowy element listy z nagłówkiem
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-5.png?authuser=8&hl=pl)
Element listy z wieloma wierszami bez nagłówka
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-6.png?authuser=8&hl=pl)
Element listy z nadmiarem tekstu
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-2.png?authuser=8&hl=pl)
Element listy z działaniami podzielonymi
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-7.png?authuser=8&hl=pl)
Umiejscowienie ikony wskaźnika na liście
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-spec-8.png?authuser=8&hl=pl)
Skalowanie układów
Te układy referencyjne pokazują, jak dostosować elementy listy do ekranów o różnej szerokości i wysokości. (Kategorie szerokości i wysokości są zdefiniowane w sekcji Układ). Pamiętaj, że wszystkie wartości w pikselach są wyrenderowane w pikselach przed próbkowaniem w górę lub w dół.
Standardowe, szerokie i bardzo szerokie ekrany
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-1.png?authuser=8&hl=pl)
Standardowe, szerokie i bardzo szerokie ekrany z kafelkiem treści
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-3.png?authuser=8&hl=pl)
Superszeroki ekran
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-ar-2.png?authuser=8&hl=pl)
Style
Typografia
Styl pisania | Krój czcionki | Waga | Rozmiar (dp) |
---|---|---|---|
Tekst główny 1 | Roboto | Zwykły | 32 |
Tekst główny 3 | Roboto | Zwykły | 24 |
Kolor
Element | Kolor(tryb dzienny) | Kolor (tryb nocny) |
---|---|---|
Podstawowy typ / ikony | Biały | Biały – 88% |
Dodatkowy typ / ikony | Biały – 72% | Biały: 60% |
Linia podziału | Biały – 22% | Biały – 12% |
Tło elementu listy | czerń | czerń |
Rozmiary
Element | Rozmiar (dp) |
---|---|
Wysokość elementu listy | 96 (krótkie ekrany) / 116 (ekran standardowy) / 128 (wysoki ekran) |
Ikona główna | 44 |
Ikona wyższego poziomu | 24 |
Kafelek treści | Wysokość elementu listy pomniejszona o 1 dp |
Średni awatar | 76 |
Grubość linii podziału | 1 |
Przykłady
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-1.png?authuser=8&hl=pl)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-2.png?authuser=8&hl=pl)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-3.png?authuser=8&hl=pl)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-4.png?authuser=8&hl=pl)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-5.png?authuser=8&hl=pl)
![](https://developers.google.cn/cars/design/automotive-os/components/images/list-mock-6.png?authuser=8&hl=pl)