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

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

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

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

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

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

@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 में तय किए गए टेक्स्ट और अन्य कॉम्पोनेंट, tv-material लाइब्रेरी में उपलब्ध होते हैं . MaterialTheme ऑब्जेक्ट का इस्तेमाल करके, Material Design में बताए गए तरीके से टेक्स्ट की स्टाइल बदली जा सकती है. यह ऑब्जेक्ट, tv-material लाइब्रेरी से भी मिलता है. Card, tv-material लाइब्रेरी का हिस्सा है. 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 जैसी किसी लेज़ी सूची का आइटम हो सकता है. इस स्निपेट में, सभी Section कॉम्पोनेंट के ऊपर FeaturedCarousel कॉम्पोनेंट दिखाया गया है:

@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)
    }
  }
}