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

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

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

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

از عملکردهای ارائه‌شده توسط «نوشتن برای تلویزیون» برای پیاده‌سازی میانای کاربر برای مرور موسیقی یا ویدیو از کاتالوگ رسانه‌ای برنامه‌تان استفاده کنید.

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

هر چیزی که در نمایشگر نشان داده می‌شود به‌عنوان یک تابع ترکیب‌شدنی در Compose for TV پیاده‌سازی می‌شود. با تعریف کردن یک تابع ترکیبی برای مرورگر کاتالوگ رسانه شروع کنید:

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

‫CatalogBrowser تابع ترکیبی است که مرورگر کاتالوگ رسانه‌ای شما را پیاده‌سازی می‌کند. این تابع آرگومان‌های زیر را می‌گیرد:

  • فهرست محتوای ویژه.
  • فهرست بخش‌ها.
  • شیء «اصلاح‌گر».
  • تابع بازخوانی که باعث راه‌اندازی انتقال صفحه می‌شود.

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

‫Compose for TV فهرست‌های تنبل را ارائه می‌دهد، عنصری برای نمایش تعداد زیادی از موارد (یا فهرستی با طول نامشخص). برای قرار دادن بخش‌ها به‌صورت عمودی، 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.size) { index ->
            val section = sectionList[index]
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}

در این مثال، تابع ترکیبی SectionRow نحوه نمایش بخش‌ها را تعریف می‌کند. در تابع زیر، LazyRow نشان می‌دهد که چگونه از این نسخه افقی LazyColumn به‌طور مشابه برای تعریف فهرست افقی با بلوک 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
    )
}

@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 استفاده می‌شود. نوشتار و دیگر عناصر تعریف‌شده در «طراحی سه‌بعدی» در کتابخانه tv-material ارائه می‌شود . با مراجعه به شیء MaterialTheme می‌توانید سبک نوشتارها را همان‌گونه که در «طراحی Material» تعریف شده است تغییر دهید. این شیء را کتابخانه 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 مشخص کرد. دومی را می‌توان به‌عنوان لامبدا ارسال کرد. شماره نمایشی مورد نمایش‌داده‌شده به لامبدا داده می‌شود. می‌توانید مورد نمایش‌داده‌شده را با مقدار نمایه ارائه‌شده تعیین کنید:

Carousel می‌تواند یکی از موارد فهرست تنبل باشد، مثل LazyColumn. تکه کد زیر FeaturedCarousel ترکیب‌پذیر را در بالای همه SectionRow ترکیب‌پذیرها نشان می‌دهد: