ایجاد مرورگر کاتالوگ

برنامه رسانه‌ای که در تلویزیون اجرا می‌شود باید به کاربران اجازه دهد محتوای ارائه‌شده را مرور کنند، انتخاب کنند، و پخش محتوا را شروع کنند. تجربه مرور محتوا برای برنامه‌هایی از این نوع باید شهودی، و ازنظر بصری خوشایند و جذاب باشد.

مرورگرهای کاتالوگ معمولاً از چند بخش تشکیل شده‌اند و هر بخش فهرستی از محتوای رسانه‌ای دارد. نمونه‌هایی از بخش‌های کاتالوگ رسانه عبارت‌اند از: فهرست‌های پخش، محتوای ویژه، دسته‌های توصیه‌شده.

شکل ۱. صفحه کاتالوگ معمولی. کاربران می‌توانند داده‌های کاتالوگ ویدیو را مرور کنند.

از عملکردهای ارائه‌شده توسط Compose ویژه Android TV برای پیاده‌سازی میانای کاربر برای مرور موسیقی یا ویدیو از کاتالوگ رسانه برنامه‌تان استفاده کنید.

ایجاد تابع ترکیب‌پذیر برای کاتالوگ

هر چیزی که در نمایشگر نشان داده می‌شود به‌عنوان تابع ترکیب‌پذیر در Compose ویژه Android TV پیاده‌سازی می‌شود. با تعریف کردن تابع ترکیب‌پذیر برای مرورگر کاتالوگ رسانه شروع کنید:

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

CatalogBrowser تابع ترکیب‌پذیری است که مرورگر کاتالوگ رسانه شما را پیاده‌سازی می‌کند. این تابع متغیرهای مستقل زیر را می‌گیرد:

  • فهرست محتوای ویژه.
  • فهرست بخش‌ها.
  • شیء Modifier.
  • تابع بازخوانی که انتقال صفحه را راه‌اندازی می‌کند.

تنظیم عناصر میانای کاربر

‫Compose ویژه Android TV فهرست‌های تنبل را ارائه می‌دهد، مؤلفه‌ای برای نمایش تعداد زیادی مورد (یا فهرستی با طول نامشخص). برای قرار دادن بخش‌ها به‌صورت عمودی، LazyColumn را فراخوانی کنید. LazyColumn یک بلوک LazyListScope.() -> Unit ارائه می‌دهد که یک DSL برای تعریف محتوای مورد ارائه می‌کند. در مثال زیر، هر بخش در یک فهرست عمودی با فاصله ۱۶ dp بین بخش‌ها قرار گرفته است:

@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)
        }
    }
}

در این مثال، تابع ترکیب‌پذیر 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
    )
}

@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) }
            )
        }
    }
}

در ترکیب‌پذیر SectionRow، از مؤلفه Text استفاده می‌شود. نوشتار و مؤلفه‌های دیگر تعریف‌شده در «طراحی مواد» در کتابخانه 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,
        )
    }
}

در مثالی که قبلاً توضیح داده شد، همه فیلم‌ها به‌طور یکسان نمایش داده می‌شوند. مساحت یکسانی دارند و هیچ تفاوت ظاهری بین آن‌ها وجود ندارد. می‌توانید برخی‌از آن‌ها را با Carousel برجسته کنید.

«گردونه» اطلاعات را در مجموعه‌ای از موارد نمایش می‌دهد که می‌توانند بلغزند، محو شوند، یا به‌نمایش درآیند. از این مؤلفه برای برجسته کردن محتوای ویژه استفاده می‌کنید، مثلاً فیلم‌های جدیداً دردسترس قرارگرفته یا قسمت‌های جدید برنامه‌های تلویزیونی.

Carousel از شما انتظار دارد که حداقل تعداد مواردی را که «گردونه» دارد و نحوه ترسیم هر مورد را مشخص کنید. مورد اول را می‌توان با itemCount مشخص کرد. دومی می‌تواند به‌عنوان lambda ارسال شود. شماره نمایه مورد نمایش‌داده‌شده به لامبدا داده می‌شود. می‌توانید مورد نمایش‌داده‌شده را با مقدار نمایه ارائه‌شده تعیین کنید:

Carousel می‌تواند موردی از فهرست تنبل باشد، مثل LazyColumn. قطعه کد زیر ترکیب‌پذیر FeaturedCarousel را در بالای همه ترکیب‌پذیرهای SectionRow نشان می‌دهد: