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

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

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

ছবি ১. সাধারণ ক্যাটালগ স্ক্রিন। ব্যবহারকারীরা ভিডিও ক্যাটালগ ডেটা ব্রাউজ করতে পারবেন।

আপনার অ্যাপের মিডিয়া ক্যাটালগ থেকে মিউজিক বা ভিডিও ব্রাউজ করার জন্য ইউজার ইন্টারফেস প্রয়োগ করতে, TV-র জন্য কম্পোজের মাধ্যমে প্রদত্ত ফাংশন ব্যবহার করুন।

ক্যাটালগের জন্য কম্পোজেবল ফাংশন তৈরি করা

ডিসপ্লেতে দেখানো সবকিছুই Compose for TV-তে কম্পোজ করার উপযুক্ত ফাংশন হিসেবে প্রয়োগ করা হয়। মিডিয়া ক্যাটালগ ব্রাউজারের জন্য একটি কম্পোজ করা যায় এমন ফাংশন ডিফাইন করার মাধ্যমে শুরু করুন:

@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 অফার করে। নিচের উদাহরণে, প্রতিটি বিভাগকে একটি উল্লম্ব তালিকায় রাখা হয়েছে এবং বিভাগগুলির মধ্যে ১৬ ডিপি ফাঁকা জায়গা রয়েছে:

@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.size) { index ->
            val section = sectionList[index]
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}

উদাহরণে, SectionRow কম্পোজেবল ফাংশন, বিভাগগুলি কীভাবে দেখাতে হবে তা নির্ধারণ করে। নিচের ফাংশনে, LazyRow দেখায় যে কীভাবে LazyColumn-এর এই অনুভূমিক ভার্সনটি একইভাবে LazyListScope.() -> Unit ব্লক সহ একটি অনুভূমিক তালিকা সংজ্ঞায়িত করতে, প্রদত্ত DSL-কে কল করে ব্যবহার করা হয়:

@Composable
fun SectionRow(
    section: Section,
    modifier: Modifier = Modifier,
    onItemSelected: (Movie) -> Unit = {},
) {
    Text(
        text = section.title,
        style = MaterialTheme.typography.headlineSmall,
    )
    MovieCatalog(
        section.movieList,
        onClick = { movie -> onItemSelected(movie) },
        modifier
    )
}

@Composable
fun MovieCatalog(
    movies: List<Movie>,
    onClick: (Movie) -> Unit,
    modifier: Modifier = Modifier,
) {
    LazyRow(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(movies.size) { index ->
            val movie = movies[index]
            MovieCard(
                movie = movie,
                onClick = { onClick(movie) }
            )
        }
    }
}

SectionRow কম্পোজ করার উপযুক্ত আইটেমে, Text কম্পোনেন্ট ব্যবহার করা হয়। Material Design-এ সংজ্ঞায়িত টেক্সট ও অন্যান্য কম্পোনেন্ট tv-material লাইব্রেরিতে অফার করা হয়। আপনি Material Design-এ যেভাবে টেক্সটের স্টাইল নির্দিষ্ট করা হয়েছে তা MaterialTheme অবজেক্টের মাধ্যমে পরিবর্তন করতে পারবেন। এই অবজেক্টটিও tv-material লাইব্রেরি প্রদান করে। Card হল টিভি-মেটেরিয়াল লাইব্রেরির অংশ। MovieCard নিম্নলিখিত স্নিপেট হিসেবে সংজ্ঞায়িত ক্যাটালগে প্রতিটি সিনেমার ডেটা কীভাবে রেন্ডার করা হয় তা সংজ্ঞায়িত করে:

@OptIn(ExperimentalMaterial3Api::class)
@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 হিসেবে পাস করা যেতে পারে। ডিসপ্লে করা আইটেমের ইন্ডেক্স নম্বরটি ল্যাম্বডাকে দেওয়া হয়েছে। আপনি প্রদত্ত ইন্ডেক্স ভ্যালু দিয়ে দেখানো আইটেম নির্ধারণ করতে পারবেন:

Carousel লেজি লিস্টের আইটেম হতে পারে, যেমন LazyColumn। নিচের স্নিপেটে FeaturedCarousel কম্পোজ করার উপযুক্ত আইটেমকে সব SectionRow কম্পোজ করার উপযুক্ত আইটেমের উপরে দেখানো হয়েছে: