[中英文对照]android Designing for TV(一) ------ Optimizing Layouts for TV 优化电视布局

When your application is running on a television set, you should assume that the user is sitting about ten feet away from the screen. This user environment is referred to as the10-foot UI. To provide your users with a usable and enjoyable experience, you should style and lay out your UI accordingly..

This lesson shows you how to optimize layouts for TV by:

Providing appropriate layout resources for landscape mode.
Ensuring that text and controls are large enough to be visible from a distance.
Providing high resolution bitmaps and icons for HD TV screens.

Design Landscape Layouts

TV screens are always in landscape orientation. Follow these tips to build landscape layouts optimized for TV screens:

TV屏幕一般都是横向的,根据这些提示,我们为我们的TV创建横向的布局;

Put on-screen navigational controls on the left or right side of the screen and save the vertical space for content.
在屏幕的左侧或者右侧添加导航栏,并且保持竖向的间距.
Create UIs that are divided into sections, by usingFragmentsand use view groups likeGridViewinstead ofListViewto make better use of the horizontal screen space.
创建UI布局分为几部分:实用Fragments,还有一些groups,比如 GridView和ListView, 来做出更好的横向空间.
Use view groups such asRelativeLayoutorLinearLayoutto arrange views. This allows the Android system to adjust the position of the views to the size, alignment, aspect ratio, and pixel density of the TV screen.
使用视图组如RelativeLayout或LinearLayout 来把一些View进行分类, 这使得Android系统调整视图位置尺寸，对齐，纵横比，和电视屏幕像素密度。
Add sufficient margins between layout controls to avoid a cluttered UI.
保留足够的间距在两个布局间,避免界面过于凌乱(填充的太满).

For example, the following layout is optimized for TV: 示例:

In this layout, the controls are on the lefthand side. The UI is displayed within aGridView, which is well-suited to landscape orientation. In this layout both GridView and Fragment have the width and height set dynamically, so they can adjust to the screen resolution. Controls are added to the left side Fragment programatically at runtime. The layout file for this UI isres/layout-land-large/photogrid_tv.xml. (This layout file is placed inlayout-land-largebecause TVs have large screens with landscape orientation. For details refer toSupporting Multiple Screens.)

在这个布局中,控制栏在左侧,这个界面的显示是一个GridView,这是很适合横向布局的, 在这个布局中GridView and Fragment 可以动态的调整宽度和高度, 所以这样可以根据屏幕的分辨率进行调整. 在运行的时候把控制栏添加到相应的Fragment 中. 布局文件是res/layout-land-large/photogrid_tv.xml.(这个布局文件方在 layout-land-large文件夹中, 因为TV的屏幕分辨率是横向的, 具体细节请查看Supporting Multiple Screens)

res/layout-land-large/photogrid_tv.xml

<RelativeLayout  android:layout_width="fill_parent"  android:layout_height="fill_parent" >  <fragment    android:id="@+id/leftsidecontrols"    android:layout_width="0dip"    android:layout_marginLeft="5dip"    android:layout_height="match_parent" />  <GridView        android:id="@+id/gridview"    android:layout_width="wrap_content"    android:layout_height="wrap_content" /></RelativeLayout>

To set up action bar items on the left side of the screen, you can also include theLeft navigation bar libraryin your application to set up action items on the left side of the screen, instead of creating a custom Fragment to add controls:

添加一个action bar的条目在屏幕的左侧, 你也可以包含一个Left navigation bar library,在你的应用程序中去设置action bar在屏幕的左侧,而不是去自定义一个Fragment 来添加控件.

LeftNavBar bar = (LeftNavBarService.instance()).getLeftNavBar(this);

When you have an activity in which the content scrolls vertically, always use a left navigation bar; otherwise, your users have to scroll to the top of the content to switch between the content view and the ActionBar. Look at theLeft navigation bar sample appto see how to simple it is to include the left navigation bar in your app.

当你有一个activity的垂直滚动,总得要使用左侧的导航栏.要不然,你的用户一定要拖动到内容的顶部才能对导航栏进行操作.参照Left navigation bar sample app看看如何简单的添加一个左侧导航栏到你的应用中.

Make Text and Controls Easy to See

让文字和控件容易被发现

The text and controls in a TV application's UI should be easily visible and navigable from a distance. Follow these tips to make them easier to see from a distance :

在一个TV应用的UI里面, 文字和控件是很容易显示和控制在一定的距离里面.根据这些观点,在一定的空间内,让他们更加容易被发现

Break text into small chunks that users can quickly scan.
将文本分成小块，用户可以快速扫到(看到)。
Use light text on a dark background. This style is easier to read on a TV.
用高亮文字颜色 , 在一个暗色的背景中, 这样的样式更容易阅读,在电视上;
Avoid lightweight fonts or fonts that have both very narrow and very broad strokes. Use simple sans-serif fonts and use anti-aliasing to increase readability.
避免轻量级的字体以及那些要么非常窄要么非常宽的笔画字体.使用简单的无衬线字体和使用抗混叠来提高可读性.
Use Android's standard font sizes:

使用系统的标准的字体大小:

 <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"/>

Ensure that all your view widgets are large enough to be clearly visible to someone sitting 10 feet away from the screen (this distance is greater for very large screens). The best way to do this is to use layout-relative sizing rather than absolute sizing, and density-independent pixel units instead of absolute pixel units. For example, to set the width of a widget, use wrap_content instead of a pixel measurement, and to set the margin for a widget, use dip instead of px values.
确保那时你的所有视图小工具足够的大以便距离屏幕10英尺的人能清晰可见.(更大的距离, 更大的屏幕) .最好的办法是使用布局相对大小而不是绝对尺寸, 并且使用与密度无关的像素单位而不是绝对的像素单元 [dip , sp],例如，设置一个控件的宽度，使用wrap_content而不是一个像素的测量，并为控件设置边缘，使用dip代替Px值.

Design for High-Density Large Screens

The common HDTV display resolutions are 720p, 1080i, and 1080p. Design your UI for 1080p, and then allow the Android system to downscale your UI to 720p if necessary. In general, downscaling (removing pixels) does not degrade the UI (Notice that the converse is not true; you should avoid upscaling because it degrades UI quality).

常见的高清晰度电视显示分辨率为720p，1080i和1080p，把你的UI设置为1080p,并且允许系统在必要的时候将你的UI分辨率下调到720p.通常下调并不意味着是缩小你的UI界面(注意反之则不然,你应该避免倍增，因为它会降低UI质量).

To get the best scaling results for images, provide them as9-patch imageelements if possible. If you provide low quality or small images in your layouts, they will appear pixelated, fuzzy, or grainy. This is not a good experience for the user. Instead, use high-quality images.

得到图像的最佳的缩放效果,提供他们提供他们9-patch image图像元素，如果可能的话图像元素，如果可能的话.如果提供低质量或者小图片的话,它们将会出现像素化,模糊,或呈颗粒状. 这样用户体验很不好, 反之,应该用高质量图片替代.

For more information on optimizing apps for large screens seeDesigning for multiple screens.

在大屏幕上针对优化应用的更多信息请参考Designing for multiple screens.

Design to Handle Large Bitmaps

设计处理大的位图

The Android system has a limited amount of memory, so downloading and storing high-resolution images can often cause out-of-memory errors in your app. To avoid this, follow these tips:

android系统对内存有一定的限制, 所以在下载或者保存高像素图片的时候经常会出现 OOM 内存泄露问题, 根据这些问题,去避免出现类似问题:

Load images only when they're displayed on the screen. For example, when displaying multiple images in aGridVieworGallery, only load an image whengetView()is called on the View'sAdapter.
载入图片，只有当他们在屏幕上显示.比如:当显示很多图片在 GridView 或者 Gallery中, 只加载一张图片在适配器调用getView()方法的时候.
Callrecycle()onBitmapviews that are no longer needed.
在bitmap 不需要的时候,调用recycle()方法进行回收.
UseWeakReferencefor storing references toBitmapobjects in an in-memoryCollection.
用软引用来存放bitmap对象,在内存中.
If you fetch images from the network, useAsyncTaskto fetch them and store them on the SD card for faster access. Never do network transactions on the application's UI thread.
如果你通过网络获取图片, 使用AsyncTask去获取他们,并且保存到SD卡,以便下次可以更快的访问它, 千万不要访问网络在程序的UI线程.
Scale down really large images to a more appropriate size as you download them; otherwise, downloading the image itself may cause an "Out of Memory" exception. Here is sample code that scales down images while downloading:

下载一个尺寸想当大的图片,先裁剪他们到一个合适的尺寸,然后再下载他们. 否则,下载他们仍然可能会出现"OOM"异常, 这里是一个简单的code 下载裁剪图片

 // Get the source image's dimensions BitmapFactory.Options options = new BitmapFactory.Options(); // This does not download the actual image, just downloads headers. options.inJustDecodeBounds = true;  BitmapFactory.decodeFile(IMAGE_FILE_URL, options); // The actual width of the image. int srcWidth = options.outWidth;  // The actual height of the image. int srcHeight = options.outHeight;  // Only scale if the source is bigger than the width of the destination view. if(desiredWidth > srcWidth)  desiredWidth = srcWidth; // Calculate the correct inSampleSize/scale value. This helps reduce memory use. It should be a power of 2. int inSampleSize = 1; while(srcWidth / 2 > desiredWidth){  srcWidth /= 2;  srcHeight /= 2;  inSampleSize *= 2; } float desiredScale = (float) desiredWidth / srcWidth; // Decode with inSampleSize options.inJustDecodeBounds = false; options.inDither = false; options.inSampleSize = inSampleSize; options.inScaled = false; // Ensures the image stays as a 32-bit ARGB_8888 image. // This preserves image quality. options.inPreferredConfig = Bitmap.Config.ARGB_8888;                              Bitmap sampledSrcBitmap = BitmapFactory.decodeFile(IMAGE_FILE_URL, options); // Resize Matrix matrix = new Matrix(); matrix.postScale(desiredScale, desiredScale); Bitmap scaledBitmap = Bitmap.createBitmap(sampledSrcBitmap, 0, 0,   sampledSrcBitmap.getWidth(), sampledSrcBitmap.getHeight(), matrix, true); sampledSrcBitmap = null; // Save FileOutputStream out = new FileOutputStream(LOCAL_PATH_TO_STORE_IMAGE); scaledBitmap.compress(Bitmap.CompressFormat.JPEG, 100, out); scaledBitmap = null;

Design Landscape Layouts

Make Text and Controls Easy to See

Design for High-Density Large Screens

Design to Handle Large Bitmaps

更多相关文章

随机推荐