สร้างเลย์เอาต์ที่เลื่อนได้สำหรับทีวี

สำหรับแอปทีวี ประสบการณ์การเรียกดูจะขึ้นอยู่กับการไปยังส่วนต่างๆ ที่มีประสิทธิภาพซึ่งอิงตามโฟกัส การใช้เลย์เอาต์แบบ Lazy ของ Compose Foundation มาตรฐานจะช่วยให้คุณสร้างรายการแนวตั้งและแนวนอนที่มีประสิทธิภาพ ซึ่งจะจัดการการเลื่อนที่ขับเคลื่อนด้วยโฟกัสโดยอัตโนมัติ เพื่อให้รายการที่ใช้งานอยู่แสดงอยู่

ลักษณะการเลื่อนเริ่มต้นที่ปรับให้เหมาะกับทีวี

ตั้งแต่ Compose Foundation 1.7.0 เป็นต้นไป เลย์เอาต์ Lazy มาตรฐาน (เช่น LazyRow และ LazyColumn) จะรองรับฟีเจอร์การวางตำแหน่งโฟกัสในตัว วิธีนี้เป็นวิธีที่แนะนำในการสร้างแคตตาล็อกสำหรับแอปทีวี เนื่องจากจะช่วยให้รายการที่โฟกัสยังคงมองเห็นได้และจัดวางอย่างเป็นธรรมชาติสำหรับผู้ใช้

หากต้องการใช้รายการที่เลื่อนได้พื้นฐาน ให้ใช้คอมโพเนนต์ Lazy มาตรฐาน โดย คอมโพเนนต์เหล่านี้จะจัดการการนำทางด้วยแป้น D-pad โดยอัตโนมัติและนำรายการที่โฟกัสมาแสดง

import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items

@Composable
fun MovieCatalog(movies: List<Movie>) {
    LazyRow {
        items(movies) { movie ->
            MovieCard(
                movie = movie,
                onClick = { /* Handle click */ }
            )
        }
    }
}
Lists.kt

ปรับแต่งลักษณะการเลื่อนด้วย BringIntoViewSpec

หากการออกแบบของคุณต้องมีจุด "หมุน" ที่เฉพาะเจาะจง (เช่น การรักษารายการที่โฟกัสให้ห่างจากขอบด้านซ้าย 30% อย่างแน่นอน) คุณสามารถปรับแต่งลักษณะการเลื่อนได้โดยใช้ BringIntoViewSpec ซึ่งจะแทนที่pivotOffsets ฟังก์ชันการทำงานรุ่นเก่าด้วยการให้คุณกำหนดวิธีที่วิวพอร์ตควรเลื่อน เพื่อรองรับรายการที่โฟกัสได้อย่างแม่นยำ

1. กำหนด BringIntoViewSpec ที่กำหนดเอง

Composable ต่อไปนี้จะช่วยให้คุณกำหนด "Pivot" ตามเศษส่วนขององค์ประกอบหลักและองค์ประกอบย่อยได้ parentFraction จะกำหนดตำแหน่งในคอนเทนเนอร์ที่รายการ ควรอยู่ และ childFraction จะกำหนดส่วนของรายการที่จัดแนว กับจุดนั้น

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PositionFocusedItemInLazyLayout(
    parentFraction: Float = 0.3f,
    childFraction: Float = 0f,
    content: @Composable () -> Unit,
) {
    val bringIntoViewSpec = remember(parentFraction, childFraction) {
        object : BringIntoViewSpec {
            override fun calculateScrollDistance(
                offset: Float,       // Item's initial position
                size: Float,         // Item's size
                containerSize: Float // Container's size
            ): Float {
                // Calculate the offset position of the item's leading edge.
                val initialTargetForLeadingEdge =
                    parentFraction * containerSize - (childFraction * size)
                // If the item fits in the container, and scrolling would cause
                // its trailing edge to be clipped, adjust targetForLeadingEdge
                // to prevent over-scrolling near the end of list.
                val targetForLeadingEdge = if (size <= containerSize &&
                    (containerSize - initialTargetForLeadingEdge) < size) {
                    // If clipped, align the item's trailing edge with the
                    // container's trailing edge.
                    containerSize - size
                } else {
                    initialTargetForLeadingEdge
                }
                // Return scroll distance relative to initial item position.
                return offset - targetForLeadingEdge
            }
        }
    }

    // Apply the spec to all scrollables in the hierarchy
    CompositionLocalProvider(
        LocalBringIntoViewSpec provides bringIntoViewSpec,
        content = content,
    )
}
Lists.kt

2. ใช้ข้อกำหนดที่กำหนดเอง

วางเลย์เอาต์ด้วยตัวช่วยเพื่อใช้การวางตำแหน่ง ซึ่งมีประโยชน์ในการ สร้าง "เส้นโฟกัสที่สอดคล้องกัน" ในแถวต่างๆ ของแคตตาล็อก

PositionFocusedItemInLazyLayout(
    parentFraction = 0.3f, // Pivot 30% from the edge
    childFraction = 0.5f   // Center of the item aligns with the pivot
) {
    LazyColumn {
        items(sectionList) { section ->
            // This row and its items will respect the 30% pivot
            LazyRow { /* ... */ }
        }
    }
}
Lists.kt

3. เลือกไม่ใช้เลย์เอาต์ที่ซ้อนกันบางรายการ

หากคุณมีเลย์เอาต์ที่ซ้อนกันซึ่งควรใช้ลักษณะการเลื่อนมาตรฐาน แทนการหมุนที่กำหนดเอง ให้ระบุDefaultBringIntoViewSpec

private val DefaultBringIntoViewSpec = object : BringIntoViewSpec {}

PositionFocusedItemInLazyLayout {
    LazyColumn {
        item {
            // This row will ignore the custom pivot and use default behavior
            CompositionLocalProvider(LocalBringIntoViewSpec provides DefaultBringIntoViewSpec) {
                LazyRow { /* ... */ }
            }
        }
    }
}
Lists.kt

กล่าวคือ การส่ง BringIntoViewSpec ที่ว่างเปล่าจะทำให้ลักษณะการทำงานเริ่มต้นของเฟรมเวิร์ก มีผลใช้งาน

การย้ายข้อมูลจาก TV Foundation ไปยัง Compose Foundation

เลย์เอาต์ Lazy สำหรับทีวีโดยเฉพาะใน androidx.tv.foundation จะเลิกใช้งานเพื่อ รองรับเลย์เอาต์ Compose Foundation มาตรฐาน

การอัปเดตทรัพยากร Dependency

ตรวจสอบว่า build.gradle ใช้เวอร์ชัน 1.7.0 ขึ้นไปสำหรับ

• androidx.compose.foundation
• androidx.compose.runtime

การแมปคอมโพเนนต์

หากต้องการย้ายข้อมูล ให้อัปเดตการนำเข้าและนำคำนำหน้า Tv ออกจากคอมโพเนนต์

คอมโพเนนต์ทีวีที่เลิกใช้งานแล้ว	การแทนที่ Compose Foundation
TvLazyRow	LazyRow
TvLazyColumn	LazyColumn
TvLazyHorizontalGrid	LazyHorizontalGrid
TvLazyVerticalGrid	LazyVerticalGrid
pivotOffsets	BringIntoViewSpec (ผ่าน LocalBringIntoViewSpec)