Leanback UI 工具包的版面配置

使用 Compose 建構更優質的內容
使用 Jetpack Compose for Android TV OS 以最少的程式碼建立精美的 UI。

電視螢幕通常在約 10 英尺 (約 3 公尺) 處以內觀賞,雖然遠比大多數其他 Android 裝置螢幕大得多,但電視螢幕呈現的細節和顏色色彩和色彩程度和裝置較小的螢幕不太一樣。這些因素需要您在建立應用程式版面配置時,將電視裝置納入考量,才能打造實用且愉悅的使用者體驗。

使用電視的版面配置主題

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

Leanback 主題

androidx.leanback 程式庫包含 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 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 分為多個區段的 UI。使用 GridView 等檢視區塊群組 (而非 ListView),更有效地運用水平螢幕空間。
  • 請使用 RelativeLayoutLinearLayout 等檢視區塊群組來排列檢視畫面。這個方法可讓系統根據電視螢幕的大小、對齊、長寬比和像素密度,調整檢視畫面位置。
  • 在版面配置控制項之間加入足夠的邊界,避免 UI 畫面雜亂。

遮視範圍

由於電視版面配置會不斷演進,以全螢幕模式向觀眾呈現全螢幕畫面,因此電視版面配置有一些獨特規定。因此,電視裝置可能會裁剪應用程式版面配置的外緣,確保填滿整個螢幕。這個行為通常稱為「過度掃描」

隨時將螢幕元素放在必須向使用者顯示的過度掃描安全區域。在版面配置的左側和右側邊緣加入 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 外觀,請使用密度獨立像素 (dp) 定義 UI 測量結果,而非像素。以下概略說明各種電視面板解析度的螢幕像素密度。

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

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

應避免的版面配置模式

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

  • 重複使用手機或平板電腦版面配置:請勿在未經修改的情況下重複使用手機或平板電腦應用程式的版面配置。專為其他 Android 裝置板型規格建構的版面配置,並不適合電視裝置,因此必須簡化,才能在電視上操作。
  • 使用 ActionBar雖然動作列適用於手機和平板電腦,但不適合用於電視介面。我們強烈建議不要使用動作列選項選單或任何下拉式選單,以免電視應用程式難以透過遙控器瀏覽這類選單。
  • 使用 ViewPager在手機或平板電腦上滑動可順利運作,但請勿在電視上嘗試這個做法!

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

處理大型點陣圖

電視裝置和其他 Android 裝置一樣,記憶體容量有限。如果您使用高解析度圖片建構應用程式版面配置,或在運作應用程式時使用許多高解析度圖片,系統可能會快速進入記憶體限制,造成記憶體不足。在大多數情況下,我們都建議使用 Glide 程式庫,在應用程式中擷取、解碼及顯示點陣圖。如要進一步瞭解如何在使用點陣圖時獲得最佳效能,請參閱一般 Android 圖形最佳做法

提供有效的廣告

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

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

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

其他資源

電視應用程式的設計