برنامه رسانهای که در تلویزیون اجرا میشود باید به کاربران اجازه دهد محتوای ارائهشده را مرور کنند، انتخاب کنند، و پخش محتوا را شروع کنند. تجربه مرور محتوا برای برنامههایی از این نوع باید شهودی، و ازنظر بصری خوشایند و جذاب باشد.
مرورگرهای کاتالوگ معمولاً از چند بخش تشکیل شدهاند و هر بخش فهرستی از محتوای رسانهای دارد. نمونههایی از بخشهای کاتالوگ رسانه عبارتاند از: فهرستهای پخش، محتوای ویژه، دستههای توصیهشده.
از عملکردهای ارائهشده توسط Compose ویژه Android TV برای پیادهسازی میانای کاربر برای مرور موسیقی یا ویدیو از کاتالوگ رسانه برنامهتان استفاده کنید.
ایجاد تابع ترکیبپذیر برای کاتالوگ
هر چیزی که در نمایشگر نشان داده میشود بهعنوان تابع ترکیبپذیر در Compose ویژه Android TV پیادهسازی میشود. با تعریف کردن تابع ترکیبپذیر برای مرورگر کاتالوگ رسانه شروع کنید:
@Composable fun CatalogBrowser( featuredContentList: List<Movie>, sectionList: List<Section>, modifier: Modifier = Modifier, onItemSelected: (Movie) -> Unit = {}, ) { // ToDo: add implementation }
CatalogBrowser تابع ترکیبپذیری است که مرورگر کاتالوگ رسانه شما را پیادهسازی میکند. این تابع متغیرهای مستقل زیر را میگیرد:
- فهرست محتوای ویژه.
- فهرست بخشها.
- شیء Modifier.
- تابع بازخوانی که انتقال صفحه را راهاندازی میکند.
تنظیم عناصر میانای کاربر
Compose ویژه Android 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 با فراخوانی
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 استفاده میشود.
نوشتار و مؤلفههای دیگر
تعریفشده در «طراحی مواد» در کتابخانه tv-material ارائه میشود . میتوانید
سبک نوشتارها را همانطور که در Material Design تعریف شده است با مراجعه به
شیء 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, ) } }
برجسته کردن محتوای ویژه
در مثالی که قبلاً توضیح داده شد، همه فیلمها بهطور یکسان نمایش داده میشوند.
مساحت یکسانی دارند و هیچ تفاوت ظاهری بین آنها وجود ندارد.
میتوانید برخیاز آنها را با 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) } } }
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) } } }