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