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

टीवी पर चलने वाले मीडिया ऐप्लिकेशन के लिए, यह ज़रूरी है कि उपयोगकर्ता उसका कॉन्टेंट ब्राउज़ कर सकें ऑफ़र चुनें, विकल्प चुनें, और कॉन्टेंट चलाना शुरू करें. कॉन्टेंट ब्राउज़ करना इस तरह के ऐप्लिकेशन का अनुभव आसान, समझने लायक, और विज़ुअल तौर पर होना चाहिए तो दिलचस्प हों.

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

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

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

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

@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 कंपोज़ेबल फ़ंक्शन, सेक्शन को दिखाने का तरीका बताता है. यहां दिए गए फ़ंक्शन में, 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 कॉम्पोनेंट का इस्तेमाल किया जाता है. टेक्स्ट और अन्य कॉम्पोनेंट मटीरियल डिज़ाइन में बताई गई परिभाषाएं, टीवी-मटीरियल लाइब्रेरी में दी जाती हैं . आप मेरे मैसेज को बदलो' मटीरियल डिज़ाइन में परिभाषित की गई स्टाइल के बारे में 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)
    }
  }
}