این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

یک مرورگر کاتالوگ ایجاد کنید

یک برنامه رسانه‌ای که روی تلویزیون اجرا می‌شود، باید به کاربران اجازه دهد تا محتوای پیشنهادی آن را مرور کنند، انتخاب کنند و شروع به پخش محتوا کنند. تجربه مرور محتوا برای برنامه‌هایی از این نوع باید بصری، از نظر بصری دلپذیر و جذاب باشد.

مرورگرهای کاتالوگ معمولاً از چندین بخش تشکیل شده‌اند و هر بخش فهرستی از محتوای رسانه‌ای دارد. نمونه‌هایی از بخش‌های موجود در یک کاتالوگ رسانه‌ای عبارتند از: لیست‌های پخش، محتوای ویژه، دسته‌های پیشنهادی.

**شکل ۱.** صفحه نمایش کاتالوگ معمولی. کاربران می‌توانند داده‌های کاتالوگ ویدیویی را مرور کنند.

از توابع ارائه شده توسط 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 تابعی قابل ترکیب است که مرورگر کاتالوگ رسانه شما را پیاده‌سازی می‌کند. این تابع آرگومان‌های زیر را دریافت می‌کند:

فهرست محتوای ویژه.
فهرست بخش‌ها.
یک شیء اصلاح‌کننده (Modifier).
یک تابع فراخوانی (callback function) که باعث تغییر صفحه نمایش می‌شود.

تنظیم عناصر رابط کاربری

کامپوننت Compose for TV لیست‌های تنبل (lazy lists) را ارائه می‌دهد، کامپوننتی برای نمایش تعداد زیادی آیتم (یا لیستی با طول نامشخص). برای قرار دادن بخش‌ها به صورت عمودی، LazyColumn را فراخوانی کنید. LazyColumn یک بلوک LazyListScope.() -> Unit ارائه می‌دهد که یک DSL برای تعریف محتوای آیتم ارائه می‌دهد. در مثال زیر، هر بخش در یک لیست عمودی با فاصله 16 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.size) { index ->
            val section = sectionList[index]
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}TvMoviesActivity.kt

در مثال، تابع ترکیبی 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
    )
}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 بخشی از کتابخانه tv-material است. 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

محتوای ویژه را برجسته کنید

در مثالی که قبلاً توضیح داده شد، همه فیلم‌ها به طور مساوی نمایش داده می‌شوند. آن‌ها مساحت یکسانی دارند و هیچ تفاوت بصری بین آن‌ها وجود ندارد. می‌توانید برخی از آن‌ها را با Carousel هایلایت کنید.

چرخ و فلک اطلاعات را در مجموعه‌ای از آیتم‌ها نمایش می‌دهد که می‌توانند به صورت کشویی، محو یا متحرک نمایش داده شوند. شما از این کامپوننت برای برجسته کردن محتوای برجسته، مانند فیلم‌های تازه منتشر شده یا قسمت‌های جدید برنامه‌های تلویزیونی استفاده می‌کنید.

Carousel از شما انتظار دارد که حداقل تعداد آیتم‌هایی که Carousel دارد و نحوه‌ی نمایش هر آیتم را مشخص کنید. مورد اول را می‌توان با itemCount مشخص کرد. مورد دوم را می‌توان به عنوان یک lambda ارسال کرد. شماره‌ی اندیس آیتم نمایش داده شده به lambda داده می‌شود. می‌توانید آیتم نمایش داده شده را با مقدار اندیس داده شده تعیین کنید:

) }

@OptIn(ExperimentalTvMaterial3Api::class) >@Composable >fun FeaturedCarousel( featuredContentList: List<Movie>, modifier: Modifier = Modifier, class="devsite-syntax-w"> { 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) } } class="devsite-github-link nocode no-select nocontent">TvMoviesActivity.kt

Carousel می‌تواند یک آیتم از یک لیست lazy مانند TvLazyColumn باشد. قطعه کد زیر FeaturedCarousel composable را روی تمام Composableهای SectionRow نشان می‌دهد:

@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

یک تابع ترکیبی برای کاتالوگ ایجاد کنید

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

فهرست محتوای ویژه.
فهرست بخش‌ها.
یک شیء اصلاح‌کننده (Modifier).
یک تابع فراخوانی (callback function) که باعث تغییر صفحه نمایش می‌شود.

تنظیم عناصر رابط کاربری

@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

@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

@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

محتوای ویژه را برجسته کنید

@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

@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

قبلی

در این راهنما

بعدی

یک صفحه نمایش جزئیات بسازید

یک مرورگر کاتالوگ ایجاد کنید با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

یک تابع ترکیبی برای کاتالوگ ایجاد کنید

تنظیم عناصر رابط کاربری

محتوای ویژه را برجسته کنید

یک تابع ترکیبی برای کاتالوگ ایجاد کنید

تنظیم عناصر رابط کاربری

محتوای ویژه را برجسته کنید

یک مرورگر کاتالوگ ایجاد کنید