قائمة شاملة
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
تضم القائمة الشاملة مزيجًا من صف من المحتوى معاينة
العنصر المحدد. وتعرض المحتوى في إطار عرض أكبر.
المراجع
أهم التفاصيل
- معاينة المحتوى الديناميكي. عندما يتنقل المستخدم عبر صف
المحتوى، يتم تحديث منطقة المعاينة تلقائيًا لعرض
العنصر الحالي محل التركيز.
- يتميز مكوِّن القائمة المجسَّمة بإطار عرض أكبر
عرض المحتوى، ما يسهِّل على المستخدمين عرض المحتوى وتقديره
التفاصيل المرئية للعنصر الذي تم التركيز عليه.
- توفّر القوائم التفاعلية معلومات ذات صلة وسياقية
حول العنصر الذي تم التركيز عليه، مما يساعد المستخدمين على اتخاذ قرارات مستنيرة دون
مغادرة تجربة التصفح.
- يستخدم مكون القائمة المجسَّمة الإفصاح التدريجي للكشف
المزيد من التفاصيل حول المحتوى أثناء تنقل المستخدمين، مما يقلل من
التحميل والحفاظ على تفاعل المستخدم.
- يضمن مكون القائمة الشاملة تفاعلات متسقة عبر التطبيق،
بتزويد المستخدمين بتجربة مألوفة ويمكن التنبؤ بها.
علم التشريح
- خلفية الصورة
- حظر المحتوى
- البطاقة محل التركيز
- شبكة المحتوى
- حاجب سينمائي
- الملصق
- لون الخلفية
المواصفات
السُلوك
عند التنقل بين البطاقات في القائمة المجسّمة، تظهر تفاصيل
يتم إظهار البطاقة المحددة تدريجيًا في الخلفية.
عندما تكون القائمة المجسَّمة في بؤرة التركيز، يزداد ارتفاعها لإظهار
لمزيد من المعلومات، مثل عنوان الخلفية
كما هو موضح في الفيديو التالي.
الاستخدام
يمكنك استخدام لوحات العرض الدوّارة الغامرة للفت الانتباه إلى المحتوى المميز أو
مثل الإصدارات الجديدة أو البرامج الرائجة أو المحتوى الحصري
العناوين. يساعد إطار العرض الأكبر والمعاينة الديناميكية في إضفاء طابع جذاب على
لعرض هذه العناصر ذات الأولوية العالية.
عرض الصورة
- تركيز البطاقة: أثناء تنقّل المستخدم في لوحة العرض الدوّارة،
يتم التركيز عليها بصريًا، مع زيادة حجم البطاقة بمقدار 1.1، باستخدام حد،
وإشارات مرئية أخرى كمسقط رأسي للإشارة إلى تحديده. ضمان ظهور المحتوى
من العناوين داخل الصورة المصغّرة للبطاقة التي يتم التركيز عليها
مرئية وأسهل في القراءة.
- صورة الخلفية: عند التركيز على بطاقة، يتم استخدام خلفية مقابلة
تظهر الصورة في إطار العرض الأكبر. ننصح باستخدام هذه الخلفية
الصورة ذات جودة عالية وجذابة بصريًا، حيث إنها توفر تجربة غامرة
خلفية جذابة للمحتوى.
مقطوعة موسيقية
check_circle
الإجراءات التي يُنصح بها
يمكنك تغيير حجم الهدف ومحاذاته في الزاوية العلوية اليسرى من أجل خلق تجربة سينمائية.
cancel
الإجراءات غير المُوصى بها
تجنَّب استخدام ميزة الاقتصاص بملء الشاشة التي تؤدي إلى اقتصاص الهدف تحت المحتوى.
لضمان استخدام الصور كخلفيات في مكون القائمة المجسم
أن تبدو جيدة، تأكد من تغيير حجمها بشكل مناسب حتى لا تكون ضبابية
أو تشوّهه.
نسبة العرض إلى الارتفاع
استخدِم نسبة 16:9 لصور الخلفية كلما أمكن ذلك لضمان
تخطيط جذاب ومتسق من الناحية المرئية.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],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."]]
