ใช้ Jetpack Compose ใน Android TV

Compose สำหรับทีวีเป็นแนวทางที่ทันสมัยในการสร้างอินเทอร์เฟซผู้ใช้ Android TV Compose สำหรับทีวีจะช่วยให้คุณได้รับประโยชน์ทั้งหมดจาก Jetpack Compose ของ Android สำหรับ แอปทีวี ซึ่งจะช่วยให้การสร้าง UI ที่สวยงามและใช้งานได้สำหรับแอปของคุณง่ายขึ้นมาก

ประโยชน์บางประการของการใช้ Compose สำหรับทีวีมีดังนี้

  • ความยืดหยุ่น: คุณใช้ Compose เพื่อสร้าง UI ได้ทุกประเภท ตั้งแต่เลย์เอาต์ธรรมดาไปจนถึงภาพเคลื่อนไหวที่ซับซ้อน คอมโพเนนต์จะทำงานได้ทันที แต่คุณก็ยัง ปรับแต่งและจัดรูปแบบให้เหมาะกับความต้องการของแอปได้ด้วย
  • การพัฒนาที่ง่ายขึ้นและเร็วขึ้น: Compose เข้ากันได้กับ โค้ดที่มีอยู่ และช่วยให้นักพัฒนาแอปสร้างแอปได้อย่างมีประสิทธิภาพมากขึ้นด้วย โค้ดที่น้อยลง
  • ใช้งานง่าย: Compose ใช้ไวยากรณ์แบบประกาศที่ช่วยให้คุณทำการเปลี่ยนแปลง UI, แก้ข้อบกพร่อง, ทำความเข้าใจ และตรวจสอบโค้ดได้

หากคุณไม่คุ้นเคยกับการใช้ชุดเครื่องมือ Jetpack Compose โปรดดูเส้นทาง Compose หลักการพัฒนาสำหรับ Compose ในอุปกรณ์เคลื่อนที่หลายข้อก็ใช้กับทีวีได้เช่นกัน ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อดีทั่วไปของเฟรมเวิร์ก UI แบบประกาศได้ที่เหตุผลที่ควรใช้ Compose ดูข้อมูลเพิ่มเติมได้ที่ที่เก็บตัวอย่าง Compose สำหรับทีวีใน GitHub

พรอมต์ AI

ดูวิธีเพิ่มการรองรับ Android TV

ข้อความแจ้งนี้ขอคำแนะนำเกี่ยวกับการเพิ่มการรองรับ Android TV ลงในแอปโดยใช้ Jetpack Compose สำหรับทีวีแทน Leanback

How do I add support for Android TV to my application?



Use Jetpack Compose for TV as part of the response instead of Leanback.

การใช้พรอมต์ AI

พรอมต์ AI มีไว้เพื่อใช้ภายใน Gemini ใน Android Studio (ต้องใช้เวอร์ชัน Canary ล่าสุด)

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Gemini ใน Studio ได้ที่ https://developer.android.com/studio/preview/gemini

ความเข้ากันได้

Compose สำหรับทีวีทำงานบน Android TV ที่ใช้ Android 5.0 (API ระดับ 21) ขึ้นไป การใช้ Compose สำหรับทีวีเวอร์ชัน 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:2025.05.00")
   implementation(composeBom)

   // General compose dependencies.
   implementation("androidx.activity:activity-compose:1.10.1")

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

Groovy

dependencies {
   def composeBom = platform('androidx.compose:compose-bom:2025.05.00')
   implementation composeBom

   // General compose dependencies.
   implementation 'androidx.activity:activity-compose:1.10.1'

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

ความแตกต่าง

คอมโพเนนต์ของ Material สำหรับทีวีออกแบบมาสำหรับห้องนั่งเล่น โดยมีตัวบ่งชี้โฟกัสที่ชัดเจน และลักษณะการป้อนข้อมูลที่เหมาะกับรีโมต ดูรายละเอียดเกี่ยวกับวิธี ใช้คอมโพเนนต์เฉพาะเหล่านี้ได้ในคำแนะนำการออกแบบ UI ของทีวี

รูปที่ 1 คอมโพเนนต์ตัวอย่างจากไลบรารีเนื้อหาของทีวี

ใช้ API เวอร์ชันทีวีทุกครั้งที่ทำได้เพื่อรับประโยชน์จากฟีเจอร์เหล่านี้

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

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

การขึ้นต่อกันของทีวี
(androidx.tv.*) 		การเปรียบเทียบ การขึ้นต่อกันของอุปกรณ์เคลื่อนที่
(androidx.compose.*)
androidx.tv:tv-material จากราคาเต็ม androidx.compose.material3:material3

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

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

ดูคำแนะนำต่อไปนี้เพื่อเรียนรู้เกี่ยวกับการสร้างประสบการณ์การใช้งานที่ยอดเยี่ยมซึ่งได้รับการเพิ่มประสิทธิภาพสำหรับทีวี

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