ใช้ Jetpack Compose ใน Android TV

Compose สำหรับ TV เป็นแนวทางที่ทันสมัยในการสร้างอินเทอร์เฟซผู้ใช้ 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

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

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

Compose สำหรับ TV ทำงานบน 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 สำหรับ TV จะเพิ่มไลบรารีที่มีคอมโพเนนต์ที่เพิ่มประสิทธิภาพสำหรับทีวีและช่วยให้สร้างอินเทอร์เฟซผู้ใช้ที่ปรับให้เหมาะกับทีวีได้ง่ายขึ้น ในบางกรณี คอมโพเนนต์เหล่านั้นจะใช้ชื่อเดียวกันกับ ชื่อของคอมโพเนนต์ที่ไม่ใช่ทีวี เช่น androidx.tv.material3.Button และ androidx.compose.material3.Button

ทรัพยากร Dependency ของชุดเครื่องมือ Jetpack Compose

หากต้องการใช้ Compose สำหรับทีวี ให้รวมทรัพยากร Dependency ของชุดเครื่องมือ Jetpack Compose ในไฟล์ build.gradle ของแอปดังนี้

Kotlin (build.gradle.kts)

dependencies {
   val composeBom = platform("androidx.compose:compose-bom:2026.09.00")
   implementation(composeBom)

   // General compose dependencies.
   implementation("androidx.activity:activity-compose:1.13.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")
}

Groovy (build.gradle)

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

   // General compose dependencies.
   implementation 'androidx.activity:activity-compose:1.13.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'
}

ความแตกต่าง

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

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

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

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

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

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

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

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

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

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