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

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

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

الشكل 1. شاشة الكتالوج المعتادة يمكن للمستخدمين تصفُّح بيانات كتالوج الفيديوهات.

استخدام الوظائف التي يوفرها 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 يوفر خيار 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 في مكتبة المواد التلفزيونية . يمكنك تغيير النصوص كما هو موضح في Material Design من خلال الرجوع إلى MaterialTheme. يتم توفير هذا العنصر أيضًا من خلال مكتبة مواد التلفزيون. 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. رقم الفهرس للعنصر المعروض هو تُعطى لللمدا. يمكنك تحديد العنصر المعروض باستخدام قيمة الفهرس المقدمة:

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