إنشاء متصفِّح كتالوج

يجب أن يتيح تطبيق الوسائط الذي يعمل على التلفزيون للمستخدمين تصفّح عروض المحتوى واختيار المحتوى وبدء تشغيله. يجب أن تكون تجربة تصفّح المحتوى في هذا النوع من التطبيقات سهلة الاستخدام وجذابة بصريًا وتفاعلية.

تميل متصفحات الكتالوج إلى أن تتألف من عدة أقسام، ويحتوي كل قسم على قائمة بمحتوى الوسائط. تشمل الأمثلة على الأقسام في فهرس الوسائط ما يلي: قوائم التشغيل والمحتوى المميّز والفئات المقترَحة.

الشكل 1. شاشة الكتالوج النموذجية يمكن للمستخدمين تصفّح بيانات فهرس الفيديوهات.

استخدِم الوظائف التي يوفّرها Compose لـ Android TV لتنفيذ واجهة مستخدم لتصفُّح الموسيقى أو الفيديوهات من كتالوج الوسائط في تطبيقك.

إنشاء دالة مركّبة للكتالوج

يتم تنفيذ كل ما يظهر على الشاشة كدالة مركّبة في Compose لـ Android TV. ابدأ بتحديد دالة قابلة للإنشاء خاصة بمتصفّح كتالوج الوسائط:

@Composable
fun CatalogBrowser(
    featuredContentList: List<Movie>,
    sectionList: List<Section>,
    modifier: Modifier = Modifier,
    onItemSelected: (Movie) -> Unit = {},
) {
    // ToDo: add implementation
}
TvMoviesActivity.kt

‫CatalogBrowser هي الدالة المركّبة التي تنفّذ متصفّح كتالوج الوسائط. تتلقّى الدالة الوسيطات التالية:

• قائمة المحتوى المميّز
• تمثّل هذه السمة قائمة بالأقسام.
• كائن معدِّل
• دالة ردّ الاتصال التي تؤدي إلى انتقال الشاشة

ضبط عناصر واجهة المستخدم

توفّر Compose لـ Android TV قوائم التحميل الكسول، وهي مكوّن لعرض عدد كبير من العناصر (أو قائمة بطول غير معروف). استخدِم 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.size) { index ->
            val section = sectionList[index]
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}
TvMoviesActivity.kt

في المثال، تحدّد الدالة القابلة للإنشاء SectionRow كيفية عرض الأقسام. في الدالة التالية، يوضّح LazyRow كيفية استخدام هذا الإصدار الأفقي من LazyColumn بشكل مشابه لتحديد قائمة أفقية باستخدام حظر LazyListScope.() -> Unit من خلال استدعاء DSL المقدَّم:

@Composable
fun SectionRow(
    section: Section,
    modifier: Modifier = Modifier,
    onItemSelected: (Movie) -> Unit = {},
) {
    Text(
        text = section.title,
        style = MaterialTheme.typography.headlineSmall,
    )
    MovieCatalog(
        section.movieList,
        onClick = { movie -> onItemSelected(movie) },
        modifier
    )
}
TvMoviesActivity.kt

@Composable
fun MovieCatalog(
    movies: List<Movie>,
    onClick: (Movie) -> Unit,
    modifier: Modifier = Modifier,
) {
    LazyRow(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(movies.size) { index ->
            val movie = movies[index]
            MovieCard(
                movie = movie,
                onClick = { onClick(movie) }
            )
        }
    }
}
TvMoviesActivity.kt

في الدالة البرمجية القابلة للإنشاء SectionRow، يتم استخدام المكوّن Text. تتوفّر النصوص والمكوّنات الأخرى المحدّدة في التصميم المتعدد الأبعاد في مكتبة tv-material . يمكنك تغيير نمط النصوص كما هو محدّد في التصميم المتعدد الأبعاد من خلال الرجوع إلى العنصر MaterialTheme. يتم توفير هذا العنصر أيضًا من خلال مكتبة tv-material. ‫Card هو جزء من مكتبة tv-material. تحدّد MovieCard طريقة عرض بيانات كل فيلم في الكتالوج المحدّد على النحو التالي:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MovieCard(
    movie: Movie,
    modifier: Modifier = Modifier,
    onClick: () -> Unit = {}
) {
    Card(
        modifier = modifier,
        onClick = onClick
    ) {
        AsyncImage(
            model = movie.thumbnailUrl,
            contentDescription = movie.title,
        )
    }
}
TvMoviesActivity.kt

ملاحظة: AsyncImage هي دالة مركّبة تحمّل صورة من الإنترنت. راجِع مقالة تحميل الصور للحصول على التفاصيل.

إبراز المحتوى المتميّز

في المثال الموضّح سابقًا، يتم عرض جميع الأفلام بالتساوي. ولهما المساحة نفسها، ولا يوجد فرق مرئي بينهما. يمكنك تمييز بعضها باستخدام Carousel.

تعرض لوحة العرض الدوّارة المعلومات في مجموعة من العناصر التي يمكن تمريرها أو تلاشيها أو نقلها إلى العرض. يمكنك استخدام هذا المكوّن لإبراز المحتوى المميّز، مثل الأفلام المتاحة حديثًا أو الحلقات الجديدة من البرامج التلفزيونية.

يتوقّع Carousel منك تحديد عدد العناصر التي تتضمّنها لوحة العرض الدوّارة على الأقل وكيفية عرض كل عنصر. يمكن تحديد العنصر الأول باستخدام itemCount. يمكن تمرير الوسيطة الثانية كدالة lambda. يتم تقديم رقم فهرس العنصر المعروض إلى تعبير lambda. يمكنك تحديد العنصر المعروض باستخدام قيمة الفهرس المحدّدة:

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun 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.movie_placeholder
                ),
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxSize()
            )
            Text(text = content.title)
        }
    }
}
TvMoviesActivity.kt

يمكن أن يكون Carousel عنصرًا من قائمة غير نشطة، مثل TvLazyColumn. يوضّح المقتطف التالي الدالة المركّبة FeaturedCarousel أعلى جميع الدوال المركّبة SectionRow:

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun CatalogBrowser(
    featuredContentList: List<Movie>,
    sectionList: List<Section>,
    modifier: Modifier = Modifier,
    onItemSelected: (Movie) -> Unit = {},
) {
    LazyColumn(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        item {
            FeaturedCarousel(featuredContentList)
        }

        items(sectionList) { section ->
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}
TvMoviesActivity.kt