कैटलॉग ब्राउज़र बनाना

टीवी पर चलने वाले मीडिया ऐप्लिकेशन में, लोगों को कॉन्टेंट ब्राउज़ करने, कॉन्टेंट चुनने, और उसे चलाने की सुविधा मिलनी चाहिए. इस तरह के ऐप्लिकेशन में कॉन्टेंट ब्राउज़ करने का अनुभव सहज होना चाहिए. साथ ही, यह देखने में अच्छा और दिलचस्प होना चाहिए.

कैटलॉग ब्राउज़र में कई सेक्शन होते हैं. हर सेक्शन में मीडिया कॉन्टेंट की एक सूची होती है. मीडिया कैटलॉग में मौजूद सेक्शन के उदाहरणों में ये शामिल हैं: प्लेलिस्ट, चुनिंदा कॉन्टेंट, सुझाई गई कैटगरी.

अपने ऐप्लिकेशन के मीडिया कैटलॉग से संगीत या वीडियो ब्राउज़ करने के लिए, Compose for TV की ओर से उपलब्ध कराए गए फ़ंक्शन का इस्तेमाल करें.

कैटलॉग के लिए कंपोज़ेबल फ़ंक्शन बनाना

डिस्प्ले पर दिखने वाली हर चीज़ को Compose for TV में कंपोज़ेबल फ़ंक्शन के तौर पर लागू किया जाता है. मीडिया कैटलॉग ब्राउज़र के लिए, कंपोज़ेबल फ़ंक्शन तय करके शुरू करें:

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

CatalogBrowser, कंपोज़ेबल फ़ंक्शन है. यह आपके मीडिया कैटलॉग ब्राउज़र को लागू करता है. इस फ़ंक्शन में ये आर्ग्युमेंट इस्तेमाल किए जाते हैं:

• चुनिंदा कॉन्टेंट की सूची.
• सेक्शन की सूची.
• मॉडिफ़ायर ऑब्जेक्ट.
• एक कॉलबैक फ़ंक्शन, जो स्क्रीन ट्रांज़िशन को ट्रिगर करता है.

यूज़र इंटरफ़ेस (यूआई) एलिमेंट सेट करना

Compose for TV में लेज़ी लिस्ट की सुविधा मिलती है. यह एक ऐसा कॉम्पोनेंट है जिसकी मदद से, बड़ी संख्या में आइटम (या अनिश्चित लंबाई वाली सूची) दिखाई जा सकती है. सेक्शन को वर्टिकल तौर पर रखने के लिए, LazyColumn पर कॉल करें. LazyColumn एक LazyListScope.() -> Unit ब्लॉक उपलब्ध कराता है. इसमें आइटम के कॉन्टेंट को तय करने के लिए डीएसएल उपलब्ध होता है. यहां दिए गए उदाहरण में, हर सेक्शन को वर्टिकल सूची में रखा गया है. साथ ही, सेक्शन के बीच 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 ब्लॉक के साथ हॉरिज़ॉन्टल सूची को तय करने के लिए कैसे किया जाता है. इसके लिए, दिए गए डीएसएल को कॉल किया जाता है:

@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

चुनिंदा कॉन्टेंट को हाइलाइट करना

ऊपर दिए गए उदाहरण में, सभी फ़िल्में बराबर दिखाई गई हैं. इन दोनों का साइज़ एक जैसा है. इनमें कोई अंतर नहीं है. Carousel की मदद से, इनमें से कुछ को हाइलाइट किया जा सकता है.

कैरोसेल, आइटम के सेट में जानकारी दिखाता है. इसे स्लाइड किया जा सकता है, फ़ेड किया जा सकता है या व्यू में ले जाया जा सकता है. इस कॉम्पोनेंट का इस्तेमाल, चुनिंदा कॉन्टेंट को हाइलाइट करने के लिए किया जाता है. जैसे, नई फ़िल्में या टीवी प्रोग्राम के नए एपिसोड.

Carousel को कम से कम यह जानकारी देनी होगी कि कैरसेल में कितने आइटम हैं और हर आइटम को कैसे ड्रॉ करना है. पहले विकल्प को itemCount की मदद से तय किया जा सकता है. दूसरे को लैम्डा के तौर पर पास किया जा सकता है. दिखाए गए आइटम का इंडेक्स नंबर, लैंबडा को दिया जाता है. दी गई इंडेक्स वैल्यू की मदद से, दिखाए गए आइटम का पता लगाया जा सकता है:

@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