‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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

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

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

**תרשים 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
}TvMoviesActivity.kt

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

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

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

ב-Compose for TV יש רשימות בטעינה מדורגת, רכיב להצגת מספר גדול של פריטים (או רשימה באורך לא ידוע). מפעילים את הפונקציה 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.size) { index ->
            val section = sectionList[index]
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}TvMoviesActivity.kt

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

@Composable
fun SectionRow(
    section: Section,
    modifier: Modifier = Modifier,
    onItemSelected: (Movie) -> Unit = {},
) {
    Text(
        text = section.title,
        style = MaterialTheme.typography.headlineSmall,
    )
    MovieCatalog(
        section.movieList,
        onClick = { movie -> onItemSelected(movie) },
        modifier
    )
}TvMoviesActivity.kt

@Composable
fun MovieCatalog(
    movies: List<Movie>,
    onClick: (Movie) -> Unit,
    modifier: Modifier = Modifier,
) {
    LazyRow(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(movies.size) { index ->
            val movie = movies[index]
            MovieCard(
                movie = movie,
                onClick = { onClick(movie) }
            )
        }
    }
}TvMoviesActivity.kt

ב-SectionRow הקומפוזבילי, נעשה שימוש ברכיב Text. טקסט ורכיבים אחרים שמוגדרים ב-Material Design מוצעים בספריית tv-material . אפשר לשנות את סגנון הטקסטים כפי שמוגדר ב-Material Design על ידי הפניה לאובייקט MaterialTheme. האובייקט הזה מסופק גם על ידי הספרייה tv-material. ‫Card הוא חלק מהספרייה tv-material. MovieCard מגדיר איך הנתונים של כל סרט מוצגים בקטלוג, כפי שמוגדר בקטע הקוד הבא:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MovieCard(
    movie: Movie,
    modifier: Modifier = Modifier,
    onClick: () -> Unit = {}
) {
    Card(
        modifier = modifier,
        onClick = onClick
    ) {
        AsyncImage(
            model = movie.thumbnailUrl,
            contentDescription = movie.title,
        )
    }
}TvMoviesActivity.kt

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

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

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

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

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun 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.movie_placeholder
                ),
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxSize()
            )
            Text(text = content.title)
        }
    }
}TvMoviesActivity.kt

‫Carousel יכול להיות פריט ברשימה בטעינה מדורגת, כמו LazyColumn. בקטע הקוד הבא מוצג רכיב קומפוזבילי מסוג FeaturedCarousel מעל כל הרכיבים הקומפוזביליים מסוג SectionRow:

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
fun CatalogBrowser(
    featuredContentList: List<Movie>,
    sectionList: List<Section>,
    modifier: Modifier = Modifier,
    onItemSelected: (Movie) -> Unit = {},
) {
    LazyColumn(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        item {
            FeaturedCarousel(featuredContentList)
        }

        items(sectionList) { section ->
            SectionRow(section, onItemSelected = onItemSelected)
        }
    }
}TvMoviesActivity.kt

יצירת פריסות לטלוויזיה

בניית מסך פרטים

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

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

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

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

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