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

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

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

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

از عملکردهای ارائه شده توسط Compose for TV برای پیاده سازی یک رابط کاربری برای مرور موسیقی یا ویدیو از کاتالوگ رسانه برنامه خود استفاده کنید.

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

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

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

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

• فهرست مطالب برجسته
• لیست بخش ها
• یک شیء اصلاح کننده.
• یک عملکرد برگشت به تماس، که باعث انتقال صفحه می شود.

تنظیم عناصر UI

نوشتن برای تلویزیون فهرست‌های تنبل، مؤلفه‌ای برای نمایش تعداد زیادی آیتم (یا فهرستی با طول نامعلوم) ارائه می‌دهد. برای قرار دادن بخش ها به صورت عمودی LazyColumn فراخوانی کنید. LazyColumn یک LazyListScope.() -> Unit block، که یک 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) { section ->
      Section(section, onItemSelected = onItemSelected)
    }
  }
}

در مثال، تابع Section composable نحوه نمایش بخش ها را تعریف می کند. در تابع زیر، LazyRow نشان می دهد که چگونه این نسخه افقی LazyColumn به طور مشابه برای تعریف یک لیست افقی با LazyListScope.() -> Unit با فراخوانی DSL ارائه شده:

@Composable
fun Section(
  section: Section,
  modifier: Modifier = Modifier,
  onItemSelected: (Movie) -> Unit = {},
) {
  Text(
    text = section.title,
    style = MaterialTheme.typography.headlineSmall,
  )
  LazyRow(
     modifier = modifier,
     horizontalArrangement = Arrangement.spacedBy(8.dp)
  ) {
    items(section.movieList){ movie ->
    MovieCard(
         movie = movie,
         onClick = { onItemSelected(movie) }
       )
    }
  }
}

در Section composable از کامپوننت Text استفاده شده است. متن و سایر اجزای تعریف شده در طراحی متریال در کتابخانه tv-material ارائه شده است. شما می توانید با مراجعه به شی MaterialTheme ، سبک متون را همانطور که در طراحی متریال تعریف شده است، تغییر دهید. این شی نیز توسط کتابخانه tv-material ارائه شده است. Card بخشی از کتابخانه مواد تلویزیونی است. MovieCard نحوه نمایش داده های هر فیلم را در کاتالوگ تعریف می کند که به صورت قطعه زیر تعریف شده است:

@Composable
fun MovieCard(
   movie: Movie,
   modifier: Modifier = Modifier,
   onClick: () -> Unit = {}
) {
   Card(modifier = modifier, onClick = onClick){
    AsyncImage(
       model = movie.thumbnailUrl,
       contentDescription = movie.title,
     )
   }
}

توجه: AsyncImage یک فایل ترکیبی است که یک تصویر را از اینترنت بارگیری می کند. برای جزئیات به بارگیری تصاویر مراجعه کنید.

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

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

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

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

@Composable
function 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.placeholder
        ),
        contentScale = ContentScale.Crop,
        modifier = Modifier.fillMaxSize()
      )
      Text(text = content.title)
    }
  }
}

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

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

    item {
      FeaturedCarousel(featuredContentList)
    }

    items(sectionList) { section ->
      Section(section, onItemSelected = onItemSelected)
    }
  }
}