没入型リスト
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
没入型リストは、コンテンツの各行とKubernetes の
選択します。大きなビューポートにコンテンツが表示されます。

リソース
ハイライト
- 動的コンテンツのプレビュー。ユーザーが行を
プレビュー領域が自動的に更新され、
現在のフォーカスされている項目を表示します。
- 没入型リスト コンポーネントは、より大きく
ユーザーが簡単にコンテンツを閲覧、視聴できるようにして、
フォーカスされている項目の視覚的な詳細です。
- 没入型リストでは、関連性の高いコンテキスト情報が提供されます
ユーザーは必要なく情報に基づいた意思決定を下すことができる
ブラウジング環境から離れます
- 没入型リスト コンポーネントでは、段階的な開示を使用して
ユーザーが移動するとコンテンツの詳細が表示され、認知能力が
ユーザーエンゲージメントの負荷と維持に
専念できます
- 没入型リスト コンポーネントは、アプリ全体で一貫したインタラクションを保証します。
使い慣れた予測可能なエクスペリエンスをユーザーに提供できます
解剖学

- 背景画像
- コンテンツ ブロック
- カードにフォーカスが合っている
- コンテンツ グリッド

- シネマティック スクリム
- Poster
- 背景色
仕様

動作
没入型リストのカード間を移動すると、
背景に段階的に表示されます。
没入型リストにフォーカスがあると、リストの高さが高くなります。
背景のタイトルや説明などの追加情報を
次の動画をご覧ください。
使用方法
没入型カルーセルは、注目のコンテンツや
プロモーション用コンテンツ(新曲、人気の番組、限定コンテンツなど)
できます。大きなビューポートとダイナミック プレビューにより、
優先順位の高い項目を提示する方法です
画像の表示

- カードのフォーカス: ユーザーがカルーセル内を移動すると、
枠線を使用してカードを 1.1 倍拡大し、視覚的に強調表示されます。
その他の視覚的な手がかりを浮き彫りにしますコンテンツを確保する
フォーカスされているカードのサムネイル内に、タイトルがはっきりと見える
見やすくします
- 背景画像: カードにフォーカスしているときの、対応する背景。
大きなビューポートに表示されます。この背景を使用することをおすすめします。
高品質で視覚的な魅力があります。
コンテンツに適した背景を作成できます
合成
check_circle
すべきこと
被写体を画面の右上隅に拡大縮小して配置することで、映画のようなエクスペリエンスを実現できます。
cancel
すべきでないこと
全画面の切り抜きを使用すると、コンテンツの下の被写体が切り抜かれます。
没入型リスト コンポーネントで画像が背景として確実に使用されるようにする
ぼやけないように、適切なサイズで補正してください
ゆがんでしまいます
アスペクト比
可能な限り背景画像の比率を 16:9 にする
統一感のある魅力的なレイアウトにできます

このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-07-27 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 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."]]