يجب أن يسمح تطبيق الوسائط الذي يتم تشغيله على التلفزيون للمستخدمين بتصفّح محتواه. العروض وتحديد خيار وبدء تشغيل المحتوى. المحتوى الذي يتصفّحه للتطبيقات من هذا النوع بسيطة وسهلة الاستخدام ومرئية ممتعًا وجذابًا.
يميل متصفح كتالوج الوسائط إلى أن يتكون من عدة أقسام، وكل قسم قائمة بمحتوى الوسائط. في ما يلي أمثلة على أقسام كتالوج الوسائط: وقوائم التشغيل والمحتوى المميز والفئات الموصى بها.
![](https://developer.android.com/static/training/tv/images/compose-catalogbrowser-example.png?authuser=8&hl=ar)
استخدام الوظائف التي يوفرها Compose for TV لتنفيذ إجراءات المستخدمين لتصفّح الموسيقى أو الفيديوهات من كتالوج الوسائط في تطبيقك
إنشاء دالة قابلة للإنشاء للكتالوج
يتم تنفيذ كل شيء يظهر على الشاشة كدالة قابلة للإنشاء في إنشاء رسالة للتلفزيون ابدأ بتحديد عنصر قابل للإنشاء لمتصفّح كتالوج الوسائط:
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
// ToDo: add implementation
}
CatalogBrowser
هي الدالة القابلة للإنشاء التي تنفّذ كتالوج الوسائط
المتصفح. تستخدم الدالة الوسيطات التالية:
- تمثّل هذه السمة قائمة المحتوى المتميّز.
- قائمة الأقسام
- كائن المُعدِّل.
- دالة معاودة الاتصال التي تؤدي إلى انتقال الشاشة.
ضبط عناصر واجهة المستخدم
توفّر ميزة "إنشاء محتوى للتلفزيون" قوائم بطيئة، وهو مكوّن لعرض مجموعة كبيرة
عدد العناصر (أو قائمة ذات طول غير معروف). اتصل
LazyColumn
لوضع الأقسام عموديًا. يوفّر LazyColumn
LazyListScope.() -> Unit
يوفر خيار DSL لتحديد محتوى العنصر. في المثال التالي،
يتم وضع كل قسم في قائمة رأسية مع وجود فجوة تبلغ 16 وحدة بكسل مستقلة الكثافة بين الأقسام:
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
LazyColumn(
modifier = modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
items(sectionList) { section ->
Section(section, onItemSelected = onItemSelected)
}
}
}
في المثال، تحدِّد دالة Section
القابلة للإنشاء كيفية عرض الأقسام.
في الدالة التالية، توضّح الدالة LazyRow
كيفية
النسخة الأفقية من LazyColumn
تُستخدم بشكل مشابه
تعريف قائمة أفقية مع جزء LazyListScope.() -> Unit
من خلال استدعاء
DSL المقدم:
@Composable
fun Section(
section: Section,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
Text(
text = section.title,
style = MaterialTheme.typography.headlineSmall,
)
LazyRow(
modifier = modifier,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
items(section.movieList){ movie ->
MovieCard(
movie = movie,
onClick = { onItemSelected(movie) }
)
}
}
}
في العنصر Section
القابل للإنشاء، يتم استخدام المكوِّن Text
.
النص والمكونات الأخرى
المحددة في Material Design في مكتبة المواد التلفزيونية . يمكنك
تغيير النصوص كما هو موضح في Material Design من خلال الرجوع إلى
MaterialTheme
.
يتم توفير هذا العنصر أيضًا من خلال مكتبة مواد التلفزيون.
Card
هو جزء من مكتبة مواد التلفزيون.
تحدّد السمة MovieCard
طريقة عرض بيانات كل الأفلام في الكتالوج المحدّد.
كمقتطف التالي:
@Composable
fun MovieCard(
movie: Movie,
modifier: Modifier = Modifier,
onClick: () -> Unit = {}
) {
Card(modifier = modifier, onClick = onClick){
AsyncImage(
model = movie.thumbnailUrl,
contentDescription = movie.title,
)
}
}
إبراز المحتوى المتميِّز
في المثال الموضح سابقًا، يتم عرض جميع الأفلام بالتساوي.
يتشاركان المنطقة نفسها، ولا يوجد فرق مرئي بينهما.
يمكنك تمييز بعض منها باستخدام Carousel
.
تعرض لوحة العرض الدوّارة المعلومات في مجموعة من العناصر التي يمكن أن تنزلق أو تتلاشى أو الانتقال إلى وضع العرض. يمكنك استخدام المكون لتمييز المحتوى المميز، مثل الأفلام المتاحة حديثًا أو الحلقات الجديدة من البرامج التلفزيونية.
Carousel
يجب أن تحدّد على الأقل عدد العناصر في لوحة العرض الدوّارة وكيفية
ورسم كل عنصر. يمكن تحديد العنصر الأول باستخدام itemCount
. الخيار الثاني
ويمكن تمريرها باعتبارها lambda. رقم الفهرس للعنصر المعروض هو
تُعطى لللمدا. يمكنك تحديد العنصر المعروض باستخدام
قيمة الفهرس المحددة:
@Composable
function FeaturedCarousel(
featuredContentList: List<Movie>,
modifier: Modifier = Modifier,
) {
Carousel(
itemCount = featuredContentList.size,
modifier = modifier,
) { index ->
val content = featuredContentList[index]
Box {
AsyncImage(
model = content.backgroundImageUrl,
contentDescription = content.description,
placeholder = painterResource(
id = R.drawable.placeholder
),
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxSize()
)
Text(text = content.title)
}
}
}
يمكن أن يكون Carousel
عنصرًا في القائمة الكسولة، مثل TvLazyColumn
.
يعرض المقتطف التالي عنصر FeaturedCarousel
قابل للإنشاء فوق
كل العناصر القابلة للإنشاء البالغ عددها Section
:
@Composable
fun CatalogBrowser(
featuredContentList: List<Movie>,
sectionList: List<Section>,
modifier: Modifier = Modifier,
onItemSelected: (Movie) -> Unit = {},
) {
TvLazyColumn(
modifier = modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
item {
FeaturedCarousel(featuredContentList)
}
items(sectionList) { section ->
Section(section, onItemSelected = onItemSelected)
}
}
}