Yoğun liste
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Tam sayfa liste, bir içerik satırı ve öğesinin önizlemesi
öğe seçildi. İçeriği, daha geniş bir görüntü alanında sunar.
Kaynaklar
Öne çıkanlar
- Dinamik içerik önizlemesi. Bir kullanıcı
önizleme alanı otomatik olarak güncellenir ve
odaklanılan öğedir.
- Immersive liste bileşeni, 300x250'lik bir alan,
Böylece kullanıcılar içeriği daha kolay görebilir ve beğenilerini
odaklanılan öğenin görsel ayrıntılarını içerir.
- Tam kapsamlı listeler, alakalı ve bağlamsal bilgiler sağlar
Böylece, kullanıcılar odaklanmadan ve bilgiye dayalı karar
çok kolaylaşır.
- Yoğun içerik liste bileşeni, bir tablodaki verileri
Kullanıcılar sitede gezinirken içerikle ilgili daha çok ayrıntı verir ve bilişsel açıdan
ve kullanıcı etkileşimini korumayı
teşvik edersiniz.
- Kapsamlı liste bileşeni, uygulama genelinde tutarlı etkileşimler sağlar.
kullanıcılara bildikleri ve öngörülebilir bir deneyim yaşatmak.
Anatomi
- Resim arka planı
- İçerik engelleme
- Kart odakta
- İçerik tablosu
- Sinematik kumaş
- Afiş
- Arka plan rengi
Özellikler
Davranış
Yoğun içerik listesindeki kartlar arasında gezinirken,
arka planda kademeli olarak görünür.
Tam sayfa liste odaktayken yüksekliği artarak
arka plan başlığı ve arka plan başlığı gibi ek bilgiler
aşağıdaki videoda gösterildiği gibi).
Kullanım
Öne çıkan veya görsele dikkat çekmek istediğinizde
yeni çıkanlar, popüler programlar veya özel içerikler gibi
başlıklar. Daha geniş görüntü alanı ve dinamik önizleme, kullanıcıların
öne çıkarmanın
bir yolunu sunar.
Resim görüntüleme
- Kart odağı: Kullanıcı bantta gezinirken
odaklanılan kartın görsel olarak vurgulanması, kartı 1, 1 ölçeklemesi, bir kenarlık
ve diğer görsel işaretler de seçim olduğunu belirtir. İçeriği sağlama
odaklanılan kartın küçük resminin içindeki başlıkların net bir şekilde
daha kolay okunmasını sağlayabilirsiniz.
- Arka plan resmi: Bir kart odaktayken buna karşılık gelen bir arka plan
daha büyük görüntü alanında görüntülenir. Bu arka planı öneririz
hem yüksek kaliteli hem de görsel açıdan çekicidir, çünkü etkileyici ve
ilgi çekici bir arka plana sahip olmalıdır.
Beste
check_circle
Yapılması gerekenler
Nesneyi ölçeklendirip sağ üst köşeye hizalayarak sinematik bir deneyim sunun.
cancel
Yapılmaması gerekenler:
İçeriğin altındaki öznenin kırpılmasına neden olacak tam ekran kırpma kullanmaktan kaçının.
Yoğun içerik liste bileşeninde arka plan olarak kullanılan resimlerin
iyi görünüyor, bulanık olmayacak şekilde ölçeklendirdiğinizden emin olun
bozulmuş olabilir.
En boy oranı
Arka plan resimlerinde 16:9 oranını kullanın.
tutarlı bir tasarıma sahip olmanızı sağlar.
Bu sayfadaki içerik ve kod örnekleri, İçerik Lisansı sayfasında açıklanan lisanslara tabidir. Java ve OpenJDK, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-07-27 UTC.
[null,null,["Son güncelleme tarihi: 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."]]
