Tablet UI模式: 中心舞台

本博客主要内容来源于 Suzanne Alexandra 的 MOTODEV 英文博客 Android Tablet UI Patterns #1: Center Stage 

 

我们曾经讨论过为Motorola XOOM 来开发Adroid平板电脑的应用，许多人对UI模式感兴趣。UI模式很容易实现，它给你一个简单，可重复的方法来解决设计问题。UI设计模式为你提供了编译的内容和认知科学对此的解释。我们将进一步深入并重点介绍一些有用的Android开发技巧。

 

本文将讲述第一种模式，我称之为中心舞台模式（Center Stage）。 它简单，但在平板电脑上很有效，也能在智能手机上工作。

 

为何需要中心舞台模式

 

你肯定希望能有效地使用平板电脑上的屏幕空间。 平板电脑上有大的或超大的屏幕，且经常用于横屏模式。你希望你的应用视觉效果更吸引人，更容易让人留下深刻印象。中心舞台模式就是关于如何使用屏幕中心区域，特别是在单面板横屏布局上。

 

 

 

请记住人类大脑定律第10条：视觉比其它感觉更优越. 人类是主要依赖视觉的生物。我们的大脑很容易记住图像并对图像进行回应，所以图片是很容易让人留下深刻记忆的。 当布局扩展到更大的屏幕上时，小的图像或文字显示在太大的空间上，使得空白的屏幕显得比内容更突出。

 

你应当尽力避免下面的效果-我称它为拉伸效应（Spread），这种布局只能在更小的屏幕上有好的效果，在平板电脑上会拉伸并留出很多空白的空间。

 

 

 

在这个活动（activity）中，视图是通过在一个 RelativeLayout视图中使用alignParentRight和alignParentLeft 来编排的。 只要 活动 根据屏幕大小和分辨率缩放，这种拉伸效应也会出现在LinearLayout, TableLayout, GridView 或其它布局中。

如何实现

 

 

在单面板布局中，特别是有内容或多面板屏幕，把最重要的内容放到或靠近中心位置，把控制键，元数据，活动条等等放到它的周围。内容可以允许编辑或可以简单地显示。精心选择边上的部件，不要让它们簇拥在一起。

 

 

当内容而不是导航或分类列表时使用这种模式是主要的焦点。它可以在多屏，深度内容屏幕或单屏应用上使用。（这不是单面板屏幕的唯一模式。对角，水平或垂直平衡模式也可以用）

开发技巧

 

在平板上，对更大的屏幕尺寸，你需要更多的布局方式，特别是在单一面板上不使用碎片来显示活动。（是的，我们热衷于使用UI来适应不同屏幕，但有时平板需要不同的布局方式）

 

定制布局更快更容易，它允许你在多个文件间复用布局要素。 <include /> 标签对Android来说不是新事物，在 Android Developers blog 就有它的介绍。下面的例子是一个带includes 标签的布局：

 

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
     <ImageView android:id="@+id/myimage" ... />
         
     <include android:id="@+id/metadata" layout="@layout/metadata"  />
     <include android:id="@+id/mediacontrol" layout="@layout/mediacontrol" />
   
</RelativeLayout>

 

你可重载任何一个<include />中声明的  android:layout_* 属性，你还可以移动部件并根据不同的布局改变它的大小。

 

但这也会带来一个难题：当你重载布局的属性时，要确保在重载布局属性时，也重载 android:layout_width 和android:layout_height。 这样可以确保所有的属性可以被LayoutInflater 类识别。 (参见 this StackOverflow post )。

 

<include

    android:id="@+id/mediacontrol"

    layout="@layout/mediacontrol"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_toLeftOf="@id/myimage"

     …    />

 

请参考下图的例子，在横屏和竖屏布局中，includes 标签是如何放置和改变大小的。

 

 

你可能注意到这种模式下，横屏和竖屏布局经常有细微的差别。 这个例子里，竖屏布局充分利用了垂直的空间。屏幕突出显示了相册图像，并且也很好地保持了它的比例，它甚至没有放到屏幕中心位置。

你需要设置你的应用工程，确保选择正确的布局方式。在Android3.1及以前的版本上，你可以在资源目录如res/layout-xlarge-v11 放置平板布局。在Android3.2版本上，你可以使用数字选择器（numeric selectors ），如sw600dp,sw720dp, 等等。所以要在平板上而不是智能手机上显示你的布局时，在Android3.2及更高版本上，使用res/layout-sw600dp 来设计7寸和10寸平板上的应用。

 

想获得更多Android平板电脑UI模式或技巧来快速开始你的Android平板开发之旅吗？如有机会可与她在10月10日 San Francisco 举办的 Android Open 会议上交流。如果你不能出席该会议，我们其后的网络研讨会上提供相应的会议视频。

                  Henry Yao                                                                                        Jinnan Sun

MOTODEV tech. support Engineer                                                               Product Manager