Interaktywna lista
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Interaktywna lista to połączenie treści i obiektów podgląd
wybrany element. Zawiera treści w większym widocznym obszarze.

Materiały
Najciekawsze
- Podgląd zawartości dynamicznej. Gdy użytkownik przegląda wiersz
treści, obszar podglądu jest automatycznie aktualizowany
aktualnie zaznaczony element.
- Komponent Lista imersyjna ma większy widoczny obszar
prezentowanie treści, ułatwiając użytkownikom ich przeglądanie i docenianie.
czyli wizualne szczegóły zaznaczonego elementu.
- Interaktywne listy dostarczają istotnych informacji kontekstowych
na temat wybranej tematyki, pomagając użytkownikom
podejmować świadome decyzje
i opuszczamy okno przeglądania.
- Komponent Lista immerstyczna wykorzystuje progresywne ujawnianie informacji
więcej szczegółów na temat treści, gdy użytkownicy poruszają się po ekranie, co ogranicza
wczytywać strony i utrzymywać zaangażowanie użytkowników.
- Komponent listy immersyjnej umożliwia
spójne interakcje w aplikacji,
i zapewniać użytkownikom znane i przewidywalne treści.
Anatomia

- Tło obrazu
- Blokada treści
- Karta na ostrości
- Siatka treści

- Kryminalna grafika
- Plakat
- Kolor tła
Dane techniczne

Działanie
Podczas poruszania się między kartami na liście immersyjnej szczegóły elementu
są stopniowo pokazywane w tle.
Gdy lista jest aktywna, jej wysokość zwiększa się, aby odsłonić
dodatkowe informacje, takie jak tytuł,
podobnie jak w przypadku poniższego filmu.
Wykorzystanie
Użyj przewijanych karuzel, jeśli chcesz przyciągnąć uwagę użytkowników
promowane treści, takie jak nowości, popularne programy i materiały na wyłączność,
tytuły. Większy widoczny obszar i dynamiczny podgląd zapewniają
sposób na wyróżnienie
o wysokim priorytecie.
Wyświetlanie obrazu

- Koncentracja na karcie: gdy użytkownik porusza się po karuzeli,
wyróżniona karta, skalowanie karty o 1,1, użycie obramowania,
i inne wizualne wskazówki, takie jak wysokość, aby wskazać odpowiedni wybór. Zadbaj o to, żeby treść
tytuły w miniaturze zaznaczonej karty są wyraźnie widoczne,
i czytelne.
- Obraz tła: gdy karta jest aktywna, jej tło jest wyświetlane.
pojawia się w większym widoku. Zalecamy to tło
są wysokiej jakości i atrakcyjne wizualnie, gdyż umożliwiają
atrakcyjne tło treści.
Kompozycja
check_circle
Tak
Skaluj obiekt i wyrównaj go do prawego górnego rogu, aby uzyskać efekt filmowy.
cancel
Nie
Unikaj korzystania z funkcji przycinania pełnoekranowego, która spowoduje obcięcie obiektu znajdującego się pod treścią.
Aby obrazy używane jako tła w komponencie Immersive Lista
wyglądają dobrze, więc dopilnuj, aby były odpowiednio skalowane, aby nie były rozmyte
lub zniekształcone.
Format obrazu
Gdy tylko jest to możliwe, stosuj proporcje 16:9 dla obrazów tła,
aby mieć atrakcyjny wizualnie i spójny układ.

Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-27 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2025-07-27 UTC."],[],[],null,["# Immersive list is a combination of a row of content \\& preview of the\nselected item. It features content in a larger viewport.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Sample](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:tv/samples/src/main/java/androidx/tv/samples/ImmersiveListSamples.kt;drc=5920fece16ad6723107098f24a492a25937cd51a) | N/A |\n\nHighlights\n----------\n\n- Dynamic content preview. When a user navigates through the row of content, the preview area automatically update to display the current focused item.\n- The Immersive list component features a larger viewport for displaying content, making it easier for users to view and appreciate the visual details of the focused item.\n- Immersive lists provide relevant and contextual information about the focused item, helping users make informed decisions without leaving the browsing experience.\n- The Immersive list component uses progressive disclosure to reveal more details about the content as users navigate, reducing cognitive load and maintaining user engagement.\n- The Immersive list component ensures consistent interactions across the app, providing users with a familiar and predictable experience.\n\nAnatomy\n-------\n\n1. Image background\n2. Content block\n3. Card on focus\n4. Content grid\n\n1. Cinematic scrim\n2. Poster\n3. Background color\n\nSpecs\n-----\n\nBehavior\n--------\n\nWhen navigating between cards in the Immersive list, the details of the\nselected card are progressively revealed in the background. \n\nWhen the immersive list is in focus, its height increases to reveal\nadditional information, such as the background title and\ndescription, as shown in the following video.\n\nUsage\n-----\n\nUse immersive carousels when you want to draw attention to featured or\npromoted content, such as new releases, popular shows, or exclusive\ntitles. The larger viewport and dynamic preview provide a compelling\nway to showcase these high-priority items.\n\n### Image display\n\n1. **Card focus**: As the user navigates through the carousel, the focused card is visually emphasized, scaling the card by 1.1, using a border, and other visual cues as elevation to indicate its selection. Ensure content titles inside the thumbnail of the focused card are clearly visible and easier to read.\n2. **Background image**: When a card is in focus, a corresponding background image is displayed in the larger viewport. We recommend this background image is high-quality and visually appealing, as it provides an immersive and engaging backdrop for the content.\n\n### Composition\n\ncheck_circle\n\n### Do\n\nScale and align the subject to the top right corner creating a cinematic experience. \ncancel\n\n### Don't\n\nAvoid using full screen crop that will make crop the subject under the content.\n\nTo ensure the images used as backgrounds in the Immersive list component\nlook good, make sure to scale them appropriately so they are not blurry\nor distorted.\n\n### Aspect ratio\n\nUse a 16:9 ratio for background images whenever possible to ensure\na visually appealing and consistent layout."]]