您的位置:首页 > 移动开发 > Android开发

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

2014-05-23 00:04 766 查看
转载:http://www.verydemo.com/demo_c131_i128528.html

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 the 10-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 using Fragments and use view groups like 
GridView
 instead of
ListView
 to make better use of the horizontal screen space.
创建UI布局分为几部分:实用Fragments,还有一些groups,比如 GridView和ListView, 来做出更好的横向空间.
Use view groups such as 
RelativeLayout
 or 
LinearLayout
 to 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 a 
GridView
, 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 is 
res/layout-land-large/photogrid_tv.xml
. (This layout file is placed in
layout-land-large
 because TVs
have large screens with landscape orientation. For details refer to Supporting Multiple Screens.)

在这个布局中,控制栏在左侧,这个界面的显示是一个GridView,这是很适合横向布局的, 在这个布局中 

res/layout-land-large/photogrid_tv.xml

To set up action bar items on the left side of the screen, you can also include the Left navigation bar library in 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, 在你的应用程序中 去设置 


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 the Left navigation bar sample
app to see how to simple it is to include the left navigation bar in your app.

当你有一个的垂直滚动, 总得要使用左侧的导航栏.要不然,你的用户一定要拖动到内容的顶部 才能对导航栏进行操作.参照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:
使用系统的标准的字体大小:


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).

To get the best scaling results for images, provide them as 9-patch image elements 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.

For more information on optimizing apps for large screens see Designing 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 a
GridView
 or 
Gallery
, only load an image when 
getView()
 is called on the View's 
Adapter
.
载入图片,只有当他们在屏幕上显示.比如:当显示很多图片在  GridView 或者 Gallery中, 只加载一张图片 在适配器调用getView()方法的时候.
Call 
recycle()
 on 
Bitmap
 views that are no longer needed.
在bitmap 不需要的时候,调用recycle()方法进行回收.
Use 
WeakReference
 for storing references to 
Bitmap
 objects in an in-memory 
Collection
.
用软引用来存放bitmap对象,在内存中.
If you fetch images from the network, use 
AsyncTask
 to 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 下载裁剪图片

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: