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

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

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

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

استخدِم الوظائف التي يوفّرها Compose for TV لاستخدام واجهة المستخدم لتصفّح الموسيقى أو الفيديوهات من كتالوج الوسائط في تطبيقك.

إنشاء دالة قابلة للإنشاء للكتالوج

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

@Composable
fun CatalogBrowser(
   featuredContentList: List<Movie>,
   sectionList: List<Section>,
   modifier: Modifier = Modifier,
   onItemSelected: (Movie) -> Unit = {},
) {
// ToDo: add implementation
}

CatalogBrowser هي الوظيفة القابلة للإنشاء التي تنفّذ متصفّح كتالوج الوسائط الخاص بك. تستخدم الدالة الوسيطات التالية:

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

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

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

@Composable
fun CatalogBrowser(
   featuredContentList: List<Movie>,
   sectionList: List<Section>,
   modifier: Modifier = Modifier,
   onItemSelected: (Movie) -> Unit = {},
) {
  TvLazyColumn(
    modifier = modifier.fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(16.dp)
  ) {
    items(sectionList) { section ->
      Section(section, onItemSelected = onItemSelected)
    }
  }
}

في المثال، تحدِّد دالة Section القابلة للإنشاء كيفية عرض الأقسام. في الدالة التالية، توضح TvLazyRow كيف يتم استخدام هذا الإصدار الأفقي من TvLazyColumn بشكل مشابه لتحديد قائمة أفقية مع كتلة TvLazyListScope.() -> Unit من خلال استدعاء مصدر DSL المقدَّم:

@Composable
fun Section(
  section: Section,
  modifier: Modifier = Modifier,
  onItemSelected: (Movie) -> Unit = {},
) {
  Text(
    text = section.title,
    style = MaterialTheme.typography.headlineSmall,
  )
  TvLazyRow(
     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. يتم منح رقم الفهرس للعنصر المعروض إلى 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)
    }
  }
}