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

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

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

الشكل 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 هي الدالة المركّبة التي تنفّذ متصفّح كتالوج الوسائط. تتطلّب الدالة الوسيطات التالية:

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

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

توفّر حزمة 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 عنصرًا في قائمة بطيئة، مثل LazyColumn. يوضّح المقتطف التالي الدالة المركّبة 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