打造電視版面配置

一般而言,電視螢幕在距離 10 英尺遠的位置通常會比一般的 Android 裝置螢幕大上許多,但電視螢幕的細節和顏色通常與較小的裝置螢幕不同。您必須考量這些因素,製作電視裝置的應用程式版面配置,才能打造實用且愉快的使用者體驗。

本指南說明建構有效電視應用程式版面配置的基本需求和實作詳細資料。

詳情請參閱為電視設計

使用電視的版面配置主題

Android 主題可以為 TV 應用程式中的版面配置提供基礎。您可以使用主題,修改要在電視裝置上執行的應用程式活動顯示方式。本節說明要使用的主題。

Leanback 主題

Leanback Androidx 程式庫包含 Theme.Leanback,這是提供一致的視覺樣式的電視活動主題。建議您針對使用 AndroidX Leanback 類別建構的任何電視應用程式使用這個主題。以下程式碼範例說明如何將此主題套用至活動:

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

NoTitleBar 主題

標題列是適用於手機和平板電腦 Android 應用程式的標準使用者介面元素,但不適用於電視應用程式。如果您未使用 AndroidX Leanback 類別,請將 NoTitleBar 主題套用至電視活動,藉此隱藏標題列顯示。以下電視應用程式資訊清單中的程式碼範例示範如何套用這個主題,以移除標題列的顯示方式:

<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 和各種 AppCompat 小工具需要使用 Theme.AppCompat,而 Leanback 片段預期您會使用 FragmentActivityTheme.Leanback

如果 Android 行動裝置和 Android TV 必須使用相同的基本活動,或是想根據 AppCompat 小工具 (例如 AppCompatImageView) 使用自訂檢視畫面,請使用 Theme.AppCompat.Leanback 主題。這些主題提供 AppCompat 的所有主題設定,並提供 Leanback 專用值。

自訂 Theme.AppCompat.Leanback 主題的方式與其他主題相同。舉例來說,如果要變更 Leanback 的 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),以便更有效地運用水平螢幕空間。
  • 使用 RelativeLayoutLinearLayout 等檢視區塊群組來排列檢視畫面。這個方法可讓系統根據電視螢幕的大小、對齊方式、長寬比和像素密度調整檢視畫面的位置。
  • 請在版面配置控制項之間加入足夠的邊界,避免 UI 過於雜亂。

遮視範圍

由於電視的標準不斷演進,且希望一律向觀眾顯示全螢幕圖片,因此電視版面配置還必須符合一些獨特需求。因此,電視裝置可能會裁剪應用程式版面配置的外緣,確保填滿整個螢幕。這種行為通常稱為「過度掃描」

請安排畫面元素,確保在遮蔽區域安全區域內一律必須向使用者顯示的畫面元素。將左側和右側邊緣 48 dp 的 5% 邊界加上位於上下邊緣 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 類別 (例如 BrowseFragment 或相關小工具),請勿在版面配置中套用過度掃描邊界,因為這些版面配置已納入過度掃描安全邊界。

建構可用的文字和控制項

請按照下列提示操作,讓使用者即使遠處也能輕鬆查看電視應用程式中的文字和控制選項:

  • 將文字拆成小區塊,方便使用者快速掃描。
  • 在深色背景中使用淺色文字。在電視上閱讀時更容易閱讀這個樣式。
  • 避免使用筆劃寬度過窄和廣泛的字體輕型字型或字型。使用簡單的 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"/>
    
  • 調整所有 View 小工具的大小,讓與螢幕相距 10 英尺遠的人清楚看見。最佳做法是使用版面配置相關尺寸,而非絕對大小,使用密度獨立像素 (dp) 單位,而非絕對像素單位。舉例來說,如要設定小工具的寬度,請使用 wrap_content 而非像素測量;如要設定小工具的邊界,請使用 dp 值,而非 px 值。

如要進一步瞭解密度獨立像素,以及建構用於處理較大螢幕尺寸的版面配置,請參閱「螢幕相容性總覽」。

管理電視的版面配置資源

如同所有其他 Android 裝置,電視有不同的螢幕大小及支援不同的解析度,包括但不限於 720p、1080p 和 4K。請確認您的應用程式支援不同的螢幕大小

不同的螢幕大小和解析度有不同的像素密度。為了在各種螢幕大小、解析度和像素密度中維持 UI 外觀,請使用密度獨立像素 (dp) 定義 UI 測量結果,而非像素。以下說明不同電視面板解析度的螢幕像素密度。

面板解析度 螢幕像素密度
720p tvdpi
1080 xhdpi
4K xxxhdpi
詳情請參閱「支援不同的像素密度」。

如要進一步瞭解如何針對大螢幕最佳化版面配置和資源,請參閱「螢幕相容性總覽」。

應避免的版面配置模式

您可以透過幾種方法建構無法在電視裝置上順利運作的版面配置。以下是開發電視版面配置時應避免使用的使用者介面方法。

  • 重複使用手機或平板電腦版面配置:未經修改,請勿重複使用手機或平板電腦應用程式的版面配置。專為其他 Android 裝置板型規格建構的版面配置不適合電視裝置,而且必須簡化以便在電視上操作。
  • 使用 ActionBar雖然建議在手機和平板電腦上使用動作列,但這並不適用於電視介面。我們不建議電視應用程式使用動作列選項選單或任何下拉式選單,因為難以透過遙控器瀏覽這類選單。
  • 使用 ViewPager在手機或平板電腦上切換畫面時很實用,但請勿在電視上試用這項功能!

如要進一步瞭解如何設計適合電視的版面配置,請參閱電視設計指南。

處理大型點陣圖

電視裝置 (例如其他 Android 裝置) 的記憶體容量有限。如果您使用超高解析度圖片來建構應用程式版面配置,或在應用程式的運作中使用許多高解析度圖片,則可能會快速達到記憶體限制,並導致記憶體錯誤。大多數情況下,我們都建議您使用 Glide 程式庫在應用程式內擷取、解碼和顯示點陣圖。如要進一步瞭解如何在使用點陣圖時獲得最佳效能,請參閱一般的 Android 圖像最佳做法

提供出色的廣告

針對客廳環境,建議您使用全螢幕且可在 30 秒內關閉的影片廣告解決方案。Android TV 廣告功能 (例如關閉按鈕和點閱) 必須透過 D-Pad 存取,而非觸控。

Android TV 並未提供網路瀏覽器。您的廣告不得嘗試啟動網路瀏覽器,也不得重新導向至未獲 Android TV 裝置核准的 Google Play 商店內容。

注意:您可以使用 WebView 類別登入社群媒體服務。