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

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

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

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

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

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

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

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

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

• ফিচার করা কন্টেন্টের তালিকা।
• বিভাগের তালিকা।
• একটি মডিফায়ার অবজেক্ট।
• একটি কলব্যাক ফাংশন, যা স্ক্রিন ট্রানজিশন ট্রিগার করে।

UI এলিমেন্ট সেট করা

Compose for TV-তে লেজি লিস্টের সুবিধা আছে, এটি এমন একটি কম্পোনেন্ট যা অনেক আইটেম (বা অজানা দৈর্ঘ্যের তালিকা) দেখায়। বিভাগগুলি উল্লম্বভাবে সাজাতে 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)
        }
    }
}
TvMoviesActivity.kt

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

@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
    )
}
TvMoviesActivity.kt

@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) }
            )
        }
    }
}
TvMoviesActivity.kt

SectionRow কম্পোজেবলে, Text কম্পোনেন্ট ব্যবহার করা হয়। মেটেরিয়াল ডিজাইনে সংজ্ঞায়িত টেক্সট এবং অন্যান্য কম্পোনেন্ট tv-material লাইব্রেরিতে অফার করা হয়। আপনি 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,
        )
    }
}
TvMoviesActivity.kt

মনে রাখবেন: AsyncImage হল একটি কম্পোজেবল যা ইন্টারনেট থেকে একটি ছবি লোড করে। আরও জানতে ছবি লোড করা দেখুন।

ফিচার করা কন্টেন্ট হাইলাইট করুন

আগে বর্ণনা করা উদাহরণে, সব সিনেমা সমানভাবে দেখানো হয়েছে। এগুলির ক্ষেত্রফল একই, এদের মধ্যে কোনও দৃশ্যমান পার্থক্য নেই। আপনি Carousel-এর মাধ্যমে এর মধ্যে কিছু হাইলাইট করতে পারবেন।

ক্যারোজেল আইটেমের সেটে তথ্য দেখায় যা স্লাইড, ফেড বা ভিউতে সরানো যেতে পারে। আপনি এই কম্পোনেন্ট ব্যবহার করে ফিচার করা কন্টেন্ট হাইলাইট করতে পারেন, যেমন নতুন উপলভ্য সিনেমা বা টিভি প্রোগ্রামের নতুন পর্ব।

Carousel আশা করে যে আপনি অন্তত ক্যারোজেলে থাকা আইটেমের সংখ্যা এবং প্রতিটি আইটেম কীভাবে আঁকতে হবে তা নির্দিষ্ট করবেন। প্রথমটি itemCount দিয়ে নির্দিষ্ট করা যেতে পারে। দ্বিতীয়টি lambda হিসেবে পাস করা যেতে পারে। দেখানো আইটেমের ইন্ডেক্স নম্বর ল্যাম্বডাকে দেওয়া হয়েছে। প্রদত্ত ইন্ডেক্স ভ্যালু ব্যবহার করে আপনি দেখানো আইটেম নির্ধারণ করতে পারবেন:

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun 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.movie_placeholder
                ),
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxSize()
            )
            Text(text = content.title)
        }
    }
}
TvMoviesActivity.kt

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

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun CatalogBrowser(
    featuredContentList: List<Movie>,
    sectionList: List<Section>,
    modifier: Modifier = Modifier,
    onItemSelected: (Movie) -> Unit = {},
) {
    LazyColumn(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        item {
            FeaturedCarousel(featuredContentList)
        }

        items(sectionList) { section ->
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}
TvMoviesActivity.kt