創建TV的布局文件 · Android Training官方培訓課程中文版

> 編寫:[awong1900](https://github.com/awong1900) - 原文:[http://developer.android.com/training/tv/start/layouts.html](http://developer.android.com/training/tv/start/layouts.html) TV通常在3米外觀看，并且它比大部分安卓設備大的多。TV屏幕沒有達到類似小設備的精細細節和顏色的水平。這些因素需要你在頭腦中考慮，并設計出對于TV設備更為有用且好的用戶體驗的應用布局。這節課程描述了創建有效的TV應用布局的基本要求和實現細節。 ### 用TV布局主題安卓主題能給你的TV應用布局提供基礎框架。對于打算在TV設備上運行的應用[activity](# "An activity represents a single screen with a user interface.")，你應該用一款主題改變它的顯示。這節課程教你應該用哪個主題。 ### Leanback主題支持TV用戶界面的庫叫做[v17 leanback libarary](http://developer.android.com/tools/support-library/features.html#v17-leanback)，它提供了一個標準的TV [activity](# "An activity represents a single screen with a user interface.")主題，叫做`Theme.Leanback`。這一主題為TV應用程序建立了一致的視覺風格。強烈推薦在任何用了v17 leanback類的TV應用中使用這個主題。接下來的代碼展示如何在應用中對給定的[activity](# "An activity represents a single screen with a user interface.")使用這個主題： ~~~ <activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@style/Theme.Leanback"> ~~~ ### NoTitleBar主題在手機和平板的安卓應用中，標題欄是標準的用戶界面元素。但是在TV應用中是不適合的。如果沒有用v17 leanback類，你應該在TV [activity](# "An activity represents a single screen with a user interface.")使用這個主題來隱去標題欄的顯示。接下來的TV應用manifest代碼示范了如何應用這個主題來刪除標題欄。 ~~~ <application> ... <activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar"> ... </activity> </application> ~~~ ### 創建基本的TV布局 TV設備的布局應該遵循一些基本的指引確保它們在大屏幕下是可用的和有效率的。遵循這些技巧去創建最優化的TV橫屏布局。 - 創建橫屏布局。TV屏幕總是顯示在橫屏模式。 - 把導航控件放置在屏幕的左邊或者右邊，并且保持內容在垂直區間。 - 創建分離的UI，用[Fragment](http://developer.android.com/guide/components/fragments.html)，并且用框架如[GridView](http://developer.android.com/reference/android/widget/GridView.html)代替[ListView](http://developer.android.com/reference/android/widget/ListView.html)獲得屏幕水平方向更好的使用。 - 用框架如[RelativeLayout](http://developer.android.com/reference/android/widget/RelativeLayout.html)或者[LinearLayout](http://developer.android.com/reference/android/widget/LinearLayout.html)來排列視圖。基于對齊方式，縱橫比，和電視屏幕的像素密度，這個方法允許系統調整視圖大小的位置。 - 在布局控件之間添加足夠的邊際，以避免成為一個雜亂的UI。 ### Overscan 由于TV標準的演進，TV的布局有一個獨特的需求是總是希望給觀眾顯示全屏圖像。因為這個原因，TV設備可能剪掉應用布局的外邊緣去確保整個顯示器被填滿。這種行為通常簡稱為overscan。避免屏幕元素由于overscan被剪掉，可以在布局所有的邊緣增加總共10%的邊際。這換算為在[activity](# "An activity represents a single screen with a user interface.")的基礎布局上左右邊緣留48dp的邊際和在上下留27dp的邊際。接下來的布局例子展示了如何在TV應用根布局上設置這些邊際。 ~~~ <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/base_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:layout_marginTop="27dp" android:layout_marginLeft="48dp" android:layout_marginRight="48dp" android:layout_marginBottom="27dp" > </LinearLayout> ~~~ > **Caution**：如果你正在使用v17 leanback類，不要在布局中留overscan邊際，諸如[BrowseFragment](http://developer.android.com/reference/android/support/v17/leanback/app/BrowseFragment.html)或者相關控件，因為那些布局已經包含了overscan安全邊際。 ### 創建方便使用的文本和控件在TV應用布局中的文本和控件應該在一定距離外是容易查看和導航的。接下來的技巧是確保你的用戶界面元素在一定距離外更容易查看。 - 分解文本為小塊，用戶可以快速瀏覽。 - 在暗背景下用亮色文字。這種風格在TV中更容易閱讀。 - 避免輕字體或者字體既窄且有非常寬闊的筆觸效果。用簡單的sans-serif字體并且去掉鋸齒效果以增加可讀性。 - 用安卓標準的字體大小。 ~~~ <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"/> ~~~ - 確保所有的控件是足夠大，使人們站在屏幕3米外（更大的屏幕這個距離會更大）可以看清楚。做這個最好的方式是用布局相對大小而不是絕對大小，并且用密度無關像素（dip）單位代替像素單位。例如，設置控件的寬度，用`wrap_content`代替特定像素值，并且設置控件的邊際，用dip代替px值。更多關于密度無關像素和創建大尺寸屏幕的布局，查看[Support Mutiple Screens](http://developer.android.com/guide/practices/screens_support.html)。 ### 管理TV布局資源通常的高清晰度TV分辨率是720p，1080i，1080p。假定你的TV布局對象是一個1920 x 1080像素的屏幕，然后要允許安卓系統必要情況下縮減布局元素到720p。通常，降低分辨率（刪除像素）不會降低布局的外觀質量。但是增加分辨率會降低布局顯示的質量，并且會對用戶體驗造成負面影響。為了獲得最好的圖像縮放效果，盡可能提供[9-patch](http://developer.android.com/tools/help/draw9patch.html)圖片元素。如果在你的布局中使用低質量或者小的圖片，它們將出現馬賽克，模糊或者顆粒，這不是一個好的用戶體驗。用高質量圖片代替它。更多關于優化布局和大屏幕的資源文件問題，參考[Designing for multiple screens](http://developer.android.com/training/multiscreen/index.html)。 ### 避免反模式布局有幾種創建布局的方法你應該避免使用，因為它們不能在TV設備上很好的工作并且導致不好的用戶體驗。當開發TV布局時，以下一些用戶界面是你應該明確不能使用的。 - **重用手機和平板布局** - 不要重用沒有修改的手機或者平板應用的布局。為其他安卓設備的布局不適合TV設備，并且TV上應該簡化操作。 - **ActionBar** - 盡管這種用戶界面習慣是推薦使用在手機和平板上，但是他不適合TV界面。通常，狀態欄選項菜單（或者任何下拉菜單）堅決不要使用，因為用遙控器操作這樣的菜單是困難的。 - **ViewPager** - 在屏幕之間滑動能很好在手機或平板上工作，但是不要在TV上嘗試！更多信息關于設計適合TV的布局，參考[TV Design](http://developer.android.com/design/tv/index.html)指導。 ### 處理大圖片 TV設備，像任何其他安卓設備，內存有一定限制。如果你創建的應用中用了很高分辨率的圖片或者用了很多高分辨率圖片，它可能很快達到內存限制，并且導致內存溢出錯誤。避免這些類型的問題，遵循以下方法： - 僅當圖片顯示在屏幕時才加載。例如，當在[GridView](http://developer.android.com/reference/android/widget/GridView.html)或者[Gallery](http://developer.android.com/reference/android/widget/Gallery.html)中顯示多個圖片時，僅當[getView()](http://developer.android.com/reference/android/widget/Adapter.html#getView(int, android.view.View, android.view.ViewGroup))在視圖的[Adapter](http://developer.android.com/reference/android/widget/Adapter.html)中被調用時才加載圖片。 - 在[Bitmap](http://developer.android.com/reference/android/graphics/Bitmap.html)視圖中調用[recycle()](http://developer.android.com/reference/android/graphics/Bitmap.html#recycle())不再需要。 - 對存儲在內存中[集合](http://developer.android.com/reference/java/util/Collection.html)中的位圖對象使用[弱引用](http://developer.android.com/reference/java/lang/ref/WeakReference.html)。 - 如果你從網絡上獲取圖片，用[AsyncTask](http://developer.android.com/reference/android/os/AsyncTask.html)去操作并且存儲它們在設備上以方便更快的存取。絕對不要在應用的主線程操作網絡傳輸。 - 當下載大圖片時，降低圖片到合適的尺寸，否則，下載圖片本身可能導致內存溢出問題。更多信息關于獲得最好的圖片操作性能，參考 [Displaying Bitmaps Efficiently](http://developer.android.com/training/displaying-bitmaps/index.html)。 ### 提供有效的廣告安卓TV的廣告必須總是全屏。廣告不可以出現在內容的旁邊或者覆蓋內容。用戶應當能用D-pad控制器關閉廣告。視頻廣告在開始時間后的30秒內應當能被關閉。安卓TV不提供網頁瀏覽器。你的廣告不應該嘗試去啟動網頁瀏覽器或者重定向到Google Play Store。 > **Note**：你能用[WebView](http://developer.android.com/reference/android/webkit/WebView.html)類登入服務器，如Google+和Facebook。 [下一節: 設計TV導航](#)