電視螢幕通常是從約 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
類別登入社群媒體服務。