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

Một ứng dụng đa phương tiện chạy trên TV cần cho phép người dùng duyệt qua nội dung của ứng dụng dịch vụ, lựa chọn và bắt đầu phát nội dung. Duyệt qua nội dung cho các ứng dụng thuộc loại này nên đơn giản, trực quan và trực quan thú vị và hấp dẫn.

Một trình duyệt danh mục nội dung đa phương tiện thường bao gồm một số phần và mỗi phần có danh sách nội dung đa phương tiện. Sau đây là ví dụ về các mục trong danh mục nội dung đa phương tiện: 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 dành cho TV cung cấp để triển khai người dùng để duyệt qua nhạc hoặc video từ danh mục nội dung đa phương tiện của ứng dụng.

Tạo hàm có khả năng kết hợp 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 có khả năng kết hợp trong Compose cho TV. Bắt đầu bằng cách xác định một thành phần kết hợp dành cho trình duyệt danh mục nội dung đa phương tiện:

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

CatalogBrowser là hàm có khả năng kết hợp triển khai danh mục nội dung đa phương tiện trình duyệt. 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 Đối tượng sửa đổi.
  • Một hàm callback, kích hoạt hiệu ứng chuyển đổi màn hình.

Thiết lập thành phần 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ị số lượng mặt hàng (hoặc danh sách có độ dài không xác định). Gọi điện LazyColumn để đặt các phần theo chiều dọc. LazyColumn cung cấp LazyListScope.() -> Unit block, cung cấp DSL để xác định nội dung của mục. Trong ví dụ sau đây: mỗi phần được đặt trong một danh sách dọc với khoảng cách là 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 có khả năng kết hợp Section xác định cách hiển thị các phần. Trong hàm sau, LazyRow cho thấy cách phiên bản ngang của LazyColumn được dùng tương tự như 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 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 sử dụng. Văn bản và các thành phần khác xác định trong Material Design đều có trong thư viện tv-material . Bạn có thể thay đổi 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 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 kết xuất từng dữ liệu phim trong danh mục được xác định dưới dạng đ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,
     )
   }
}

Làm nổi bật nội dung nổi bật

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

Băng chuyền hiển thị thông tin trong một nhóm các mục có thể trượt, làm mờ, 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 phát hành hoặc tập mới của chương trình truyền hình.

Carousel dự kiến bạn ít nhất phải chỉ định 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 cột đầu tiên bằng itemCount. Lựa chọn thứ hai có thể được truyền dưới dạng lambda. Số chỉ mục của mục được hiển thị là được cấp cho 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 lazy, 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 tất 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)
    }
  }
}
Trước
Nội dung của hướng dẫn này
Tiếp
Tạo màn hình chi tiết