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

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

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

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

הערה: AsyncImage הוא קומפוזיציה שמעלה תמונה מהאינטרנט. פרטים נוספים זמינים במאמר בנושא טעינת תמונות.

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

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

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

‫Carousel מצפה שתציינו לפחות את מספר הפריטים שיש בקרוסלה ואיך לצייר כל פריט. אפשר לציין את הראשון באמצעות itemCount. אפשר להעביר את השני כ-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