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

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

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

استخدِم الدوال التي يوفّرها 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 وحدة بكسل مستقل الكثافة بين الأقسام:

@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 هو جزء من مكتبة 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 تحديد عدد العناصر التي تتضمّنها لوحة العرض الدوّارة على الأقل وكيفية رسم كل عنصر. يمكن تحديد الأول باستخدام 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)
    }
  }
}