Leanback UI 工具包的版面配置

電視螢幕通常在約 10 英尺 (約 3 公尺) 處,雖然比大多數其他 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 應用程式的標準使用者介面元素,但不適合 TV 應用程式。如果您使用的不是 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 TV 無關。

如要在 Android 行動裝置和 Android TV 之間使用共用程式碼集建構應用程式,可能會因為主題設定而遇到一些挑戰。AppCompatActivity 和各種 AppCompat 小工具需要使用 Theme.AppCompat,而 Leanback UI 工具包片段則需要使用 FragmentActivityTheme.Leanback

如果您需要為 Android 行動裝置和 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),充分利用水平螢幕空間。
  • 請使用檢視區塊群組 (例如 RelativeLayoutLinearLayout) 來排列檢視畫面。這種做法可讓系統根據電視螢幕的大小、對齊方式、長寬比和像素密度調整檢視畫面位置。
  • 在版面配置控制項之間加入足夠的邊界,避免 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 或相關小工具),請不要將過度掃描邊界套用至版面配置,因為這些版面配置已融入過度掃描安全邊界。

建構可用的文字和控制項

只要按照下列提示操作,就能讓電視應用程式中的文字和控制項從遠處輕鬆查看:

  • 將文字分成多個小區塊,方便使用者快速瀏覽。
  • 在深色背景上使用淺色文字。這個樣式更容易在電視上閱讀。
  • 避免使用精簡和粗細的淺色字型或字型。使用簡單的 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 在各種螢幕大小、解析度和像素密度保持顯示,請使用密度獨立像素 (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 類別登入社群媒體服務。

其他資源

電視設計