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