একটি ক্যাটালগ ব্রাউজার তৈরি করুন

একটি টিভিতে চলে এমন একটি মিডিয়া অ্যাপ ব্যবহারকারীদের তার বিষয়বস্তু অফার ব্রাউজ করতে, একটি নির্বাচন করতে এবং সামগ্রী খেলা শুরু করার অনুমতি দিতে হবে। এই ধরনের অ্যাপের জন্য বিষয়বস্তু ব্রাউজিং অভিজ্ঞতা সহজ, স্বজ্ঞাত এবং দৃশ্যত আনন্দদায়ক এবং আকর্ষক হওয়া উচিত।

একটি মিডিয়া ক্যাটালগ ব্রাউজারে বেশ কয়েকটি বিভাগ থাকে এবং প্রতিটি বিভাগে মিডিয়া বিষয়বস্তুর একটি তালিকা থাকে। একটি মিডিয়া ক্যাটালগের বিভাগগুলির উদাহরণগুলির মধ্যে রয়েছে: প্লেলিস্ট, বৈশিষ্ট্যযুক্ত সামগ্রী, প্রস্তাবিত বিভাগগুলি৷

আপনার অ্যাপের মিডিয়া ক্যাটালগ থেকে সঙ্গীত বা ভিডিও ব্রাউজ করার জন্য একটি ইউজার ইন্টারফেস বাস্তবায়ন করতে TV এর জন্য Compose দ্বারা প্রদত্ত ফাংশনগুলি ব্যবহার করুন৷

ক্যাটালগের জন্য একটি সংমিশ্রণযোগ্য ফাংশন তৈরি করুন

ডিসপ্লেতে প্রদর্শিত সবকিছুই টিভির জন্য কম্পোজে একটি সংমিশ্রণযোগ্য ফাংশন হিসাবে প্রয়োগ করা হয়। মিডিয়া ক্যাটালগ ব্রাউজারের জন্য একটি সংমিশ্রণযোগ্য ফাংশন সংজ্ঞায়িত করে শুরু করুন:

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

CatalogBrowser হল কম্পোজেবল ফাংশন যা আপনার মিডিয়া ক্যাটালগ ব্রাউজার বাস্তবায়ন করে। ফাংশন নিম্নলিখিত আর্গুমেন্ট নেয়:

• বৈশিষ্ট্যযুক্ত বিষয়বস্তুর তালিকা।
• বিভাগের তালিকা।
• একটি পরিবর্তনকারী বস্তু।
• একটি কলব্যাক ফাংশন, যা একটি স্ক্রীন ট্রানজিশন ট্রিগার করে।

UI উপাদান সেট করুন

টিভির জন্য রচনা অলস তালিকা অফার করে, একটি বড় সংখ্যক আইটেম (বা অজানা দৈর্ঘ্যের একটি তালিকা) প্রদর্শনের জন্য একটি উপাদান। উল্লম্বভাবে বিভাগ স্থাপন করতে 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) { 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 অবজেক্ট উল্লেখ করে মেটেরিয়াল ডিজাইনে সংজ্ঞায়িত পাঠ্যের স্টাইল পরিবর্তন করতে পারেন। এই বস্তুটি টিভি-ম্যাটেরিয়াল লাইব্রেরি দ্বারাও প্রদান করা হয়। 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 দিয়ে নির্দিষ্ট করা যেতে পারে। দ্বিতীয়টি ল্যাম্বডা হিসাবে পাস করা যেতে পারে। প্রদর্শিত আইটেমের সূচক নম্বর ল্যাম্বডাকে দেওয়া হয়। আপনি প্রদত্ত সূচক মান দিয়ে প্রদর্শিত আইটেম নির্ধারণ করতে পারেন:

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