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

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

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

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

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

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

يوفّر Compose for TV قوائم مؤجّلة، وهي مكوّن لعرض عدد كبير من العناصر (أو قائمة غير معروفة الطول). استخدِم LazyColumn لوضع الأقسام عموديًا. LazyColumn يوفّر LazyListScope.() -> Unit كتلة، التي تقدّم لغة نطاق خاصة (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 كيفية عرض الأقسام. في الدالة التالية، 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. يتم توفير النص والمكوّنات الأخرى المحدّدة في التصميم المتعدد الأبعاد في مكتبة tv-material . يمكنك تغيير نمط النصوص كما هو محدّد في التصميم المتعدد الأبعاد من خلال الرجوع إلى الكائن MaterialTheme. يتم توفير هذا الكائن أيضًا من خلال مكتبة tv-material. Card هو جزء من مكتبة tv-material. تحدّد MovieCard كيفية عرض بيانات كل فيلم في الكتالوج المحدّد على النحو التالي:

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

إبراز المحتوى المميّز

في المثال الموضّح سابقًا، يتم عرض جميع الأفلام بشكل متساوٍ. ولها المساحة نفسها، ولا يوجد اختلاف مرئي بينها. يمكنك إبراز بعضها باستخدام Carousel.

تعرض `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 أعلى جميع الدوال البرمجية المركّبة 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)
    }
  }
}