เลย์เอาต์ในชุดเครื่องมือ Leanback UI

สร้างได้ดียิ่งขึ้นด้วย Compose

สร้าง UI ที่สวยงามด้วยโค้ดแบบเรียบง่ายโดยใช้ Jetpack Compose สำหรับระบบปฏิบัติการ Android TV

Compose สำหรับรายการทีวี →

โดยปกติหน้าจอทีวีจะดูจากระยะประมาณ 10 ฟุต และแม้ว่าจะมีขนาดใหญ่กว่า จอแสดงผลอื่นๆ ของอุปกรณ์ที่ใช้ Android หน้าจอทีวีไม่ได้ให้การแสดงผล และลงสีเหมือนหน้าจออุปกรณ์ขนาดเล็ก คุณต้องสร้างเลย์เอาต์แอปด้วยปัจจัยเหล่านี้ คำนึงถึงอุปกรณ์ทีวีที่จะสร้างประสบการณ์ของผู้ใช้ที่มีประโยชน์และเพลิดเพลิน

ใช้ธีมเลย์เอาต์สำหรับทีวี

ธีมของ Android เป็นพื้นฐานสำหรับ ในแอป TV ใช้ธีมเพื่อแก้ไขการแสดงผลกิจกรรมของแอปที่ ที่จะเรียกใช้บนอุปกรณ์ทีวี ส่วนนี้อธิบายธีมที่ควรใช้

ธีม Leanback

ไลบรารี androidx.leanback มี Theme.Leanback ซึ่งเป็นธีมสำหรับกิจกรรมทีวีที่ ให้สไตล์ของภาพที่สอดคล้อง ใช้ธีมนี้สำหรับแอป TV ที่สร้างขึ้น กับชั้นเรียน AndroidX Leanback ตัวอย่างโค้ดต่อไปนี้แสดงวิธีใช้ธีมนี้กับ กิจกรรม:

<activity
  android:name="com.example.android.TvActivity"
  android:label="@string/app_name"
  android:theme="@style/Theme.Leanback">

ธีม NoTitleBar

แถบชื่อเป็นองค์ประกอบอินเทอร์เฟซผู้ใช้มาตรฐานสำหรับแอป Android บนโทรศัพท์และแท็บเล็ต ไม่เหมาะสำหรับแอป TV หากคุณไม่ได้ใช้ชั้นเรียน AndroidX Leanback ให้ใช้ NoTitleBar กับกิจกรรมทีวีเพื่อไม่ให้แสดงแถบชื่อ ตัวอย่างโค้ดต่อไปนี้ จากไฟล์ Manifest ของแอปทีวีสาธิตวิธีใช้ธีมนี้เพื่อนำการแสดงผลของแถบชื่อออก

<application>
  ...
  <activity
    android:name="com.example.android.TvActivity"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar">
    ...
  </activity>
</application>

ธีม AppCompat

ในแอปบนอุปกรณ์เคลื่อนที่ Android เป็นเรื่องปกติที่จะใช้ AppCompatActivity รวมถึงหนึ่งใน Theme.AppCompat ธีม การผสมผสานนี้ช่วยให้คุณใช้ฟีเจอร์ เช่น การแต้มสีแบบถอนออกได้โดยไม่ต้องกังวลถึงเวอร์ชัน Android ที่ทำงานอยู่ในอุปกรณ์ หากคุณ กำลังพัฒนาแอปที่เรียกใช้บน Android TV เท่านั้น โปรดอย่าใช้ AppCompatActivity เนื่องจากฟีเจอร์ที่เปิดใช้นั้นมีให้ใช้งานอยู่แล้ว Android TV หรือไม่เกี่ยวข้อง

หากคุณกำลังสร้างแอปด้วยฐานของโค้ดที่แชร์ระหว่างอุปกรณ์เคลื่อนที่ Android และ Android TV คุณสามารถเรียกใช้ ให้เป็นความท้าทายบางประการ เนื่องจากการกำหนดธีม AppCompatActivity และแพลตฟอร์มต่างๆ คุณต้องใช้ Theme.AppCompat สำหรับวิดเจ็ต AppCompat ส่วนย่อยของชุดเครื่องมือ Leanback UI ที่คาดหวังให้คุณใช้ FragmentActivity และ Theme.Leanback

หากต้องการใช้กิจกรรมพื้นฐานเดียวกันสําหรับอุปกรณ์เคลื่อนที่และ Android TV หรือคุณต้องการใช้ มุมมองที่กำหนดเองตามวิดเจ็ต AppCompat รายการ เช่น AppCompatImageView, ใช้ธีม Theme.AppCompat.Leanback ธีมเหล่านี้จะมีธีมทั้งหมด จาก AppCompat และระบุค่าเฉพาะสำหรับ Leanback ด้วย

คุณปรับแต่งธีม Theme.AppCompat.Leanback ได้แบบเดียวกับที่ทำกับธีมอื่นๆ เช่น ถ้าต้องการเปลี่ยนค่าที่เจาะจงสำหรับ ชุดเครื่องมือ Leanback UI OnboardingSupportFragment, ดำเนินการบางอย่างที่คล้ายกับตัวอย่างต่อไปนี้

<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
    <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
    <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>

สร้างเลย์เอาต์ทีวีพื้นฐาน

เลย์เอาต์สำหรับอุปกรณ์ทีวีต้องเป็นไปตามหลักเกณฑ์พื้นฐานเพื่อให้แน่ใจว่าสามารถใช้งานได้และ มีผลกับหน้าจอขนาดใหญ่ ทำตามเคล็ดลับต่อไปนี้เพื่อสร้างเลย์เอาต์ที่เพิ่มประสิทธิภาพสำหรับหน้าจอทีวี

• สร้างเลย์เอาต์ที่มีการวางแนวแนวนอน หน้าจอทีวีจะแสดงในโหมดแนวนอนเสมอ
• วางตัวควบคุมการไปยังส่วนต่างๆ บนหน้าจอทางด้านซ้ายหรือขวาของหน้าจอแล้วบันทึก ในแนวตั้งสำหรับเนื้อหา
• สร้าง UI ที่แบ่งออกเป็นส่วนต่างๆ โดยใช้ส่วนย่อย ใช้กลุ่มมุมมอง เช่น GridView แทนที่จะเป็น ListView เพื่อให้ใช้พื้นที่หน้าจอแนวนอนได้ดีขึ้น
• ใช้กลุ่มมุมมอง เช่น RelativeLayout หรือ LinearLayout เพื่อจัดเรียงมุมมอง วิธีนี้ช่วยให้ระบบปรับตำแหน่งของมุมมองให้พอดีกับขนาดได้ การจัดข้อความ สัดส่วนภาพ และความหนาแน่นพิกเซลของหน้าจอทีวี
• เพิ่มระยะขอบให้เพียงพอระหว่างการควบคุมการจัดวางเพื่อหลีกเลี่ยงไม่ให้ UI รกตา

โอเวอร์สแกน

เลย์เอาต์สำหรับทีวีมีข้อกำหนดเฉพาะตัวบางอย่าง ซึ่งเป็นผลมาจากวิวัฒนาการของมาตรฐานทีวีเพื่อนำเสนอ ภาพเต็มหน้าจอของผู้ชม ด้วยเหตุนี้ อุปกรณ์ทีวีอาจตัดขอบด้านนอกของแอป เพื่อให้มั่นใจว่าหน้าจอทั้งหมดแสดงผล โดยทั่วไปเราเรียกลักษณะการทำงานนี้ว่า overscan

จัดตำแหน่งองค์ประกอบหน้าจอที่ผู้ใช้ต้องมองเห็นได้ตลอดเวลาภายในตัวเลือกที่ปลอดภัยขณะสแกน ของคุณ เพิ่มระยะขอบ 5% ที่ 48 dp ที่ขอบด้านซ้ายและขวา และ 27 dp ที่ด้านบนและด้านล่าง ขอบของเลย์เอาต์ช่วยให้แน่ใจว่าองค์ประกอบหน้าจอในเลย์เอาต์อยู่ภายในพื้นที่โอเวอร์สแกนที่ปลอดภัย ของคุณ

อย่าปรับองค์ประกอบหน้าจอพื้นหลังที่ผู้ใช้ไม่ได้โต้ตอบด้วยโดยตรงและอย่าตัดคลิป องค์ประกอบลงในพื้นที่ปลอดภัยจากการสแกน วิธีนี้จะช่วยดูแลให้องค์ประกอบหน้าจอพื้นหลังดูถูกต้อง บนทุกหน้าจอ

ตัวอย่างต่อไปนี้จะแสดงเลย์เอาต์ระดับรูทที่สามารถมีองค์ประกอบพื้นหลังและการวางซ้อน เลย์เอาต์ย่อยที่มีระยะขอบ 5% และอาจมีองค์ประกอบภายในพื้นที่ที่ปลอดภัยเกินการสแกน:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <!-- Screen elements that can render outside the overscan-safe area go here. -->

   <!-- Nested RelativeLayout with overscan-safe margin. -->
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginTop="27dp"
       android:layout_marginBottom="27dp"
       android:layout_marginLeft="48dp"
       android:layout_marginRight="48dp">

      <!-- Screen elements that need to be within the overscan-safe area go here. -->

   </RelativeLayout>

</RelativeLayout>

ข้อควรระวัง: อย่าใช้ระยะขอบเหนือการสแกนกับเลย์เอาต์หากคุณใช้แท็ก คลาส AndroidX Leanback เช่น BrowseSupportFragment หรือวิดเจ็ตที่เกี่ยวข้อง เนื่องจากการจัดวางเหล่านั้นมีขอบที่ปลอดภัยเกินการสแกนไว้อยู่แล้ว

สร้างข้อความและการควบคุมที่ใช้ได้

ทำตามเคล็ดลับต่อไปนี้เพื่อให้มองเห็นข้อความและการควบคุมในแอป TV จากระยะไกลได้ง่ายขึ้น

• แบ่งข้อความออกเป็นส่วนเล็กๆ เพื่อให้ผู้ใช้สแกนได้อย่างรวดเร็ว
• ใช้ข้อความสีอ่อนบนพื้นหลังสีเข้ม รูปแบบนี้จะอ่านง่ายขึ้นบนทีวี
• หลีกเลี่ยงแบบอักษรขนาดเล็กหรือแบบอักษรที่ทั้งมีลักษณะแคบมากและกว้างมาก ใช้แบบอักษร Sans-Serif อย่างง่ายและการลบรอยหยักเพื่อให้อ่านได้ง่ายขึ้น
• ใช้ขนาดแบบอักษรมาตรฐานของ Android ดังนี้

  <TextView
        android:id="@+id/atext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:singleLine="true"
        android:textAppearance="?android:attr/textAppearanceMedium"/>
  

• ทำให้วิดเจ็ตมุมมองทั้งหมดมีขนาดใหญ่พอที่จะให้ผู้ใช้เห็นอย่างชัดเจน วางห่างจากหน้าจอ 10 ฟุต วิธีที่ดีที่สุดคือใช้การกำหนดขนาดที่สัมพันธ์กับเลย์เอาต์แทนที่จะใช้ขนาดที่แน่นอน และ หน่วยพิกเซลอิสระ (dp) แทนที่จะเป็นหน่วยพิกเซลสัมบูรณ์ ตัวอย่างเช่น หากต้องการตั้งค่า ความกว้างของวิดเจ็ต ให้ใช้ wrap_content แทนการวัดพิกเซล และเพื่อตั้งค่า สำหรับวิดเจ็ต ให้ใช้ค่า dp แทนค่า px

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

จัดการทรัพยากรเลย์เอาต์สำหรับทีวี

เช่นเดียวกับอุปกรณ์ Android อื่นๆ ทั้งหมด ทีวีมีขนาดหน้าจอที่แตกต่างกันและสนับสนุนแตกต่างกัน ซึ่งรวมถึงแต่ไม่จำกัดเพียง 720p, 1080p และ 4K ตรวจสอบว่าแอปของคุณรองรับหน้าจอขนาดต่างๆ

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มประสิทธิภาพเลย์เอาต์และทรัพยากรสำหรับหน้าจอขนาดใหญ่ได้ที่ ภาพรวมความเข้ากันได้ของหน้าจอ

รูปแบบเลย์เอาต์ที่ควรหลีกเลี่ยง

วิธีการ 2-3 วิธีในการสร้างเลย์เอาต์ที่ไม่ได้ผล บนอุปกรณ์ทีวี ต่อไปนี้คือวิธีการในอินเทอร์เฟซผู้ใช้บางส่วนสำหรับ หลีกเลี่ยงเมื่อพัฒนาเลย์เอาต์สำหรับทีวี

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบเค้าโครงที่เหมาะสมสำหรับทีวี โปรดดูที่ คู่มือการออกแบบทีวี

จัดการบิตแมปขนาดใหญ่

อุปกรณ์ทีวีมีหน่วยความจำจำกัดเช่นเดียวกับอุปกรณ์ Android อื่นๆ ถ้าคุณสร้าง การจัดวางแอปที่มีรูปภาพที่มีความละเอียดสูงมาก หรือใช้รูปภาพความละเอียดสูงจำนวนมากในการดำเนินการ แอปของคุณอาจถึงขีดจำกัดของหน่วยความจำอย่างรวดเร็วและทำให้เกิดข้อผิดพลาดของหน่วยความจํา สำหรับ เราขอแนะนำให้ใช้ฟังก์ชันเลื่อนผ่าน ไลบรารีเพื่อดึงข้อมูล ถอดรหัส และแสดงบิตแมปในแอปของคุณ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการรับ ประสิทธิภาพที่ดีที่สุดเมื่อทำงานกับบิตแมป แนวทางปฏิบัติแนะนำเกี่ยวกับกราฟิกของ Android

นำเสนอการโฆษณาที่มีประสิทธิภาพ

สำหรับสภาพแวดล้อมของห้องนั่งเล่น เราขอแนะนำให้คุณใช้โซลูชันโฆษณาวิดีโอ แบบเต็มหน้าจอและปิดได้ภายใน 30 วินาที ฟังก์ชันสำหรับ การโฆษณาบน Android TV เช่น ปุ่มปิดและการคลิกผ่าน เข้าถึงได้โดยใช้ D-pad แทนการสัมผัส

Android TV ไม่มีเว็บเบราว์เซอร์ โฆษณาต้องไม่พยายาม เปิดเว็บเบราว์เซอร์หรือเปลี่ยนเส้นทางไปยังเนื้อหา Google Play Store ที่ไม่ได้ ใช้ได้กับอุปกรณ์ Android TV

หมายเหตุ: คุณใช้ชั้นเรียน WebView ได้ สำหรับการเข้าสู่ระบบบริการโซเชียลมีเดีย

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

การออกแบบสำหรับทีวี