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, 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, dễ nhìn và hấp dẫn.

Trình duyệt danh mục nội dung nghe nhìn 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: 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 for TV cung cấp để triển khai giao diện người dùng 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 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 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 có khả năng kết hợp triển khai trình duyệt danh mục nội dung nghe nhìn. 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 đối tượng sửa đổi.
  • Hàm gọi lại 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 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 phần theo chiều dọc. LazyColumn cung cấp một khối LazyListScope.() -> Unit, cung cấp một 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) { 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 minh hoạ cách sử dụng phiên bản ngang của LazyColumn này 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 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 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 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,
     )
   }
}

Nêu 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 này có cùng diện tích và 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ố trong số đó 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ờ hoặc di chuyển vào chế độ xem. 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 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 giá trị đầu tiên bằng itemCount. Bạn có thể truyền tham số thứ hai dưới dạng một hàm lambda. Số chỉ mục của mục hiển thị được cung cấp cho lambda. Bạn có thể xác định mụ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 của 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