فهرست همهجانبه
با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
فهرست همه جانبه ترکیبی از یک ردیف از محتوا و پیش نمایش مورد انتخاب شده است. محتوا را در یک نمای بزرگتر نشان می دهد.
منابع
نکات برجسته
- پیش نمایش محتوای پویا هنگامی که کاربر در ردیف محتوا حرکت می کند، منطقه پیش نمایش به طور خودکار به روز می شود تا مورد متمرکز فعلی را نمایش دهد.
- جزء فهرست Immersive دارای یک درگاه دید بزرگتر برای نمایش محتوا است که مشاهده و درک جزئیات بصری مورد متمرکز شده را برای کاربران آسان تر می کند.
- فهرست‌های همهجانبه اطلاعات مرتبط و متنی در مورد مورد متمرکز ارائه می‌کنند و به کاربران کمک می‌کنند بدون ترک تجربه مرور، تصمیم‌های آگاهانه بگیرند.
- مؤلفه فهرست فراگیر از افشای تدریجی استفاده می کند تا جزئیات بیشتری را در مورد محتوا در حین پیمایش کاربران نشان دهد و بار شناختی را کاهش دهد و تعامل کاربر را حفظ کند.
- مؤلفه فهرست همهجانبه تعاملات مداوم را در سراسر برنامه تضمین می کند و تجربه ای آشنا و قابل پیش بینی را برای کاربران فراهم می کند.
آناتومی
- پس زمینه تصویر
- بلوک محتوا
- کارت روی تمرکز
- شبکه محتوا
- داستان فیلم سینمایی
- پوستر
- رنگ پس زمینه
مشخصات
رفتار
هنگام پیمایش بین کارت‌ها در فهرست Immersive، جزئیات کارت انتخابی به تدریج در پس‌زمینه آشکار می‌شوند.
همانطور که در ویدیوی زیر نشان داده شده است، هنگامی که فهرست همه جانبه در فوکوس است، ارتفاع آن افزایش می‌یابد تا اطلاعات بیشتری مانند عنوان پس‌زمینه و توضیحات نشان داده شود.
استفاده
زمانی که می‌خواهید توجه را به محتوای برجسته یا تبلیغ‌شده، مانند نسخه‌های جدید، نمایش‌های محبوب یا عناوین انحصاری جلب کنید، از چرخ و فلک‌های همهجانبه استفاده کنید. نمای بزرگتر و پیش نمایش پویا راهی قانع کننده برای نمایش این موارد با اولویت بالا فراهم می کند.
نمایش تصویر
- فوکوس کارت : هنگامی که کاربر در چرخ و فلک حرکت می کند، کارت متمرکز به صورت بصری تاکید می شود، کارت را با 1.1 مقیاس می دهد، از یک حاشیه، و سایر نشانه های بصری به عنوان ارتفاع برای نشان دادن انتخاب آن استفاده می کند. اطمینان حاصل کنید که عناوین محتوا در داخل تصویر کوچک کارت متمرکز به وضوح قابل مشاهده و خواندن آسان‌تر است.
- تصویر پس‌زمینه : وقتی کارتی در فوکوس است، تصویر پس‌زمینه مربوطه در نمای بزرگتر نمایش داده می‌شود. توصیه می‌کنیم این تصویر پس‌زمینه با کیفیت بالا و از نظر بصری جذاب باشد، زیرا پس‌زمینه‌ای فراگیر و جذاب برای محتوا فراهم می‌کند.
ترکیب
check_circle
انجام دهید
سوژه را در گوشه بالا سمت راست تنظیم کنید و یک تجربه سینمایی ایجاد کنید.
cancel
نکن
از استفاده از برش تمام صفحه که باعث برش موضوع در زیر محتوا می شود خودداری کنید.
برای اطمینان از اینکه تصاویر به‌عنوان پس‌زمینه در مؤلفه فهرست Immersive خوب به نظر می‌رسند، مطمئن شوید که آنها را به‌طور مناسب اندازه‌گیری کنید تا تار یا تحریف نشوند.
نسبت ابعاد
تا حد امکان از نسبت 16:9 برای تصاویر پس‌زمینه استفاده کنید تا از یک چیدمان بصری جذاب و ثابت اطمینان حاصل کنید.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2025-07-29 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","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-29 بهوقت ساعت هماهنگ جهانی."],[],[],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."]]
