برنامه رسانهای که در تلویزیون اجرا میشود باید به کاربران اجازه دهد محتوای پیشنهادیاش را مرور کنند، انتخاب کنند، و پخش محتوا را شروع کنند. تجربه مرور محتوا برای برنامههای این نوع باید شهودی، ازنظر بصری دلپذیر و جذاب باشد.
مرورگرهای کاتالوگ معمولاً از چندین بخش تشکیل شدهاند و هر بخش دارای فهرستی از محتوای رسانهای است. نمونههایی از بخشهای کاتالوگ رسانه عبارتاند از: فهرستهای پخش، محتوای ویژه، دستههای توصیهشده.
از عملکردهای ارائهشده توسط «نوشتن برای تلویزیون» برای پیادهسازی میانای کاربر برای مرور موسیقی یا ویدیو از کاتالوگ رسانهای برنامهتان استفاده کنید.
ایجاد تابع ترکیبی برای کاتالوگ
هر چیزی که در نمایشگر نشان داده میشود بهعنوان یک تابع ترکیبشدنی در 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 مشخص کرد. دومی را میتوان بهعنوان لامبدا ارسال کرد. شماره نمایشی مورد نمایشدادهشده به لامبدا داده میشود. میتوانید مورد نمایشدادهشده را با مقدار نمایه
ارائهشده تعیین کنید:
@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) } } }
Carousel میتواند یکی از موارد فهرست تنبل باشد، مثل LazyColumn.
تکه کد زیر FeaturedCarousel ترکیبپذیر را در بالای
همه 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) } } }