path: root/docs/html/intl/zh-CN/training/multiscreen/screensizes.jd

page.title=支持各种屏幕尺寸
parent.title=针对多种屏幕进行设计
parent.link=index.html

trainingnavtop=true
next.title=支持各种屏幕密度
next.link=screendensities.html

@jd:body


<!-- This is the training bar -->
<div id="tb-wrapper"> 
<div id="tb"> 

<h2>本教程将指导您</h2>
<ol>
  <li><a href="#TaskUseWrapMatchPar">使用“wrap_content”和“match_parent”</a></li>
  <li><a href="#TaskUseRelativeLayout">使用相对布局</a></li>
  <li><a href="#TaskUseSizeQuali">使用尺寸限定符</a></li>
  <li><a href="#TaskUseSWQuali">使用最小宽度限定符</a></li>
  <li><a href="#TaskUseAliasFilters">使用布局别名</a></li>
  <li><a href="#TaskUseOriQuali">使用屏幕方向限定符</a></li>
  <li><a href="#TaskUse9Patch">使用自动拉伸位图</a></li>
</ol>

<h2>您还应参阅</h2>

<ul>
  <li><a href="{@docRoot}guide/practices/screens_support.html">支持多种屏幕</a></li>
</ul>

<h2>试试看</h2> 
 
<div class="download-box"> 
<a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">下载示例应用</a>
<p class="filename">NewsReader.zip</p> 
</div> 
 
</div> 
</div> 

<p>此教程将向您介绍如何通过以下方法支持各种尺寸的屏幕：</p>
<ul> 
  <li>确保系统可以适当地调整您布局的尺寸以便适应屏幕</li> 
  <li>根据屏幕配置提供合适的用户界面布局</li> 
  <li>确保正确的布局应用到了正确的屏幕上</li>
  <li>提供可正确缩放的位图</li> 
</ul> 


<h2 id="TaskUseWrapMatchPar">使用“wrap_content”和“match_parent”</h2> 

<p>要确保布局的灵活性并适应各种尺寸的屏幕，您应使用 <code>"wrap_content"</code> 和 <code>"match_parent"</code> 控制某些视图组件的宽度和高度。如果您使用 <code>"wrap_content"</code>，系统就会将视图的宽度或高度设置成所需的最小尺寸以适应视图中的内容，而 <code>"match_parent"</code>（在低于 API 级别 8 的级别中称为 <code>"fill_parent"</code>）则会展开组件以匹配其父视图的尺寸。</p>

<p>如果使用 <code>"wrap_content"</code> 和 <code>"match_parent"</code> 尺寸值而不是硬编码的尺寸，您的视图就会相应地仅使用自身所需的空间或展开以填满可用空间。例如：</p>

{@sample development/samples/training/multiscreen/newsreader/res/layout/onepane_with_bar.xml all}

<p>请注意示例中使用 <code>"wrap_content"</code> 和 <code>"match_parent"</code> 控制组件尺寸的方法，而不是关注具体的尺寸。此方法可让布局正确适应各种屏幕尺寸和屏幕方向。</p>

<p>此视图在纵向模式和横向模式下的显示效果如下所示。请注意，组件的尺寸会自动适应屏幕的高度和宽度：</p>

<img src="{@docRoot}images/training/layout-hvga.png" />
<p class="img-caption"><strong>图 1</strong>。纵向模式（左）和横向模式（右）下的新闻阅读器示例应用。</p>


<h2 id="TaskUseRelativeLayout">使用相对布局</h2> 

<p>您可以使用  <PH>{@link android.widget.LinearLayout}</PH>  的嵌套实例并结合 <code>"wrap_content"</code> 和 <code>"match_parent"</code> 尺寸，以便构建相当复杂的布局。不过，您无法通过  <PH>{@link android.widget.LinearLayout}</PH>  精确控制子视图的特殊关系；系统会将  <PH>{@link android.widget.LinearLayout}</PH>  中的视图直接并排列出。如果您需要将子视图排列出各种效果而不是一条直线，通常更合适的解决方法是使用  <PH>{@link android.widget.RelativeLayout}</PH>，这样您就可以根据各组件之间的特殊关系指定布局了。例如，您可以将某个子视图对齐到屏幕左侧，同时将另一个视图对齐到屏幕右侧。</p>

<p>例如：</p>

<pre>
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"&gt;
    &lt;TextView
        android:id="&#64;+id/label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Type here:"/&gt;
    &lt;EditText
        android:id="&#64;+id/entry"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="&#64;id/label"/&gt;
    &lt;Button
        android:id="&#64;+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="&#64;id/entry"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="10dp"
        android:text="OK" /&gt;
    &lt;Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="&#64;id/ok"
        android:layout_alignTop="&#64;id/ok"
        android:text="Cancel" /&gt;
&lt;/RelativeLayout&gt;
</pre>

<p>图 2 展示的是此布局在 QVGA 屏幕上的显示效果。</p>

<img src="{@docRoot}images/training/relativelayout1.png" />
<p class="img-caption"><strong>图 2</strong>。QVGA 屏幕（小屏幕）上的截图。</p>

<p>图 3 展示的是此布局在较大屏幕上的显示效果。</p>

<img src="{@docRoot}images/training/relativelayout2.png" />
<p class="img-caption"><strong>图 3</strong>。WSVGA 屏幕（大屏幕）上的截图。</p>

<p>请注意，虽然组件的尺寸有所变化，但它们的空间关系仍会保留，具体由  <PH>{@link android.widget.RelativeLayout.LayoutParams}</PH> 指定。</p>

 
<h2 id="TaskUseSizeQuali">使用尺寸限定符</h2> 

<p>上文所述的灵活布局或相对布局可以为您带来的优势就只有这么多了。虽然这些布局可以拉伸组件内外的空间以适应各种屏幕，但它们不一定能为每种屏幕都提供最佳的用户体验。因此，您的应用不仅应实施灵活布局，还应针对各种屏幕配置提供一些备用布局。要做到这一点，您可以使用<a href="http://developer.android.com/guide/practices/screens_support.html#qualifiers">配置限定符</a>，这样就可以在运行时根据当前的设备配置自动选择合适的资源了（例如根据各种屏幕尺寸选择不同的布局）。</p>

<p>例如，很多应用会在较大的屏幕上实施“双面板”模式（相关应用可能会在一个面板上显示项目列表，并在另一面板上显示对应内容）。平板电脑和电视的屏幕已经大到可以同时容纳这两个面板了，但手机屏幕就需要分别显示。因此，您可以使用以下文件以便实施这些布局：</p>

<ul>
  <li><code>res/layout/main.xml</code>，单面板（默认）布局：

{@sample development/samples/training/multiscreen/newsreader/res/layout/onepane.xml all}
</li>
  <li><code>res/layout-large/main.xml</code>，双面板布局：

{@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all}
</li>
</ul>

<p>请注意第二种布局名称目录中的 <code>large</code> 限定符。系统会在属于较大屏幕（例如 7 英寸或更大的平板电脑）的设备上选择此布局。系统会在较小的屏幕上选择其他布局（无限定符）。</p>


<h2 id="TaskUseSWQuali">使用最小宽度限定符</h2>

<p>在版本低于 3.2 的 Android 设备上，开发人员遇到的问题之一是“较大”屏幕的尺寸范围，该问题会影响戴尔 Streak、早期的 Galaxy Tab 以及大部分 7 英寸平板电脑。即使这些设备的屏幕属于“较大”的尺寸，但很多应用可能会针对此类别中的各种设备（例如 5 英寸和 7 英寸的设备）显示不同的布局。这就是 Android 3.2 版在引入其他限定符的同时引入“最小宽度”限定符的原因。</p>

<p>最小宽度限定符可让您通过指定某个最小宽度（以 dp 为单位）来定位屏幕。例如，标准 7 英寸平板电脑的最小宽度为 600 dp，因此如果您要在此类屏幕上的用户界面中使用双面板（但在较小的屏幕上只显示列表），您可以使用上文中所述的单面板和双面板这两种布局，但您应使用 <code>sw600dp</code> 指明双面板布局仅适用于最小宽度为 600 dp 的屏幕，而不是使用 <code>large</code> 尺寸限定符：</p>

<ul>
  <li><code>res/layout/main.xml</code>，单面板（默认）布局：

{@sample development/samples/training/multiscreen/newsreader/res/layout/onepane.xml all}
</li>
  <li><code>res/layout-sw600dp/main.xml</code>，双面板布局：

{@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all}
</li>
</ul>

<p>也就是说，对于最小宽度大于等于 600 dp 的设备，系统会选择 <code>layout-sw600dp/main.xml</code>（双面板）布局，否则系统就会选择 <code>layout/main.xml</code>（单面板）布局。</p>

<p>但 Android 版本低于 3.2 的设备不支持此技术，原因是这些设备无法将 <code>sw600dp</code> 识别为尺寸限定符，因此您仍需使用 <code>large</code> 限定符。这样一来，就会有一个名称为 <code>res/layout-large/main.xml</code> 的文件（与 <code>res/layout-sw600dp/main.xml</code> 一样）。您将在下一教程中了解到避免此类布局文件出现重复的技术。</p>


<h2 id="TaskUseAliasFilters">使用布局别名</h2> 

<p>最小宽度限定符仅适用于 Android 3.2 及更高版本。因此，您仍需使用与较低版本兼容的概括尺寸范围（小、正常、大和特大）。例如，如果您要将用户界面设计成在手机上显示单面板，但在 7 英寸平板电脑、电视和其他较大的设备上显示多面板，请提供以下文件：</p>

<p><ul>
<li><code>res/layout/main.xml:</code> 单面板布局</li>
<li><code>res/layout-large:</code> 多面板布局</li>
<li><code>res/layout-sw600dp:</code> 多面板布局</li>
</ul></p>

<p>后两个文件是相同的，因为其中一个用于和 Android 3.2 设备匹配，而另一个则是为使用较低版本 Android 的平板电脑和电视准备的。</p>

<p>要避免平板电脑和电视的文件出现重复（以及由此带来的维护问题），您可以使用别名文件。例如，您可以定义以下布局：</p>

<ul>
<li><code>res/layout/main.xml</code>，单面板布局</li>
<li><code>res/layout/main_twopanes.xml</code>，双面板布局</li>
</ul>

<p>然后添加这两个文件：</p>

<p><ul>
<li><code>res/values-large/layout.xml</code>:
<pre>
&lt;resources>
    &lt;item name="main" type="layout">&#64;layout/main_twopanes&lt;/item>
&lt;/resources>
</pre>
</li>

<li><code>res/values-sw600dp/layout.xml</code>:
<pre>
&lt;resources>
    &lt;item name="main" type="layout">&#64;layout/main_twopanes&lt;/item>
&lt;/resources>
</pre>

</li>
</ul></p>

<p>后两个文件的内容相同，但它们并未实际定义布局。它们只是将  <PH>{@code main}</PH> 设置成了  <PH>{@code main_twopanes}</PH> 的别名。由于这些文件包含 <code>large</code> 和 <code>sw600dp</code> 选择器，因此无论 Android 版本如何，系统都会将这些文件应用到平板电脑和电视上（版本低于 3.2 的平板电脑和电视会匹配 
<PH>{@code large}</PH>，版本低于 3.2 的平板电脑和电视则会匹配 <code>sw600dp</code>）。</p>


<h2 id="TaskUseOriQuali">使用屏幕方向限定符</h2> 

<p>某些布局会同时支持横向模式和纵向模式，但您可以通过调整优化其中大部分布局的效果。在新闻阅读器示例应用中，每种屏幕尺寸和屏幕方向下的布局行为方式如下所示：</p>

<p><ul>
<li><b>小屏幕，纵向</b>：单面板，带徽标</li>
<li><b>小屏幕，横向</b>：单面板，带徽标</li>
<li><b>7 英寸平板电脑，纵向</b>：单面板，带操作栏</li>
<li><b>7 英寸平板电脑，横向</b>：双面板，宽，带操作栏</li>
<li><b>10 英寸平板电脑，纵向</b>：双面板，窄，带操作栏</li>
<li><b>10 英寸平板电脑，横向</b>：双面板，宽，带操作栏</li>
<li><b>电视，横向</b>：双面板，宽，带操作栏</li>
</ul></p>

<p>因此，这些布局中的每一种都定义在了 <code>res/layout/</code> 目录下的某个 XML 文件中。为了继续将每个布局分配给各种屏幕配置，该应用会使用布局别名将两者相匹配：</p>

<p><code>res/layout/onepane.xml:</code></p>
{@sample development/samples/training/multiscreen/newsreader/res/layout/onepane.xml all}

<p><code>res/layout/onepane_with_bar.xml:</code></p>
{@sample development/samples/training/multiscreen/newsreader/res/layout/onepane_with_bar.xml all}

<p><code>res/layout/twopanes.xml</code>:</p>
{@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all}

<p><code>res/layout/twopanes_narrow.xml</code>:</p>
{@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes_narrow.xml all}

<p>既然您已定义了所有可能的布局，那就只需使用配置限定符将正确的布局映射到各种配置即可。您现在只需使用布局别名技术即可做到这一点：</p>

<p><code>res/values/layouts.xml</code>:</p>
{@sample development/samples/training/multiscreen/newsreader/res/values/layouts.xml all}

<p><code>res/values-sw600dp-land/layouts.xml</code>:</p>
{@sample development/samples/training/multiscreen/newsreader/res/values-sw600dp-land/layouts.xml
all}

<p><code>res/values-sw600dp-port/layouts.xml</code>:</p>
{@sample development/samples/training/multiscreen/newsreader/res/values-sw600dp-port/layouts.xml
all}

<p><code>res/values-large-land/layouts.xml</code>:</p>
{@sample development/samples/training/multiscreen/newsreader/res/values-large-land/layouts.xml all}

<p><code>res/values-large-port/layouts.xml</code>:</p>
{@sample development/samples/training/multiscreen/newsreader/res/values-large-port/layouts.xml all}



<h2 id="TaskUse9Patch">使用自动拉伸位图</h2>

<p>支持各种屏幕尺寸通常意味着您的图片资源还必须能适应各种尺寸。例如，无论要应用到什么形状的按钮上，按钮背景都必须能适应。</p>

<p>如果在可以更改尺寸的组件上使用了简单的图片，您很快就会发现显示效果多少有些不太理想，因为系统会在运行时平均地拉伸或收缩您的图片。解决方法为使用自动拉伸位图，这是一种格式特殊的 PNG 文件，其中会指明可以拉伸以及不可以拉伸的区域。</p>

<p>因此，如果设计的是用于尺寸可变的组件上的位图，请务必使用自动拉伸技术。要将某个位图转换成自动拉伸位图，您可以先准备好普通图片（图 4，放大了 4 倍以便清楚显示）。</p>

<img src="{@docRoot}images/training/button.png" />
<p class="img-caption"><strong>图 4</strong>。<code>button.png</code></p>

<p>然后通过 SDK 的  <ode
href="{@docRoot}tools/help/draw9patch.html"><code>draw9patch</code></a> 实用工具（位于 <code>tools/</code> 目录中）运行该图片，您可以在该工具中绘制像素以标出要拉伸的区域以及左侧和顶部的边界。您还可以沿右侧和底部边界绘制像素以标出用于放置内容的区域，具体如图 5 所示。</p>

<img src="{@docRoot}images/training/button_with_marks.png" />
<p class="img-caption"><strong>图 5</strong>。<code>button.9.png</code></p>

<p>请注意沿边界显示的黑色像素。顶部和左侧边界上的像素用于指定可以拉伸的图片区域，右侧和底部边界上的像素则用于指定放置内容的区域。</p>

<p>另请注意 <code>.9.png</code> 的扩展名。您必须使用此扩展名，因为系统框架需要通过此扩展名确定相关图片是自动拉伸位图，而不是普通 PNG 图片。</p>

<p>如果您将此背景应用到某个组件（通过设置 <code>android:background="&#64;drawable/button"</code>），系统框架就会正确拉伸图片以适应按钮的尺寸，具体如图 6 中的各种尺寸所示。</p>

<img src="{@docRoot}images/training/buttons_stretched.png" />
<p class="img-caption"><strong>图 6</strong>。在各种尺寸下使用 <code>button.9.png</code> 自动拉伸位图的按钮。</p>