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 các nội dung mà ứng dụng cung cấp, chọn nội dung 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 đơn giản, trực quan, hấp dẫn và đẹp mắt.

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

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 từ danh mục nội dung truyền thông của ứng dụng.

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

Mọi thứ 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 hàm có khả năng kết hợp cho trình duyệt danh mục nội dung truyền thông:

@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 truyền thông. Hàm này có các đối số sau:

• Danh sách nội dung nổi bật.
• Danh sách các phần.
• Đối tượng Modifier.
• Hàm callback kích hoạt quá trình chuyển đổi màn hình.

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

Compose cho TV cung cấp danh sách trì hoãn, một thành phần để hiển thị số lượng lớn mục (hoặc danh sách có độ dài không xác định). Gọi LazyColumn để đặt các phần theo chiều dọc. LazyColumn cung cấp một LazyListScope.() -> Unit khối, khối này 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 có 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) { section ->
      Section(section, onItemSelected = onItemSelected)
    }
  }
}

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

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

Trong thành phần kết hợp Section, thành phần Text được 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 khảo đối tượng MaterialTheme. Đối tượng này cũng do thư viện tv-material cung cấp. 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 là đoạn mã sau:

@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ả các bộ 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 giữa chúng. Bạn có thể nêu bật một số bộ phim bằng Carousel.

Carousel 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 để nêu bật nội dung nổi bật, chẳng hạn như phim mới phát hành hoặc tập mới của chương trình truyền hình.

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

@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 có thể là một mục của danh sách trì hoãn, chẳng hạn như TvLazyColumn. Đoạn mã sau đây cho thấy thành phần kết hợp FeaturedCarousel ở trên cùng của tất cả các thành phần kết hợp 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)
    }
  }
}