ใช้ Jetpack Compose ใน Android TV

Compose สำหรับทีวีเป็นแนวทางที่ทันสมัยสำหรับการสร้างอินเทอร์เฟซผู้ใช้ของ Android TV Compose สำหรับ TV จะปลดล็อกสิทธิประโยชน์ทั้งหมดของ Jetpack Compose ของ Android สำหรับแอป TV ซึ่งจะช่วยให้การสร้าง 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 สำหรับ TV ให้รวมทรัพยากร Dependency ของชุดเครื่องมือ Jetpack Compose ในไฟล์ build.gradle ของแอปดังนี้

Kotlin (build.gradle.kts)

dependencies {
   val composeBom = platform("androidx.compose:compose-bom:2026.08.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")
}

ดึงดูด (build.gradle)

dependencies {
   def composeBom = platform('androidx.compose:compose-bom:2026.08.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 ตัวอย่างคอมโพเนนต์จากไลบรารี Material ของทีวี

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

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

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

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

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

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

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

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