เครื่องมือเขียนสำหรับทีวีเป็นแนวทางสมัยใหม่ในการสร้างอินเทอร์เฟซผู้ใช้ Android TV Compose สำหรับทีวีจะปลดล็อกประโยชน์ทั้งหมดของ Jetpack Compose ของ Android สำหรับแอปทีวี ซึ่งช่วยให้การสร้าง UI ที่สวยงามและใช้งานได้สำหรับแอปของคุณเป็นเรื่องง่ายขึ้นมาก
ประโยชน์ที่เฉพาะเจาะจงบางประการของการใช้ Compose สำหรับทีวีมีดังต่อไปนี้
- ความยืดหยุ่น: คอมโพซสามารถใช้สร้าง UI ประเภทใดก็ได้ ตั้งแต่เลย์เอาต์แบบง่ายไปจนถึงภาพเคลื่อนไหวที่ซับซ้อน คอมโพเนนต์ใช้งานได้ทันที แต่คุณยังปรับแต่งและกำหนดสไตล์ให้เหมาะกับความต้องการของแอปได้ด้วย
- การพัฒนาแบบเร่งและง่ายขึ้น: Compose เข้ากันได้กับโค้ดที่มีอยู่และช่วยให้นักพัฒนาแอปสร้างแอปได้อย่างมีประสิทธิภาพมากขึ้นโดยใช้โค้ดน้อยลง
- ใช้งานง่าย: Compose ใช้ไวยากรณ์แบบประกาศที่ช่วยให้คุณเปลี่ยนแปลง UI, แก้ไขข้อบกพร่อง ทำความเข้าใจ และตรวจสอบโค้ดได้
หากไม่คุ้นเคยกับการใช้ชุดเครื่องมือ Jetpack Compose โปรดดูเส้นทาง Compose หลักการในการพัฒนา Compose สำหรับอุปกรณ์เคลื่อนที่จำนวนมากใช้กับทีวีได้ด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับประโยชน์โดยทั่วไปของเฟรมเวิร์ก UI แบบประกาศได้ในทำไม Compose ดูข้อมูลเพิ่มเติมได้ในที่เก็บตัวอย่างการเขียนสำหรับทีวีใน GitHub
ความเข้ากันได้
เขียนสำหรับทีวีใช้ได้ใน Android TV ที่ใช้ Android 5.0 (API ระดับ 21) ขึ้นไป การใช้ Compose สำหรับ TV เวอร์ชัน 1.0 ต้องใช้ไลบรารี androidx.compose เวอร์ชัน 1.3.0 และ Kotlin 1.7.10
ตั้งค่า
การใช้ Jetpack Compose ใน Android TV คล้ายกับการใช้ Jetpack Compose สำหรับโปรเจ็กต์ Android อื่นๆ ความแตกต่างหลักๆ คือ Compose สำหรับทีวีจะเพิ่มไลบรารีที่เสนอคอมโพเนนต์ที่เพิ่มประสิทธิภาพสำหรับทีวีและช่วยให้สร้างอินเทอร์เฟซผู้ใช้ที่เหมาะกับทีวีได้ง่ายขึ้น ในบางกรณี คอมโพเนนต์ดังกล่าวอาจมีชื่อเหมือนกับคอมโพเนนต์ที่ไม่ใช่ทีวี เช่น androidx.tv.material3.Button
และ androidx.compose.material3.Button
ทรัพยากร Dependency ของชุดเครื่องมือ Jetpack Compose
หากต้องการใช้ Compose สำหรับทีวี ให้รวมข้อกำหนดของชุดเครื่องมือ Jetpack Compose ไว้ในไฟล์ build.gradle
ของแอป ดังนี้
Kotlin
dependencies { val composeBom = platform("androidx.compose:compose-bom:2024.10.01") implementation(composeBom) // General compose dependencies. implementation("androidx.activity:activity-compose:1.9.2") implementation("androidx.compose.ui:ui-tooling-preview") debugImplementation("androidx.compose.ui:ui-tooling") // Compose for TV dependencies. implementation("androidx.tv:tv-material:1.0.0") }
ดึงดูด
dependencies { def composeBom = platform('androidx.compose:compose-bom:2024.10.01') implementation composeBom // General compose dependencies. implementation 'androidx.activity:activity-compose:1.9.2' implementation 'androidx.compose.ui:ui-tooling-preview' debugImplementation 'androidx.compose.ui:ui-tooling' // Compose for TV dependencies. implementation 'androidx.tv:tv-material:1.0.0' }
สิ่งที่เปลี่ยนแปลง
ส่วนประกอบของวัสดุทีวีออกแบบมาสำหรับห้องนั่งเล่น โดยมีสัญญาณบอกสถานะโฟกัสที่ชัดเจนและลักษณะการทำงานของอินพุตที่ทำกับรีโมต ดูรายละเอียดเกี่ยวกับวิธีใช้คอมโพเนนต์เหล่านี้ได้ที่คู่มือการออกแบบ UI ของทีวี
ใช้ API เวอร์ชัน TV ทุกครั้งที่เป็นไปได้เพื่อรับประโยชน์จากฟีเจอร์เหล่านี้
แม้ว่าในทางเทคนิคแล้วจะใช้ Compose Material เวอร์ชันอุปกรณ์เคลื่อนที่ได้ แต่ก็ไม่ได้เพิ่มประสิทธิภาพให้เหมาะกับรูปแบบการโต้ตอบที่ไม่ซ้ำกันบน Android TV นอกจากนี้ การผสมวัสดุของ Compose กับวัสดุของ Compose สำหรับทีวีอาจทําให้ระบบทํางานอย่างไม่คาดคิด ตัวอย่างเช่น เนื่องจากไลบรารีแต่ละรายการมีออบเจ็กต์ MaterialTheme
เป็นของตัวเอง จึงมีความเป็นไปได้ที่สี การจัดรูปแบบตัวอักษร หรือรูปร่างจะไม่สอดคล้องกันหากใช้ทั้ง 2 เวอร์ชัน
ตารางต่อไปนี้จะสรุปความแตกต่างของรายการที่ต้องพึ่งพาระหว่างทีวีและอุปกรณ์เคลื่อนที่
Dependency ของ TV (androidx.tv.*) |
การเปรียบเทียบ | Dependency บนอุปกรณ์เคลื่อนที่ (androidx.compose.*) |
---|---|---|
androidx.tv:tv-material | แทน | androidx.compose.material3:material3 |
แหล่งข้อมูลเพิ่มเติม
คู่มือการออกแบบทีวี
ภาพรวมของคอมโพเนนต์ทีวีเฉพาะสำหรับการสร้างอินเทอร์เฟซผู้ใช้พร้อมลิงก์ไปยังแหล่งข้อมูลของนักพัฒนาซอฟต์แวร์ที่เกี่ยวข้องตัวอย่างแคตตาล็อกสื่อการเรียนการสอนของชั้นเรียนทางทีวี
แอปแคตตาล็อกที่สาธิตวิธีนำหลักการของ Material Design ไปปรับใช้โดยใช้ Compose สำหรับทีวีตัวอย่าง JetStream
แอปสตรีมมิงสื่อที่สาธิตการใช้ TV Compose ด้วยแอป Material ทั่วไปและสถาปัตยกรรมในโลกแห่งความเป็นจริงข้อมูลเบื้องต้นเกี่ยวกับ Compose สำหรับ TV
Codelab นี้จะอธิบายขั้นตอนการสร้างแอปวิดีโอเพลเยอร์ที่มีหน้าจอเรียกดูแคตตาล็อกและหน้าจอรายละเอียด
อ่านเพิ่มเติม
สำรวจคู่มือเหล่านี้เพื่อดูข้อมูลเกี่ยวกับการสร้างประสบการณ์การใช้งานที่ยอดเยี่ยมซึ่งปรับให้เหมาะกับทีวีสำหรับแพลตฟอร์มต่อไปนี้