ใช้ Jetpack Compose ใน Android TV

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

ประโยชน์บางอย่างที่เฉพาะเจาะจงของการใช้เครื่องมือเขียนสำหรับทีวีมีดังนี้

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

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

พรอมต์ AI

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

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

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

เขียนสำหรับทีวีใช้ได้ใน 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 for TV จะเพิ่มไลบรารีที่มีคอมโพเนนต์ที่เพิ่มประสิทธิภาพสำหรับทีวี และช่วยให้สร้างอินเทอร์เฟซผู้ใช้ที่ปรับให้เหมาะกับทีวีได้ง่ายขึ้น ในบางกรณี คอมโพเนนต์เหล่านั้นจะใช้ชื่อเดียวกับคอมโพเนนต์ที่ไม่ใช่ทีวี เช่น 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:2024.12.01")
   implementation(composeBom)

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

   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:2024.12.01')
   implementation composeBom

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

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

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

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

รูปที่ 1 ตัวอย่างคอมโพเนนต์จากคลังวัสดุของ TV

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

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

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

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

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

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

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

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