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

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

একটি মিডিয়া ক্যাটালগ ব্রাউজারে সাধারণত কয়েকটি সেকশন থাকে এবং প্রতিটি সেকশনে মিডিয়া কন্টেন্টের একটি তালিকা থাকে। একটি মিডিয়া ক্যাটালগের সেকশনগুলোর উদাহরণ হলো: প্লেলিস্ট, ফিচারড কন্টেন্ট, রেকমেন্ডেড ক্যাটাগরি।

আপনার অ্যাপের মিডিয়া ক্যাটালগ থেকে গান বা ভিডিও ব্রাউজ করার জন্য একটি ইউজার ইন্টারফেস তৈরি করতে 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 হলো একটি কম্পোজেবল ফাংশন যা আপনার মিডিয়া ক্যাটালগ ব্রাউজারটি বাস্তবায়ন করে। ফাংশনটি নিম্নলিখিত আর্গুমেন্টগুলো গ্রহণ করে:

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

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

Compose for TV-তে লেজি লিস্ট (lazy lists) রয়েছে, যা বিপুল সংখ্যক আইটেম (বা অজানা দৈর্ঘ্যের কোনো তালিকা) প্রদর্শন করার জন্য একটি কম্পোনেন্ট। সেকশনগুলোকে উল্লম্বভাবে স্থাপন করতে LazyColumn কল করুন। LazyColumn একটি LazyListScope.() -> Unit ব্লক প্রদান করে, যা আইটেমের বিষয়বস্তু নির্ধারণ করার জন্য একটি DSL সরবরাহ করে। নিম্নলিখিত উদাহরণে, প্রতিটি সেকশনকে একটি উল্লম্ব তালিকায় স্থাপন করা হয়েছে এবং সেকশনগুলোর মধ্যে ১৬ dp ব্যবধান রাখা হয়েছে:

@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 এর এই হরাইজন্টাল সংস্করণটি একইভাবে প্রদত্ত DSL-কে কল করার মাধ্যমে একটি 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 কম্পোনেন্ট ব্যবহার করা হয়। ম্যাটেরিয়াল ডিজাইনে সংজ্ঞায়িত টেক্সট এবং অন্যান্য কম্পোনেন্টগুলো tv-material লাইব্রেরিতে পাওয়া যায়। আপনি MaterialTheme অবজেক্টটি উল্লেখ করে ম্যাটেরিয়াল ডিজাইনে সংজ্ঞায়িত টেক্সটের স্টাইল পরিবর্তন করতে পারেন। এই অবজেক্টটিও 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)
    }
  }
}