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

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

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

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

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

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

توفّر Compose for TV قوائم غير نشطة، وهي مكوّن لعرض عدد كبير من العناصر (أو قائمة بطول غير معروف). استخدِم الدالة 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)
    }
  }
}