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

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

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

पहली इमेज. कैटलॉग की सामान्य स्क्रीन. उपयोगकर्ता, वीडियो कैटलॉग का डेटा ब्राउज़ कर सकते हैं.

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 कंपोज़ेबल फ़ंक्शन, सेक्शन को दिखाने का तरीका बताता है. नीचे दिए गए फ़ंक्शन में, 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 कॉम्पोनेंट का इस्तेमाल किया जाता है. मटीरियल डिज़ाइन में तय किए गए टेक्स्ट और अन्य कॉम्पोनेंट, टीवी कॉन्टेंट लाइब्रेरी में ऑफ़र किए जाते हैं . MaterialTheme ऑब्जेक्ट का इस्तेमाल करके, Material Design में बताए गए तरीके से टेक्स्ट की स्टाइल बदली जा सकती है. यह ऑब्जेक्ट, tv-material लाइब्रेरी से भी मिलता है. 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 जैसी किसी लेज़ी सूची का आइटम हो सकता है. यहां दिए गए स्निपेट में, सभी 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)
    }
  }
}
पीछे जाएं
इस गाइड में इन विषयों के बारे में बताया गया है
आगे बढ़ें
ज़्यादा जानकारी वाली स्क्रीन बनाएं