สร้างเบราว์เซอร์แคตตาล็อก

แอปสื่อที่ทำงานบนทีวีต้องอนุญาตให้ผู้ใช้เรียกดูเนื้อหาของตัวเองได้ นำเสนอ เลือกแล้ว และเริ่มเล่นเนื้อหา การเรียกดูเนื้อหา แอปประเภทนี้ควรเรียบง่าย ใช้งานง่าย และมีรูปลักษณ์ น่าพอใจและน่าสนใจ

เบราว์เซอร์แคตตาล็อกสื่อมีแนวโน้มที่จะประกอบด้วยส่วนต่างๆ และแต่ละส่วน มีรายการเนื้อหาสื่อ ตัวอย่างส่วนต่างๆ ในแคตตาล็อกสื่อ ได้แก่ เพลย์ลิสต์ เนื้อหาเด่น หมวดหมู่ที่แนะนำ

วันที่

ใช้ฟังก์ชันของ Compose สำหรับทีวีเพื่อนำผู้ใช้ไปใช้ สำหรับเรียกดูเพลงหรือวิดีโอจากแคตตาล็อกสื่อของแอป

สร้างฟังก์ชันที่ประกอบกันได้สำหรับแคตตาล็อก

ทุกอย่างที่ปรากฏบนจอแสดงผลจะใช้เป็นฟังก์ชันที่ประกอบกันได้ใน Compose สำหรับทีวี เริ่มต้นด้วยการกำหนด Composable ฟังก์ชันสำหรับเบราว์เซอร์แคตตาล็อกสื่อ:

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

CatalogBrowser เป็นฟังก์ชัน Composable ที่ใช้แคตตาล็อกสื่อ เบราว์เซอร์ ฟังก์ชันมีอาร์กิวเมนต์ต่อไปนี้

• รายการเนื้อหาเด่น
• รายการส่วน
• ออบเจ็กต์ตัวปรับแต่ง
• ฟังก์ชัน Callback ซึ่งจะทริกเกอร์การเปลี่ยนหน้าจอ

ตั้งค่าองค์ประกอบ UI

Compose สำหรับทีวีจะมีรายการแบบ Lazy Loading ซึ่งเป็นองค์ประกอบในการแสดง จำนวนรายการ (หรือรายการที่ไม่ทราบความยาว) โทร LazyColumn เพื่อวางส่วนต่างๆ ในแนวตั้ง LazyColumn มอบ LazyListScope.() -> Unit ซึ่งนำเสนอ DSL เพื่อกำหนดเนื้อหาของรายการ ในตัวอย่างต่อไปนี้ แต่ละส่วนจะอยู่ในรายการแนวตั้งที่มีช่องว่าง 16 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) { section ->
      Section(section, onItemSelected = onItemSelected)
    }
  }
}

ในตัวอย่างนี้ ฟังก์ชัน Composable ของ Section จะกำหนดวิธีแสดงส่วนต่างๆ ในฟังก์ชันต่อไปนี้ LazyRow จะสาธิตวิธีใช้ LazyColumn เวอร์ชันแนวนอนคล้ายกับ กำหนดรายการแนวนอนด้วยบล็อก LazyListScope.() -> Unit ด้วยการเรียก DSL ที่ให้ไว้:

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

ใน Composable Section จะใช้คอมโพเนนต์ Text ข้อความและองค์ประกอบอื่นๆ มีระบุไว้ใน ดีไซน์ Material ใน ไลบรารีวัสดุของทีวี คุณสามารถ เปลี่ยนข้อความ" สไตล์ตามที่นิยามไว้ในดีไซน์ Material โดยอ้างถึง MaterialTheme ออบเจ็กต์นี้มาจากไลบรารีวัสดุทีวีด้วย Card เป็นส่วนหนึ่งของคลังเนื้อหาทีวี MovieCard กำหนดวิธีแสดงข้อมูลภาพยนตร์แต่ละเรื่องในแคตตาล็อกที่กำหนด เป็นข้อมูลโค้ดต่อไปนี้

@Composable
fun MovieCard(
   movie: Movie,
   modifier: Modifier = Modifier,
   onClick: () -> Unit = {}
) {
   Card(modifier = modifier, onClick = onClick){
    AsyncImage(
       model = movie.thumbnailUrl,
       contentDescription = movie.title,
     )
   }
}

ไฮไลต์เนื้อหาเด่น

ในตัวอย่างที่อธิบายก่อนหน้านี้ ภาพยนตร์ทุกเรื่องจะแสดงเท่าๆ กัน ซึ่งมีพื้นที่เดียวกันและไม่มีความแตกต่างด้านการมองเห็น คุณสามารถไฮไลต์ข้อความบางส่วนได้โดยใช้ Carousel

ภาพหมุนจะแสดงข้อมูลในชุดรายการที่สามารถเลื่อน จางลง หรือ ย้ายไปอยู่ในมุมมอง คุณใช้คอมโพเนนต์เพื่อไฮไลต์เนื้อหาเด่น เช่น ภาพยนตร์ที่ออกใหม่หรือตอนใหม่ของรายการทีวี

Carousel คาดหวังให้คุณระบุจำนวนรายการที่ Carousel มีและวิธีการ วาดแต่ละรายการ หมายเลขแรกระบุได้ด้วย itemCount อันที่ 2 ก็สามารถส่งผ่านเป็นแลมบ์ดาได้ หมายเลขดัชนีของรายการที่แสดงคือ ที่มอบให้แก่แลมบ์ดา คุณสามารถกำหนดรายการที่จะแสดงด้วย ค่าดัชนีที่กำหนด:

@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 อาจเป็นรายการของลิสต์แบบ Lazy Loading เช่น TvLazyColumn ข้อมูลโค้ดต่อไปนี้แสดง FeaturedCarousel Composable ที่ด้านบนของ Composable ทั้งหมด 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)
    }
  }
}