إنشاء متصفِّح كتالوج

يجب أن يسمح تطبيق الوسائط الذي يتم تشغيله على التلفزيون للمستخدمين بتصفّح محتوى التطبيق واختيار المحتوى وبدء تشغيله. يجب أن تكون تجربة تصفُّح المحتوى في التطبيقات من هذا النوع بسيطة وسهلة الاستخدام وممتعة ومفيدة من الناحية المرئية.

يتكون متصفّح قائمة الوسائط عادةً من عدة أقسام، ويحتوي كل قسم على قائمة بمحتوى الوسائط. تشمل أمثلة الأقسام في كتالوج الوسائط ما يلي: قوائم التشغيل والمحتوى المميّز والفئات المقترَحة.

الشكل 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 هي الدالة المركّبة التي تنفِّذ متصفح كتالوج الوسائط. تأخذ الدالة الوسيطات التالية:

• قائمة بالمحتوى المميّز
• قائمة الأقسام
• عنصر مُعدِّل
• دالة ردّ اتصال تؤدي إلى انتقال الشاشة

ضبط عناصر واجهة المستخدم

يوفّر وضع "الإنشاء للتلفزيون" قوائم بطيئة التحميل، وهي مكوّن لعرض عددٍ كبيرٍ من العناصر (أو قائمة بطول غير معروف). اضغط على رمز LazyColumn لوضع الأقسام عموديًا. يوفّر LazyColumn LazyListScope.() -> Unit قالبًا يقدّم لغة وصفية بسيطة لتحديد محتوى السلع. في المثال التالي، يتم وضع كل قسم في قائمة عمودية مع ترك مسافة 16 نقطة شاشة بين الأقسام:

@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 كيفية عرض الأقسام. في الدالة التالية، توضِّح 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، يتم استخدام المكوّن Text. يتم توفير النص والمكونات الأخرى المحدّدة في Material Design في مكتبة tv-material . يمكنك تغيير نمط النصوص على النحو المحدّد في Material Design من خلال الإشارة إلى عنصر 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 يُفترض أن تحدِّد على الأقل عدد العناصر التي تتضمّنها لوحة العرض الدوّارة وكيفية رسم كل عنصر. يمكن تحديد العنصر الأول باستخدام itemCount. يمكن تمرير الوسيطة الثانية كوسيطة lambda. يتم منح العنصر lambda رقم الفهرس للعنصر المعروض. يمكنك تحديد العنصر المعروض باستخدام قيمة الفهرس المحدّدة:

@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 عنصرًا قابلاً للتجميع أعلى جميع العناصر القابلة للتجميع Section:

@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)
    }
  }
}