โดยปกติแล้วจะดูหน้าจอทีวีจากระยะประมาณ 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 กับกิจกรรม TV เพื่อไม่ให้แสดงแถบชื่อ ตัวอย่างโค้ดต่อไปนี้
จากไฟล์ 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 ธีมใดธีมหนึ่งเป็นเรื่องปกติมาก การผสมผสานนี้ช่วยให้คุณใช้ฟีเจอร์ต่างๆ
เช่น การปรับสี Drawable ได้โดยไม่ต้องกังวลเกี่ยวกับเวอร์ชันของ Android ที่ทำงานในอุปกรณ์ หากคุณ
กำลังพัฒนาแอปที่ทำงานใน Android TV เท่านั้น โปรดอย่าใช้
AppCompatActivity เนื่องจากฟีเจอร์ที่เปิดใช้จะพร้อมใช้งานใน
Android TV อยู่แล้วหรือไม่เกี่ยวข้อง
หากคุณกำลังสร้างแอปที่มีฐานของโค้ดที่ใช้ร่วมกันระหว่าง Android บนอุปกรณ์เคลื่อนที่และ Android TV คุณอาจพบปัญหาบางอย่างเนื่องจากการกำหนดธีม
AppCompatActivity และวิดเจ็ตต่างๆ ของ
AppCompat กำหนดให้คุณใช้ Theme.AppCompat ขณะที่
ส่วนประกอบของชุดเครื่องมือ 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 ดูรก
โอเวอร์สแกน
เลย์เอาต์สำหรับทีวีมีข้อกำหนดเฉพาะบางอย่างเนื่องจากการพัฒนามาตรฐานทีวีเพื่อนำเสนอ ภาพแบบเต็มหน้าจอต่อผู้ชม ด้วยเหตุนี้ อุปกรณ์ทีวีจึงอาจตัดขอบด้านนอกของเลย์เอาต์แอป เพื่อให้แสดงผลเต็มหน้าจอ โดยทั่วไปแล้วพฤติกรรมนี้เรียกว่า 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
หรือวิดเจ็ตที่เกี่ยวข้อง เนื่องจากเลย์เอาต์เหล่านั้นมีขอบที่ปลอดภัยสำหรับการสแกนเกินอยู่แล้ว
สร้างข้อความและการควบคุมที่ใช้งานได้
ทำตามเคล็ดลับต่อไปนี้เพื่อให้ข้อความและการควบคุมในแอปทีวีมองเห็นได้ง่ายขึ้นจากระยะไกล
- แบ่งข้อความออกเป็นส่วนเล็กๆ ที่ผู้ใช้สามารถสแกนได้อย่างรวดเร็ว
- ใช้ข้อความสีอ่อนบนพื้นหลังสีเข้ม ซึ่งจะอ่านได้ง่ายกว่าบนทีวี
- หลีกเลี่ยงแบบอักษรที่มีน้ำหนักเบาหรือแบบอักษรที่มีทั้งเส้นที่แคบมากและกว้างมาก ใช้แบบอักษร 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) แทนพิกเซล ความหนาแน่นของพิกเซลหน้าจอสำหรับความละเอียดของแผงทีวีต่างๆ ระบุไว้ด้านล่าง
| ความละเอียดของแผง | ความหนาแน่นของพิกเซลหน้าจอ |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
ดูข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มประสิทธิภาพเลย์เอาต์และทรัพยากรสำหรับหน้าจอขนาดใหญ่ได้ที่ ภาพรวมความเข้ากันได้ของหน้าจอ
รูปแบบเลย์เอาต์ที่ควรหลีกเลี่ยง
มีแนวทาง 2-3 อย่างในการสร้างเลย์เอาต์ที่ทำงานได้ไม่ดีบนอุปกรณ์ทีวี ต่อไปนี้คือแนวทางอินเทอร์เฟซผู้ใช้บางส่วนที่ควรหลีกเลี่ยงเมื่อพัฒนาเลย์เอาต์สำหรับทีวี
- การนำเลย์เอาต์ของโทรศัพท์หรือแท็บเล็ตกลับมาใช้ซ้ำ: อย่านำเลย์เอาต์จากแอปโทรศัพท์หรือ แท็บเล็ตกลับมาใช้ซ้ำโดยไม่มีการแก้ไข เลย์เอาต์ที่สร้างขึ้นสำหรับอุปกรณ์ Android รูปแบบอื่นๆ ไม่เหมาะกับอุปกรณ์ทีวีและต้องทำให้เรียบง่ายเพื่อการทำงานบนทีวี
- การใช้
ActionBar: แม้ว่าแถบการทำงานจะแนะนำให้ใช้ในโทรศัพท์และแท็บเล็ต แต่ก็ไม่เหมาะกับอินเทอร์เฟซทีวี เราไม่แนะนำให้ใช้ เมนูตัวเลือกแถบการทำงานหรือเมนูแบบเลื่อนลงสำหรับแอปทีวี เนื่องจากความยากในการไปยังส่วนต่างๆ ของเมนูด้วยรีโมตคอนโทรล - การใช้
ViewPager: การเลื่อนระหว่างหน้าจออาจใช้งานได้ดีบนโทรศัพท์หรือแท็บเล็ต แต่โปรดอย่าลองทำบนทีวี
ดูข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบเลย์เอาต์ที่เหมาะกับทีวีได้ที่คู่มือการออกแบบทีวี
จัดการบิตแมปขนาดใหญ่
อุปกรณ์ทีวีมีหน่วยความจำจำกัดเช่นเดียวกับอุปกรณ์ Android อื่นๆ หากคุณสร้างเลย์เอาต์แอปด้วยรูปภาพที่มีความละเอียดสูงมากหรือใช้รูปภาพที่มีความละเอียดสูงจำนวนมากในการทำงานของแอป แอปอาจใช้หน่วยความจำจนถึงขีดจำกัดอย่างรวดเร็วและทำให้เกิดข้อผิดพลาดเนื่องจากหน่วยความจำไม่เพียงพอ ในกรณีส่วนใหญ่ เราขอแนะนำให้ใช้ไลบรารี Glide เพื่อดึงข้อมูล ถอดรหัส และแสดงบิตแมปในแอปของคุณ ดูข้อมูลเพิ่มเติมเกี่ยวกับการได้รับ ประสิทธิภาพที่ดีที่สุดเมื่อทำงานกับบิตแมปได้ที่แนวทางปฏิบัติแนะนำด้านกราฟิกของ Android ทั่วไป
ให้บริการโฆษณาที่มีประสิทธิภาพ
สำหรับสภาพแวดล้อมในห้องนั่งเล่น เราขอแนะนำให้คุณใช้โซลูชันโฆษณาวิดีโอ ที่เป็นแบบเต็มหน้าจอและปิดได้ภายใน 30 วินาที ฟังก์ชันการทำงานสำหรับ การโฆษณาบน Android TV เช่น ปุ่มปิดและการคลิกผ่าน ต้อง เข้าถึงได้โดยใช้ D-pad แทนการแตะ
Android TV ไม่มีเว็บเบราว์เซอร์ โฆษณาต้องไม่พยายาม เปิดเว็บเบราว์เซอร์หรือเปลี่ยนเส้นทางไปยังเนื้อหาใน Google Play Store ที่ไม่ได้รับอนุมัติสำหรับอุปกรณ์ Android TV
หมายเหตุ: คุณใช้คลาส WebView
สำหรับการเข้าสู่ระบบบริการโซเชียลมีเดียได้