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

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

สร้าง UI ที่สวยงามด้วยโค้ดที่น้อยที่สุดโดยใช้ Jetpack Compose สำหรับ Android TV OS

Compose สำหรับทีวี →

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

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

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

ธีม Leanback

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

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

ธีม NoTitleBar

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

<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 รายการใดรายการหนึ่งเป็นเรื่องปกติมาก การใช้ร่วมกันนี้ช่วยให้คุณใช้ฟีเจอร์ต่างๆ เช่น การย้อมสี Drawable ได้โดยไม่ต้องกังวลเกี่ยวกับ Android เวอร์ชันที่ทำงานบนอุปกรณ์ หากคุณ กำลังพัฒนาแอปที่ทำงานบน Android TV เท่านั้น อย่าใช้ AppCompatActivity เนื่องจากฟีเจอร์ที่เปิดใช้มีให้บริการใน Android TV อยู่แล้วหรือไม่มีความเกี่ยวข้อง

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

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

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

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

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

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

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

โอเวอร์สแกน

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

วางองค์ประกอบหน้าจอที่ผู้ใช้ต้องมองเห็นได้ตลอดเวลาไว้ในพื้นที่ปลอดภัยจากการโอเวอร์สแกน การเพิ่มระยะขอบ 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

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

จัดการแหล่งข้อมูลเลย์เอาต์สำหรับทีวี

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

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

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

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

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

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

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

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

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

แสดงโฆษณาที่มีประสิทธิภาพ

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

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

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

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

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