diff options
Diffstat (limited to 'docs/html/intl/zh-CN/training/multiscreen')
4 files changed, 0 insertions, 655 deletions
diff --git a/docs/html/intl/zh-CN/training/multiscreen/adaptui.jd b/docs/html/intl/zh-CN/training/multiscreen/adaptui.jd deleted file mode 100644 index 89908fe..0000000 --- a/docs/html/intl/zh-CN/training/multiscreen/adaptui.jd +++ /dev/null @@ -1,212 +0,0 @@ -page.title=实施自适应用户界面流程 -parent.title=针对多种屏幕进行设计 -parent.link=index.html - -trainingnavtop=true -previous.title=支持各种屏幕密度 -previous.link=screendensities.html - -@jd:body - - -<!-- This is the training bar --> -<div id="tb-wrapper"> -<div id="tb"> - -<h2>本教程将指导您</h2> - -<ol> - <li><a href="#TaskDetermineCurLayout">确定当前布局</a></li> - <li><a href="#TaskReactToLayout">根据当前布局做出响应</a></li> - <li><a href="#TaskReuseFrag">重复使用其他活动中的片段</a></li> - <li><a href="#TaskHandleConfigChanges">处理屏幕配置变化</a></li> -</ol> - -<h2>您还应参阅</h2> - -<ul> - <li><a href="{@docRoot}guide/practices/tablets-and-handsets.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> - - -<h2 id="TaskDetermineCurLayout">确定当前布局</h2> - -<p>由于每种布局的实施都会稍有不同，因此您可能需要先确定当前向用户显示的布局。例如，您可以了解用户所处的是“单面板”模式还是“双面板”模式。要做到这一点，您可以查询指定视图是否存在以及是否已显示出来。</p> - -<pre class="prettyprint"> -public class NewsReaderActivity extends FragmentActivity { - boolean mIsDualPane; - - @Override - public void onCreate(Bundle savedInstanceState) { - super.onCreate(savedInstanceState); - setContentView(R.layout.main_layout); - - View articleView = findViewById(R.id.article); - mIsDualPane = articleView != null && - articleView.getVisibility() == View.VISIBLE; - } -} -</pre> - -<p>请注意，这段代码用于查询“报道”面板是否可用，与针对具体布局的硬编码查询相比，这段代码的灵活性要大得多。</p> - -<p>再举一个适应各种组件的存在情况的方法示例：在对这些组件执行操作前先查看它们是否可用。例如，新闻阅读器示例应用中有一个用于打开菜单的按钮，但只有在版本低于 3.0 的 Android 上运行该应用时，这个按钮才会存在，因为 API 级别 11 或更高级别中的 <PH>{@link android.app.ActionBar}</PH> 已取代了该按钮的功能。因此，您可以使用以下代码为此按钮添加事件侦听器：</p> - -<pre class="prettyprint"> -Button catButton = (Button) findViewById(R.id.categorybutton); -OnClickListener listener = /* create your listener here */; -if (catButton != null) { - catButton.setOnClickListener(listener); -} -</pre> - - -<h2 id="TaskReactToLayout">根据当前布局做出响应</h2> - -<p>有些操作可能会因当前的具体布局而产生不同的结果。例如，在新闻阅读器示例中，如果用户界面处于双面板模式下，那么点击标题列表中的标题就会在右侧面板中打开相应报道；但如果用户界面处于单面板模式下，那么上述操作就会启动一个独立活动：</p> - -<pre> -@Override -public void onHeadlineSelected(int index) { - mArtIndex = index; - if (mIsDualPane) { - /* display article on the right pane */ - mArticleFragment.displayArticle(mCurrentCat.getArticle(index)); - } else { - /* start a separate activity */ - Intent intent = new Intent(this, ArticleActivity.class); - intent.putExtra("catIndex", mCatIndex); - intent.putExtra("artIndex", index); - startActivity(intent); - } -} -</pre> - -<p>同样，如果该应用处于双面板模式下，就应设置带导航标签的操作栏；但如果该应用处于单面板模式下，就应使用旋转窗口小部件设置导航栏。因此您的代码还应确定哪种情况比较合适：</p> - -<pre> -final String CATEGORIES[] = { "热门报道", "政治", "经济", "Technology" }; - -public void onCreate(Bundle savedInstanceState) { - .... - if (mIsDualPane) { - /* use tabs for navigation */ - actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_TABS); - int i; - for (i = 0; i < CATEGORIES.length; i++) { - actionBar.addTab(actionBar.newTab().setText( - CATEGORIES[i]).setTabListener(handler)); - } - actionBar.setSelectedNavigationItem(selTab); - } - else { - /* use list navigation (spinner) */ - actionBar.setNavigationMode(android.app.ActionBar.NAVIGATION_MODE_LIST); - SpinnerAdapter adap = new ArrayAdapter<String>(this, - R.layout.headline_item, CATEGORIES); - actionBar.setListNavigationCallbacks(adap, handler); - } -} -</pre> - - -<h2 id="TaskReuseFrag">重复使用其他活动中的片段</h2> - -<p>多屏幕设计中的重复模式是指，对于某些屏幕配置，已实施界面的一部分会用作面板；但对于其他配置，这部分就会以独立活动的形式存在。例如，在新闻阅读器示例中，对于较大的屏幕，新闻报道文本会显示在右侧面板中；但对于较小的屏幕，这些文本就会以独立活动的形式存在。</p> - -<p>在类似情况下，您通常可以在多个活动中重复使用相同的 <PH>{@link android.app.Fragment}</PH> 子类以避免代码重复。例如，您在双面板布局中使用了 <code>ArticleFragment</code>：</p> - -{@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all} - -<p>然后又在小屏幕的活动布局中重复使用（无布局）了它 (<code>ArticleActivity</code>)：</p> - -<pre> -ArticleFragment frag = new ArticleFragment(); -getSupportFragmentManager().beginTransaction().add(android.R.id.content, frag).commit(); -</pre> - -<p>当然，这与在 XML 布局中声明片段的效果是一样的，但在这种情况下却没必要使用 XML 布局，因为报道片段是此活动中的唯一组件。</p> - -<p>请务必在设计片段时注意，不要针对具体活动创建强耦合。要做到这一点，您通常可以定义一个界面，该界面概括了相关片段与其主活动交互所需的全部方式，然后让主活动实施该界面：</p> - -<p>例如，新闻阅读器应用的 <code>HeadlinesFragment</code> 会精确执行以下代码：</p> - -<pre> -public class HeadlinesFragment extends ListFragment { - ... - OnHeadlineSelectedListener mHeadlineSelectedListener = null; - - /* Must be implemented by host activity */ - public interface OnHeadlineSelectedListener { - public void onHeadlineSelected(int index); - } - ... - - public void setOnHeadlineSelectedListener(OnHeadlineSelectedListener listener) { - mHeadlineSelectedListener = listener; - } -} -</pre> - -<p>然后，如果用户选择某个标题，相关片段就会通知由主活动指定的侦听器（而不是通知某个硬编码的具体活动）：</p> - -<pre> -public class HeadlinesFragment extends ListFragment { - ... - @Override - public void onItemClick(AdapterView<?> parent, - View view, int position, long id) { - if (null != mHeadlineSelectedListener) { - mHeadlineSelectedListener.onHeadlineSelected(position); - } - } - ... -} -</pre> - -<p><a -href="{@docRoot}guide/practices/tablets-and-handsets.html">支持平板电脑和手持设备</a>的指南中进一步介绍了此技术。</p> - - -<h2 id="TaskHandleConfigChanges">处理屏幕配置变化</h2> - -<p>如果您使用独立活动实施界面的独立部分，那么请注意，您可能需要对特定配置变化（例如屏幕方向的变化）做出响应，以便保持界面的一致性。</p> - -<p>例如，在运行 Android 3.0 或更高版本的标准 7 英寸平板电脑上，如果新闻阅读器示例应用运行在纵向模式下，就会在使用独立活动显示新闻报道；但如果该应用运行在横向模式下，就会使用双面板布局。</p> - -<p>也就是说，如果用户处于纵向模式下且屏幕上显示的是用于阅读报道的活动，那么您就需要在检测到屏幕方向变化（变成横向模式）后执行相应操作，即停止上述活动并返回主活动，以便在双面板布局中显示相关内容：</p> - -<pre> -public class ArticleActivity extends FragmentActivity { - int mCatIndex, mArtIndex; - - @Override - protected void onCreate(Bundle savedInstanceState) { - super.onCreate(savedInstanceState); - mCatIndex = getIntent().getExtras().getInt("catIndex", 0); - mArtIndex = getIntent().getExtras().getInt("artIndex", 0); - - // If should be in two-pane mode, finish to return to main activity - if (getResources().getBoolean(R.bool.has_two_panes)) { - finish(); - return; - } - ... -} -</pre> - - diff --git a/docs/html/intl/zh-CN/training/multiscreen/index.jd b/docs/html/intl/zh-CN/training/multiscreen/index.jd deleted file mode 100644 index 35c48e0..0000000 --- a/docs/html/intl/zh-CN/training/multiscreen/index.jd +++ /dev/null @@ -1,64 +0,0 @@ -page.title=针对多种屏幕进行设计 - -trainingnavtop=true -startpage=true -next.title=支持各种屏幕尺寸 -next.link=screensizes.html - -@jd:body - -<div id="tb-wrapper"> -<div id="tb"> - -<h2>依存关系和前提条件</h2> - -<ul> - <li>Android 1.6 或更高版本（示例应用则需要 2.1 或更高版本）</li> - <li><a -href="http://developer.android.com/guide/components/activities.html">活动</a>和<a href="http://developer.android.com/guide/components/fragments.html">片段</a>的基本知识</li> - <li>构建 Android <a -href="http://developer.android.com/guide/topics/ui/index.html">用户界面</a>的经验</li> - <li>多个功能需要用到<a -href="{@docRoot}tools/extras/support-library.html">支持库</a></li> -</ul> - -<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>Android 支持数百种屏幕尺寸不同的设备，包括小型手机和大型电视机。因此，请务必将您的应用设计为与所有的屏幕尺寸兼容，以便让尽可能多的用户使用该应用。</p> - -<p>不过，与各种类型的设备兼容还远远不够。由于各种屏幕尺寸对用户互动产生的利弊有所不同，因此要真正满足用户需求并广获好评，您的应用不仅需要支持多种屏幕，还应针对各类屏幕配置的用户体验进行优化。<em></em><em></em></p> - -<p>本教程将向您介绍如何针对多种屏幕配置优化和实施相应的用户界面。</p> - -<p>各教程中都提及了一种来自一个示例应用的代码，该应用展示了关于针对多种分辨率进行优化的最佳实践。您可以在右侧下载该示例，并在自己的应用内重复使用其中的代码。</p> - -<p class="note"><strong>请注意</strong>：本教程和相关的示例使用了<a -href="{@docRoot}tools/extras/support-library.html">支持库</a>，以便在 3.0 版以下的 Android 上使用 <PH>{@link android.app.Fragment}</PH> API。因此，您需要下载该库并将其添加到您的应用，才能使用本教程中涉及的所有 API。</p> - - -<h2>教程</h2> - -<dl> - <dt><b><a href="screensizes.html">支持各种屏幕尺寸</a></b></dt> - <dd>本教程将向您介绍如何设计可适应多种屏幕尺寸的布局（使用灵活的视图尺寸、 <PH>{@link android.widget.RelativeLayout}</PH>、屏幕尺寸和屏幕方向限定符、别名过滤器以及自动拉伸位图）。</dd> - - <dt><b><a href="screendensities.html">支持各种屏幕密度</a></b></dt> - <dd>本教程将向您介绍如何支持具有不同像素密度的屏幕（使用非密度制约像素并提供各种密度的相应位图）。</dd> - - <dt><b><a href="adaptui.html">实施自适应用户界面流程</a></b></dt> - <dd>本教程将向您介绍如何以可适应多种屏幕尺寸/屏幕密度组合的方式实施用户界面流程（运行时对当前布局的检测，根据当前布局做出响应，处理屏幕配置变化）。</dd> -</dl> diff --git a/docs/html/intl/zh-CN/training/multiscreen/screendensities.jd b/docs/html/intl/zh-CN/training/multiscreen/screendensities.jd deleted file mode 100644 index cdb9b7f..0000000 --- a/docs/html/intl/zh-CN/training/multiscreen/screendensities.jd +++ /dev/null @@ -1,100 +0,0 @@ -page.title=支持各种屏幕密度 -parent.title=针对多种屏幕进行设计 -parent.link=index.html - -trainingnavtop=true -previous.title=支持各种屏幕尺寸 -previous.link=screensizes.html -next.title=实施自适应用户界面流程 -next.link=adaptui.html - -@jd:body - - -<!-- This is the training bar --> -<div id="tb-wrapper"> -<div id="tb"> - -<h2>本教程将指导您</h2> -<ol> - <li><a href="#TaskUseDP">使用非密度制约像素</a></li> - <li><a href="#TaskProvideAltBmp">提供备用位图</a></li> -</ol> - -<h2>您还应参阅</h2> - -<ul> - <li><a href="{@docRoot}guide/practices/screens_support.html">支持多种屏幕</a></li> - <li><a href="{@docRoot}guide/practices/ui_guidelines/icon_design.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> - -<h2 id="TaskUseDP">使用非密度制约像素</h2> - -<p>在设计布局时，大家经常会误使用绝对像素来定义距离或尺寸，您一定要避免犯这种错误。由于各种屏幕的像素密度都有所不同，因此相同数量的像素在不同设备上的实际大小也有所差异，这样使用像素定义布局尺寸就会产生问题。因此，请务必使用 <code>dp</code> 或 <code>sp</code> 单位指定尺寸。<code>dp</code> 是一种非密度制约像素，其尺寸与 160 dpi 像素的实际尺寸相同。<code>sp</code> 也是一种基本单位，但它可根据用户的偏好文字大小进行调整（即尺度独立性像素），因此您应将该测量单位用于定义文字大小（请勿用其定义布局尺寸）。</p> - -<p>例如，请使用 <code>dp</code>（而非 <code>px</code>）指定两个视图间的间距：</p> - -<pre> -<Button android:layout_width="wrap_content" - android:layout_height="wrap_content" - android:text="@string/clickme" - android:layout_marginTop="20dp" /> -</pre> - -<p>请务必使用 <code>sp</code> 指定文字大小：</p> - -<pre> -<TextView android:layout_width="match_parent" - android:layout_height="wrap_content" - android:textSize="20sp" /> -</pre> - - -<h2 id="TaskProvideAltBmp">提供备用位图</h2> - -<p>由于 Android 可在具有各种屏幕密度的设备上运行，因此您提供的位图资源应始终可以满足各类普遍密度范围的要求：低密度、中等密度、高密度以及超高密度。这将有助于您的图形在所有屏幕密度上都能得到出色的质量和效果。</p> - -<p>要生成这些图片，您应先提取矢量格式的原始资源，然后根据以下尺寸范围针对各密度生成相应的图片。</p> - -<p><ul> - <li><code>xhdpi</code>：2.0 - <li><code>hdpi</code>：1.5 - <li><code>mdpi</code>：1.0（最低要求） - <li><code>ldpi</code>：0.75 -</ul></p> - -<p>也就是说，如果您为 <code>xhdpi</code> 设备生成了 200x200 尺寸的图片，就应该使用同一资源为 <code>hdpi</code>、<code>mdpi</code> 和 <code>ldpi</code> 设备分别生成 150x150、100x100 和 75x75 尺寸的图片。</p> - -<p>然后，将生成的图片文件放在 <code>res/</code> 下的相应子目录中（如下所示），系统就会根据运行您应用的设备的屏幕密度自动选择合适的图片：</p> - -<pre class="classic no-pretty-print"> -MyProject/ - res/ - drawable-xhdpi/ - awesomeimage.png - drawable-hdpi/ - awesomeimage.png - drawable-mdpi/ - awesomeimage.png - drawable-ldpi/ - awesomeimage.png -</pre> - -<p>这样一来，无论您何时引用 <code>@drawable/awesomeimage</code>，系统都能根据相应屏幕的 dpi 选取合适的位图。</p> - -<p>有关为您的应用创建图标资产的更多提示和指南，请参阅<a -href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">图标设计指南</a>。</p> - diff --git a/docs/html/intl/zh-CN/training/multiscreen/screensizes.jd b/docs/html/intl/zh-CN/training/multiscreen/screensizes.jd deleted file mode 100644 index 904d097..0000000 --- a/docs/html/intl/zh-CN/training/multiscreen/screensizes.jd +++ /dev/null @@ -1,279 +0,0 @@ -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> -<?xml version="1.0" encoding="utf-8"?> -<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" - android:layout_width="match_parent" - android:layout_height="match_parent"> - <TextView - android:id="@+id/label" - android:layout_width="match_parent" - android:layout_height="wrap_content" - android:text="Type here:"/> - <EditText - android:id="@+id/entry" - android:layout_width="match_parent" - android:layout_height="wrap_content" - android:layout_below="@id/label"/> - <Button - android:id="@+id/ok" - android:layout_width="wrap_content" - android:layout_height="wrap_content" - android:layout_below="@id/entry" - android:layout_alignParentRight="true" - android:layout_marginLeft="10dp" - android:text="OK" /> - <Button - android:layout_width="wrap_content" - android:layout_height="wrap_content" - android:layout_toLeftOf="@id/ok" - android:layout_alignTop="@id/ok" - android:text="Cancel" /> -</RelativeLayout> -</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> -<resources> - <item name="main" type="layout">@layout/main_twopanes</item> -</resources> -</pre> -</li> - -<li><code>res/values-sw600dp/layout.xml</code>: -<pre> -<resources> - <item name="main" type="layout">@layout/main_twopanes</item> -</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="@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> - |