|
|
Android 3.0引入的新的片断（Fragment）API，让我们更容易地创建动态用户界面。在这个教程中，我们学习如何将一个两屏的ListView转换成WebView流，以适应大屏幕的单屏流设计，比如在平板设备中。
这篇文章的节奏将比我们的入门教程更快一些。如果你对基本的Android控件或概念不熟悉你可能需要复习这个网站上我们其它的一些教程，甚至是Android API参考。最终的开源代码可以在Google code上下载到。
片段简介
在我们开始之间，让我们在更高的层次上定义一下什么是片段。通常来说，片段是一大块用户界面，它具有自己的生存周期。如果它听起来像一个Activity，那是因为它确实很像一个Activity。然而，片段与Activity不同，片段必须存在于Activity之内。片段不须要在它每次初始化的时候与同一个Activity配对，这使它具有一些灵活性。与Activity一样，片段也无需包含任何用户界面。
步骤0：开始
这个教程假设你读过我们的列表视图教程，你可以下载那个教程的代码，并完成一些任务，然后开始，也可以直接下载这个教程的代码直接开始。
步骤1：重新设计界面
下图示意了我上在列表视图教程中所提到的文章阅读应用，我们还没有考虑并使用片段：
这个流程在相对小屏幕上运行得很不错。然而，在大屏幕上，比如Motorola Xoom平板的10寸屏幕上，在列表视图上却浪费了很多空间。WebView看起来正常，但是有点枯燥。
这就是要引入片段的地方：在大屏幕上，我们可以提供更有效的用户界面，如果我们可以在同一屏上显示ListView和WebView。当用户点击左边“面板”的列表视图中的某一项时，右边的WebView更新显示相应的内容。这种工作流程经常用于email或文档或RSS阅读器。下图就是重新设计之后的界面示意图：
步骤2：转换为基于片段的设计
现在我们知道了新的流程应该如何设计，我们也知道当前的两个活动必须转换成片段。我们将分几步来完成这个转换。第一步保持界面样子不变，只是使用片段修改每个界面内容。一个片段将包含当前的ListView，另一个包含WebView。然后我们再转到单个屏幕的实现，修改ListView和WebView之间的消息传递。
首先，将你的程序的项目构建目标改变Android 3.0。在Eclipse中，右键点击项目并选择“属性”。点击Android部分并选中Android 3.0。我们不使用任何Google API，所以Android开源项目版本足够了。然后点击“确定”按钮。
现在你就可以访问新的API了，包括片段API。
注意：在将来的教程中，我们将讨论如何使用新的兼容层来使得像片段API这样的技术在更早版本的Android设备上也能工作。但是现在它只能运行在Android 3.0设备上。
步骤3：创建片段类
创建两个Java类来代表两个片段：ListView界面和WebView界面。将它们命名为TutListFragment和TutViewerFragment。TutListFragment将继承ListFragment类，TutViewerFragment只是继承Fragment类。
在TutListFragment类中，我们需要重写两个方法： onListItemClick()和onCreate()。这些方法的内容看起来应该很熟悉，它与之前我们讲过的TutListActivity类的代码一致。这个代码很快就要修改，但是现在暂时不需要，下面是当前TutListFragment类的代码：
@Override
public void onListItemClick(ListView l, View v, int position, long id) {
String[] links = getResources().getStringArray(R.array.tut_links);
String content = links[position];
Intent showContent = new Intent(getActivity().getApplicationContext(),
TutViewerActivity.class);
showContent.setData(Uri.parse(content));
startActivity(showContent);
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setListAdapter(ArrayAdapter.createFromResource(getActivity()
.getApplicationContext(), R.array.tut_titles,
R.layout.list_item));
}
it知识库：Android用户界面设计：使用片段，转载需保留来源！
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
