GoogleTV用户接口开发

GoogleTV
screen size and density

Fontguidelines

Widgetguidlines

Layoutguidelines

Displayresolution
guidelines

HandlingInput
events

Controllingnavigation
and focus

Usingthe
left side navigation bar

Usingfragments

Handlinglarge/high
resolution images

本课题讨论在GoogleTV上设计应用的原则。通常，我们建议你通过“holo”专题熟悉GoogleTV基本应用开发。本专题，我们假定你已经系统的了解这个平台。这里主要介绍如何为你的应用订制或者设置主题。

GoogleTV screen size and density

GoogleTV设备一般归为大屏幕，而不是超大屏幕。如果你的应用为不同的屏幕大小提供了多种资源，GoogleTV
自动会使用最大的一组。尽管TV使用比移动设备更大的屏幕，而用户也是在一定距离上使用电视，因此最终导致UI的大小也是成比例缩小。

使用1080p分辨率的GoogleTV
设备归为高清，而使用720p的归为标清。如果你的应用为不同分辨率提供了不同的资源，GoogleTV会自动下载适合显示设备的资源。

记住，多种资源是可选的，Android根据显示器设置自动对资源进行放缩调整。

Fontguidelines

如果你要设置字体大小，使用与比例尺无关的像素单位（sp），这能够允许用户来调整字体大小效果。android:textSizeattribute和android.util.DisplayMetrics.scaledDensity分别设置字体大小和字体显示比例系数。当然，采用@android:style/TextAppearance.XXXX的默认设置也能工作的很好。如

<TextViewstyle="@android:style/TextAppearance.Small">
<TextViewstyle="@android:style/TextAppearance.Medium">
<TextViewstyle="@android:style/TextAppearance.Large">

Widgetguidelines

使用“10英尺UI”设计原则：确保控件在用户浏览的距离上能够清楚的看到。最好的方法就是使用相对布局，如Wrap_content,使用密度无关像素，避免决定像素。

Layoutguidelines

使用动态布局，如RelativeLayout或LinearLayout来排列你的显示控件，代替使用规定位置的绝对布局。使用动态布局，允许Android根据GoogleTV设备屏幕大小、排列方式、纵横比、像素密度来调制显示对象的位置。

无论何时，排列可视化对象应该根据上层布局而不是同层对象。例如，在UI上，左对齐一个可视化对象，应该设置android:alignParentLeft属性。同样可以使用android:alignParentRight来将对象布局在右侧，避免使用android:toRightOf的相对同级别布局。【很明显，相对同级别的布局，如果一个要改，那么麻烦了，乱了】。

如果你要使用相对布局，一定要为每个对象设置最小间距，使用dp单位。这保证你的屏幕布局不会太拥挤。记住使用间距而不是内边距；一般来讲，内边距控制对象内空间，而间距控制对象之间的空间。

Displayresolution guidelines

不要假定GoogleTV设备的显示分辨率。与移动设备不同，由于存在过扫描的因素，你的程序可能不能使用电视全屏大小。过扫描减少了TV的可用屏幕边。过扫描是电视传输方面的技术，它会减少电视的可用屏幕边。额外的空间可以用来提供附加属性，如提供隐藏屏幕，调整边界画面失真。由于各种各样的因素，没有形成统一的标准。

对GoogleTV设备来讲，这导致可用屏幕区域要比全屏显示小。例如，16:9比率的1080p应该具有1920*1080的分辨率。由于过扫描，每个边减少5%，实际分辨率仅为1728x
972.

GoogleTV在初始化安装时，根据用户设置可视图画大小调整过扫描。因此，GoogleTV
能够获取实际的显示分辩率，Display.getMetrics()返回的对象DisplayMetrics包含实际的显示分辨率信息。

由于过扫描，你不能为GoogleTV设备假定显示分辨率。相反，如果基于DisplayMetrics对象的实际分辩率数据进行计算，允许通过Android来调整你的UI的大小。

为了确保你的UI能够在所有的电视中准确的显示，你应该调节可视区域的大小，然后测试你的程序。

Start bysetting an actual display size that is smaller than the display sizethe TV can use:

Go toSettings >
Picture and Sound >Picture Size. This displays the
Overscandialog.

Select
No,start with default. On the screen, a black box entitledMaximize your screen area appears. The box issurrounded by a light blue edge.

Click
Next.At each succeeding screen, click Next but do notadjust the edges of the box. At the last screen, click
Saveand restart to reboot the Google TV device.

After yourdevice reboots, examine the screen closely. You should see that theedges of the Home screen have a large
black border around them.

Now test yourapplication. The entire application with all of its UI controlsshould be visible and should appear
undistorted.

Next, setthe actual display size to be slightly
larger thanthe TV's viewable area:

Go toSettings >
Picture and Sound >Picture Size to display the
Overscandialog.

Click
Yes,start with current. On the screen, a black box entitledMaximize your screen area appears. The box issurrounded by a light blue edge.

Click
Next.On the next screen, press Up to move the black boxedge one line up towards the top edge of the entire screen. When thebox edge reaches the screen edge, and the blue border is no longervisible, press
Up 10 times more to adjust thescreen area beyond the actual viewable area.

Repeat step 3to adjust the right, bottom, and left edges of the screen.

At the lastscreen, click
Save and restart to reboot the GoogleTV device.

Now test yourapplication. The entire application with all of its UI controlsshould be visible and should appear
undistorted.

HandlingInput events

GoogleTV设备的标准输入硬件包含，鼠标、字母键盘、方向键、媒体键。另外，你也应该期望不包含触摸屏接口。一些设备可能通过鼠标或者方向键模拟了一些触摸屏特征子集。

为了响应输入设备，你的应用界面应该包含一些可视化对象来触发事件或者提供输入。这即是UI控件。你的用户通过方向键与UI交互，或者导航到一个控件上，或者触发一个输入。在控件之间导航，用户可以使用上下左右键。GoogleTV根据一套内部算法将焦点移动到最近的控件上。用户按下方向键中间的确认键，发送KeyEvent.KEYCODE_DPAD_CENTER，或者通过回车键发送KeyEvent.KEYCODE_ENTER.

在某些情况下，导航任务并没有结束，因为控件还有内部的导航，例如，用户需要在GridView内部的元素之间导航。你这种情况下，你需要提供给用户控件内一个或者多个子控件保存或者取消工作的能力。

Controllingnavigation and focus

大部分Android设备都是触摸设备，而GoogleTV设备不是。因此，所有的控件都可以通过方向键来控制，并且当他们被选中或者获得焦点时，应以适合的亮度高亮显示。测试你的程序，确保在每个Activity内，可以用方向键导航到每一个控件。

确保控件之间的方向键移动是直观和可预测的。例如，如果你想垂直滚动屏幕中的内容，确保控制条在左侧。这种情况下，你可以使用LeftNavLibrary来将控制条设在左侧。如果你想水平滚动屏幕中的内容，确保控制条在底部，使用标准ActionBar来设置。还有，确保方向键导航不能随机的跳动或者忽略某些控件。所有的控件应当以直观的方式导航到。

如果屏幕布局使得导航困难，或者你需要用户按照特定的方式来移动，你需要为你的控件建立直观的导航。使用android:nextFocusUp,android:nextFocusDown,android:nextFocusLeft,andandroid:nextFocusRight来为你的控件建立直观的导航。当用户按下上下左右键时就会就会指定要获得焦点的按钮。例如android:nextFocusUp通过KeyEvent.KEYCODE_DPAD_UP.触发。当然，你可以通过android:nextFocusForward制定下一个按钮获得焦点，它由KeyEvent.KEYCODE_TAB触发。

如果需要，你也可以让一个可是对象获得焦点，尽管正常情况下是不可能的。为了做到这一点，使用android:focusable属性。

如果要更详细的学习非触摸屏版本的UI设计，参看android开发向导中的ControllingFocus
Order专题。

你应该使用合理的高亮来表明获得焦点的和选中的状态。这使得用户很容易的看到控件的选中或者获得焦点的状态。同样，要保证颜色的协调一致。可以使用ColorState
List Resources.来实现。

Usingthe left side navigation bar

如果你的屏幕布局有垂直滚动成分，建议使用左侧导航栏。要实现这个，就要在你程序里导入Leftside
Navigationlibrary。这个库包含将动作控件布局在屏幕左侧的类。对垂直滚动布局来说，左侧的导航控制比顶部的常规的Actionbar控件更好，理由是GoogleTV应该只由方向键导航。如果当前的焦点在垂直滚动区域内，你必须强制用户穿过整个垂直列表才能到达操作控制栏。相反，使用左侧导航栏，用户只需一次简单操作即能到达左侧，从而退出垂直活动区，到达操作控制栏。

UsingFragments

GoogleTV应用通常工作在比较大的屏幕控件中，AndroidFragment
属性是一个很好利用这个较大区域空间的方法。具体看示例。

Handlinglarge/high resolution images

GoogleTV设备具有更高的显示分辨率。如果在你的布局中，提供了低分辨率或者小的图片，看起来是失真的。对用户来讲，这不是好的体验。相反，应采用高分辨率的图像来代替。记住，下载和存储高分辨率的图像可能引起内存溢出错误。为了避免这种错误，遵循以下建议：

只有在屏幕上显示时才加载图片。例如，在GridView，ListView或者Gallery显示多幅图片的应用中，只在调用GetView方法中，加载一副图片。

在不在使用时，调用recycle()进行回收；

使用WeakReferences存储图片对象的引用；

如果要从网络上接收图片，使用AsyncTask异步方式一次全部接收或者只接收需要的。不要让网络传输影响你的主显示线程。如果可能，使用后台线程一次全部接收，并放在SD中存起啦。

当你要下载图片时，把他调整到一个合适的大小。避免内容溢出。示例：

// Getthe source image's dimensions

BitmapFactory.Optionsoptions = new BitmapFactory.Options();

options.inJustDecodeBounds= true; // this does not download the actual image, just downloadsheaders.

BitmapFactory.decodeFile(IMAGE_FILE_URL,options);

intsrcWidth = options.outWidth; // actual width of the image.

intsrcHeight = options.outHeight; // actual height of the image.

//Only scale if the source is big enough. This code is just trying tofit a image into a certain width.

if(desiredWidth> srcWidth)

desiredWidth= srcWidth;

//Calculate the correct inSampleSize/scale value. This helps reducememory use. It should be a power of 2.

intinSampleSize = 1;

while(srcWidth/ 2 > desiredWidth){

srcWidth/= 2;

srcHeight/= 2;

inSampleSize*= 2;

}

floatdesiredScale = (float) desiredWidth / srcWidth;

//Decode with inSampleSize

options.inJustDecodeBounds= false; // now download the actual image.

options.inDither= false;

options.inSampleSize= inSampleSize;

options.inScaled= false;

options.inPreferredConfig= Bitmap.Config.ARGB_8888; // ensures the image stays as a 32-bitARGB_8888 image.

//This preserves image quality.

BitmapsampledSrcBitmap = BitmapFactory.decodeFile(IMAGE_FILE_URL, options);

//Resize

Matrixmatrix = new Matrix();

matrix.postScale(desiredScale,desiredScale);

BitmapscaledBitmap = Bitmap.createBitmap(sampledSrcBitmap, 0, 0,

sampledSrcBitmap.getWidth(),sampledSrcBitmap.getHeight(), matrix, true);

sampledSrcBitmap= null;

//Save

FileOutputStreamout = new FileOutputStream(LOCAL_PATH_TO_STORE_IMAGE);

scaledBitmap.compress(Bitmap.CompressFormat.JPEG,100, out);

scaledBitmap= null;