ใช้ Jetpack Compose ใน Android TV

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'
}

สิ่งที่แตกต่างกัน

ใช้ API เวอร์ชันสำหรับทีวีเมื่อเป็นไปได้ แม้ว่าในทางเทคนิคแล้ว คุณจะสามารถใช้ Compose Material เวอร์ชันอุปกรณ์เคลื่อนที่ ไม่เหมาะสำหรับรูปแบบการโต้ตอบ ที่แปลกใหม่บน Android TV ใน นอกจากนี้ การรวม Material ของ Compose กับ Compose จาก การเขียนสำหรับทีวีอาจทำให้เกิดลักษณะการทำงานที่ไม่คาดคิด ตัวอย่างเช่น เนื่องจากไลบรารีแต่ละรายการมีออบเจ็กต์ MaterialTheme ของตัวเอง จึงมีความเป็นไปได้ สี ตัวอักษร หรือรูปร่างไม่สอดคล้องกันหากใช้ทั้ง 2 รุ่น

ตารางต่อไปนี้จะสรุปความแตกต่างของทรัพยากร Dependency ระหว่างทีวีกับ อุปกรณ์เคลื่อนที่:

การอ้างอิงทีวี
(androidx.tv.*) 		การเปรียบเทียบ ทรัพยากร Dependency บนอุปกรณ์เคลื่อนที่
(androidx.compose.*)
androidx.tv:tv-material แทน androidx.compose.material3:material3

แหล่งข้อมูลเพิ่มเติม

อ่านเพิ่มเติม

อ่านคู่มือเหล่านี้เพื่อเรียนรู้เกี่ยวกับการสร้างประสบการณ์การรับชมที่ยอดเยี่ยมสำหรับทีวีเพื่อวัตถุประสงค์ต่อไปนี้

ถัดไป
สร้างเบราว์เซอร์แคตตาล็อก