Tạo trình duyệt danh mục

Ứng dụng đa phương tiện chạy trên TV cần cho phép người dùng duyệt xem nội dung, lựa chọn và bắt đầu phát nội dung. Trải nghiệm duyệt xem nội dung cho các ứng dụng thuộc loại này phải trực quan, hấp dẫn và đẹp mắt.

Trình duyệt danh mục thường bao gồm một số phần và mỗi phần có một danh sách nội dung nghe nhìn. Ví dụ về các mục trong danh mục nội dung nghe nhìn bao gồm: danh sách phát, nội dung nổi bật, danh mục đề xuất.

Hình 1. Màn hình danh mục thông thường. Người dùng có thể duyệt xem dữ liệu danh mục video.

Sử dụng các hàm do Compose cho TV cung cấp để triển khai giao diện người dùng nhằm duyệt xem nhạc hoặc video trong danh mục nội dung nghe nhìn của ứng dụng.

Tạo hàm composable cho danh mục

Mọi nội dung xuất hiện trên màn hình đều được triển khai dưới dạng hàm composable trong Compose cho TV. Bắt đầu bằng cách xác định một hàm có khả năng kết hợp cho trình duyệt danh mục nội dung nghe nhìn:

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

CatalogBrowser là hàm composable triển khai trình duyệt danh mục nội dung nghe nhìn của bạn. Hàm này nhận các đối số sau:

  • Danh sách nội dung nổi bật.
  • Danh sách các mục.
  • Đối tượng Modifier.
  • Hàm callback kích hoạt hiệu ứng chuyển đổi màn hình.

Đặt các phần tử trên giao diện người dùng

Compose cho TV cung cấp danh sách tải từng phần, một thành phần để hiển thị một số lượng lớn các mục (hoặc một danh sách có độ dài không xác định). Gọi LazyColumn để đặt các mục theo chiều dọc. LazyColumn cung cấp một khối LazyListScope.() -> Unit, cung cấp DSL để xác định nội dung của mục. Trong ví dụ sau, mỗi phần được đặt trong một danh sách dọc với khoảng cách 16 dp giữa các phần:

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

Trong ví dụ này, hàm composable SectionRow xác định cách hiển thị các phần. Trong hàm sau, LazyRow minh hoạ cách sử dụng phiên bản ngang này của LazyColumn để xác định danh sách ngang có khối LazyListScope.() -> Unit bằng cách gọi DSL được cung cấp:

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

Trong composable SectionRow, thành phần Text được sử dụng. Văn bản và các thành phần khác được xác định trong Material Design được cung cấp trong thư viện tv-material . Bạn có thể thay đổi kiểu văn bản như được xác định trong Material Design bằng cách tham chiếu đến đối tượng MaterialTheme. Đối tượng này cũng được cung cấp bởi thư viện tv-material. Card là một phần của thư viện tv-material. MovieCard xác định cách hiển thị từng dữ liệu phim trong danh mục được xác định như đoạn mã sau:

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

Nêu bật nội dung nổi bật

Trong ví dụ được mô tả trước đó, tất cả phim đều được hiển thị như nhau. Chúng có cùng diện tích, không có sự khác biệt về mặt hình ảnh. Bạn có thể làm nổi bật một số thông tin bằng Carousel.

Băng chuyền hiển thị thông tin trong một tập hợp các mục có thể trượt, mờ dần hoặc di chuyển vào khung hiển thị. Bạn sử dụng thành phần này để làm nổi bật nội dung nổi bật, chẳng hạn như phim mới ra mắt hoặc tập mới của chương trình truyền hình.

Carousel yêu cầu bạn chỉ định ít nhất số lượng mục mà Băng chuyền có và cách vẽ từng mục. Bạn có thể chỉ định giá trị đầu tiên bằng itemCount. Bạn có thể truyền tham số thứ hai dưới dạng lambda. Số chỉ mục của mục hiển thị được cung cấp cho hàm lambda. Bạn có thể xác định mục hiển thị bằng giá trị chỉ mục đã cho:

Carousel có thể là một mục của danh sách tải từng phần, chẳng hạn như LazyColumn. Đoạn mã sau đây cho thấy composable FeaturedCarousel ở trên cùng của tất cả composable SectionRow:

Trước
Tạo bố cục TV
Tiếp
Tạo màn hình chi tiết