Leanback UI 工具包的版面配置

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

電視螢幕通常在約 10 英尺 (約 3 公尺) 處以內觀看,但比大多數距離都高出許多 電視螢幕無法提供相同等級的 細節和顏色,讓裝置螢幕呈現小螢幕細節這些因素需要您建立應用程式版面配置,以及 應將電視裝置納入考量,為使用者打造實用且愉快的使用者體驗。

使用電視的版面配置主題

Android 的「主題」可根據基準 版面配置。請使用主題修改應用程式活動的顯示方式 是電視裝置所使用的應用程式本節說明適用的主題。

Leanback 主題

androidx.leanback 程式庫包含 Theme.Leanback,這是適用於 呈現一致的視覺風格所有建構的 TV 應用程式都採用這個主題 與 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 行動裝置和 Android TV 的共用程式碼集,可以 因此可能會面臨一些挑戰AppCompatActivity和各種 AppCompat 小工具需要用到 Theme.AppCompat,而 您需要使用 Leanback UI 工具包片段 FragmentActivityTheme.Leanback

需要在 Android 行動裝置和 Android TV 上使用相同的基本活動,或是 自訂檢視畫面,根據以下 AppCompat 個小工具: AppCompatImageView, 使用 Theme.AppCompat.Leanback 主題。這些佈景主題可提供各種主題設定 ,並提供 AppCompat 的 Leanback 專屬值。

你可以自訂 Theme.AppCompat.Leanback 主題,方法與自訂其他主題相同 主題。舉例來說,如果您想變更 Pod 中專屬的值 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 畫面雜亂。

遮視範圍

由於電視的標準不斷演變,為了呈現 全螢幕圖片因此,電視裝置可能會裁剪應用程式的外側邊緣 以確保整個螢幕填滿。這種行為通常稱為 過度掃描

隨時調整畫面元素的位置,確保畫面隨時都能在 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 或相關小工具,因為這些版面配置已納入可安全邊界的邊界。

建構可用的文字和控制項

請按照下列提示操作,讓 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 定義 UI 測量方法是使用 密度獨立像素 (dp),而非像素。不同電視面板的螢幕像素密度 解決方法如下所述。

面板解析度 螢幕像素密度
720p tvdpi
1080 xhdpi
4K xxxhdpi
詳情請見 支援不同的像素密度: 瞭解詳情

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

應避免的版面配置模式

有幾種方法可以建構無法運作的版面配置 或電視裝置以下列舉幾種使用者介面 避免為電視設計版面配置

  • 重複使用手機或平板電腦版面配置:請勿重複使用手機或手機的版面配置 且未進行任何修改的平板電腦應用程式。未針對其他 Android 裝置板型規格建立的版面配置 適用於 TV 裝置,且必須簡化,才能在電視上操作。
  • 使用 ActionBar建議使用動作列 不適合在手機和平板電腦上使用。使用 為避免電視應用程式,強烈建議不要使用動作列選項選單或任何下拉式選單 要利用遙控器瀏覽這類選單
  • 使用 ViewPager在手機或平板電腦上滑動就能順利運作。 但別在電視上嘗試這件事!

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

處理大型點陣圖

電視裝置和其他 Android 裝置一樣,記憶體容量有限。如果您要建立 應用程式版面配置包含高解析度圖片,或在作業中使用許多高解析度圖片 可能會快速遇到記憶體限制,導致記憶體不足。大多數 針對案例,我們建議您使用 Glide 程式庫,以便在應用程式中擷取、解碼及顯示點陣圖。如要進一步瞭解如何取得 點陣圖的運作效能最佳,請參閱我們的一般 Android 圖形最佳做法

提供有效的廣告

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

Android TV 並未提供網路瀏覽器。廣告不得試圖 啟動網路瀏覽器,或重新導向至未登入 Google Play 商店的內容 通過核准。

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

其他資源

電視應用程式的設計