電視螢幕通常是從約 10 英尺 (約 3 公尺) 處觀看,雖然比大多數其他 Android 裝置的螢幕大得多,但電視螢幕提供的細節和色彩層次,不如小型裝置螢幕。因此,您必須以 TV 裝置為考量,建立應用程式版面配置,才能提供實用且愉悅的使用者體驗。
使用電視版面配置主題
Android 主題可做為 TV 應用程式版面配置的基礎。使用主題修改應用程式活動的顯示方式,以便在電視裝置上執行。本節說明要使用的主題。
Leanback 主題
已淘汰的 androidx.leanback 程式庫包含 Theme.Leanback,這是 TV 活動的主題,可為 Leanback UI 工具包應用程式提供一致的視覺風格。使用 AndroidX Leanback 類別建構的任何 TV 應用程式,都適用這個主題。下列程式碼範例說明如何將這個主題套用至活動:
<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 TV。
如果您要建構的應用程式在 Android 手機和 Android TV 之間共用程式碼集,可能會因為主題設定而遇到一些挑戰。AppCompatActivity 和各種 AppCompat 小工具需要使用 Theme.AppCompat,而 Leanback UI 工具包片段則需要使用 FragmentActivity 和 Theme.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,以便更充分利用水平螢幕空間。 - 使用檢視區塊群組 (例如
RelativeLayout或LinearLayout) 排列檢視區塊。採用這種做法後,系統就能根據電視螢幕的大小、對齊方式、顯示比例和像素密度,調整檢視區塊的位置。 - 在版面配置控制項之間加入足夠的邊界,以免 UI 雜亂。
遮視範圍
由於電視標準不斷演進,現在會向觀眾呈現全螢幕畫面,因此電視版面配置有一些獨特規定。因此,電視裝置可能會裁剪應用程式版面配置的外側邊緣,確保填滿整個畫面。這種行為通常稱為「過掃」。
將必須隨時向使用者顯示的畫面元素,放置在過掃安全區域內。在版面配置的左右邊緣加入 48 dp 的 5% 邊界,以及在頂端和底端邊緣加入 27 dp 的 5% 邊界,有助於確保版面配置中的畫面元素位於過掃安全區域內。
請勿調整使用者未直接互動的背景畫面元素,也不要將元素裁剪至過掃安全區域。這種做法可確保背景畫面元素在所有畫面上看起來都正確無誤。
以下範例顯示的根層級版面配置可包含背景元素,以及具有 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 或相關小工具),請勿將過掃描邊界套用至版面配置,因為這些版面配置已納入過掃描安全邊界。
建構可用的文字和控制項
按照下列提示操作,即可在遠處輕鬆看清楚電視應用程式中的文字和控制項:
- 將文字分成小段,方便使用者快速瀏覽。
- 在深色背景上使用淺色文字。這種樣式在電視上更容易閱讀。
- 避免使用細體字型,或同時有極細和極粗筆畫的字型。 使用簡單的無襯線字型和反鋸齒功能,提高可讀性。
- 使用 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 值。
如要進一步瞭解與密度無關的像素,以及如何建構版面配置來處理較大的螢幕尺寸,請參閱「螢幕相容性總覽」。
管理 TV 的版面配置資源
與所有其他 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 類別登入社群媒體服務。