יצירת דפדפן של קטלוג

אפליקציית מדיה שפועלת בטלוויזיה צריכה לאפשר למשתמשים לעיין בתוכן שלה הצעות, לבחור ומתחילים לשחק תוכן. התוכן שמעיינים בתוכן עבור אפליקציות מהסוג הזה צריכה להיות פשוטה, אינטואיטיבית ומראה מהנה ומעניין.

דפדפן קטלוג מדיה בדרך כלל מורכב מכמה קטעים, וכל אחד מהם כולל רשימה של תוכן מדיה. דוגמאות לקטעים בקטלוג מדיה: פלייליסטים, תוכן מוצג, קטגוריות מומלצות.

איור 1. מסך אופייני של קטלוג. המשתמשים יכולים לעיין בנתונים של קטלוג הסרטונים.

להשתמש בפונקציות של 'פיתוח נייטיב' לטלוויזיה כדי להטמיע משתמש ממשק לדפדוף במוזיקה או בסרטונים מקטלוג המדיה של האפליקציה.

יצירת פונקציה קומפוזבילית לקטלוג

כל מה שמופיע במסך מיושם כפונקציה קומפוזבילית כתיבת הודעה לטלוויזיה. מתחילים מהגדרה של תוכן קומפוזבילי של הדפדפן לקטלוג המדיה:

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

CatalogBrowser היא הפונקציה הקומפוזבילית שמטמיעה את קטלוג המדיה שלך בדפדפן. הפונקציה לוקחת את הארגומנטים הבאים:

  • רשימה של תוכן מוצג.
  • רשימת הקטעים.
  • אובייקט מגביל.
  • פונקציית קריאה חוזרת (callback), שמפעילה מעבר מסך.

הגדרת רכיבים בממשק המשתמש

הפיצ'ר 'פיתוח נייטיב לטלוויזיה' כולל רשימות עצלות, רכיב שמאפשר להציג מספר הפריטים (או רשימה באורך לא ידוע). שיחת טלפון LazyColumn כדי למקם קטעים במאונך. LazyColumn מספק LazyListScope.() -> Unit בלוק, שמציע DSL להגדרת תוכן של פריטים. בדוגמה הבאה, כל קטע ממוקם ברשימה אנכית עם פער של 16dp בין הקטעים:

@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. האובייקט הזה מסופק גם על ידי ספריית 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,
     )
   }
}

הדגשת תוכן מומלץ

בדוגמה שתיארנו קודם, כל הסרטים מוצגים באופן שווה. יש להם אותו אזור, אין הבדל חזותי ביניהם. אפשר להדגיש חלק מהן באמצעות 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)
    }
  }
}
הקודם
הנושאים במדריך:
הבא
בניית מסך פרטים