软件开发的家园,编程爱好者的天地.

现在是:北京时间 2016/4/14 上午11:50:51 星期四

设为首页  |  加入收藏  |  网站地图

当前位置: 第八基地首页 > 移动开发 >
Android用户界面设计:使用片段
发布于:第八基地 来源:互联网 作者:天堂路上 时间:2011-10-25 点击:142

  Android3.0引入的新的片断(Fragment)API,让我们更容易地创建动态用户界面。在这个教程中,我们学习如何将一个两屏的ListView转换成WebView流,以适应大屏幕的单屏流设计,比如在平板设备中。

  这篇文章的节奏将比我们的入门教程更快一些。如果你对基本的Android控件或概念不熟悉你可能需要复习这个网站上我们其它的一些教程,甚至是AndroidAPI参考。最终的开源代码可以在Googlecode上下载到。

  片段简介

  在我们开始之间,让我们在更高的层次上定义一下什么是片段。通常来说,片段是一大块用户界面,它具有自己的生存周期。如果它听起来像一个Activity,那是因为它确实很像一个Activity。然而,片段与Activity不同,片段必须存在于Activity之内。片段不须要在它每次初始化的时候与同一个Activity配对,这使它具有一些灵活性。与Activity一样,片段也无需包含任何用户界面。

  步骤0:开始

  这个教程假设你读过我们的列表视图教程,你可以下载那个教程的代码,并完成一些任务,然后开始,也可以直接下载这个教程的代码直接开始。

  步骤1:重新设计界面

  下图示意了我上在列表视图教程中所提到的文章阅读应用,我们还没有考虑并使用片段:  这个流程在相对小屏幕上运行得很不错。然而,在大屏幕上,比如MotorolaXoom平板的10寸屏幕上,在列表视图上却浪费了很多空间。WebView看起来正常,但是有点枯燥。

  这就是要引入片段的地方:在大屏幕上,我们可以提供更有效的用户界面,如果我们可以在同一屏上显示ListView和WebView。当用户点击左边“面板”的列表视图中的某一项时,右边的WebView更新显示相应的内容。这种工作流程经常用于email或文档或RSS阅读器。下图就是重新设计之后的界面示意图:

  步骤2:转换为基于片段的设计

  现在我们知道了新的流程应该如何设计,我们也知道当前的两个活动必须转换成片段。我们将分几步来完成这个转换。第一步保持界面样子不变,只是使用片段修改每个界面内容。一个片段将包含当前的ListView,另一个包含WebView。然后我们再转到单个屏幕的实现,修改ListView和WebView之间的消息传递。

  首先,将你的程序的项目构建目标改变Android3.0。在Eclipse中,右键点击项目并选择“属性”。点击Android部分并选中Android3.0。我们不使用任何GoogleAPI,所以Android开源项目版本足够了。然后点击“确定”按钮。

现在你就可以访问新的API了,包括片段API。

  注意:在将来的教程中,我们将讨论如何使用新的兼容层来使得像片段API这样的技术在更早版本的Android设备上也能工作。但是现在它只能运行在Android3.0设备上。

  步骤3:创建片段类

  创建两个Java类来代表两个片段:ListView界面和WebView界面。将它们命名为TutListFragment和TutViewerFragment。TutListFragment将继承ListFragment类,TutViewerFragment只是继承Fragment类。

在TutListFragment类中,我们需要重写两个方法:onListItemClick()和onCreate()。这些方法的内容看起来应该很熟悉,它与之前我们讲过的TutListActivity类的代码一致。这个代码很快就要修改,但是现在暂时不需要,下面是当前TutListFragment类的代码:

@OverridepublicvoidonListItemClick(ListViewl,Viewv,intposition,longid){String[]links=getResources().getStringArray(R.array.tut_links);Stringcontent=links[position];IntentshowContent=newIntent(getActivity().getApplicationContext(),TutViewerActivity.class);showContent.setData(Uri.parse(content));startActivity(showContent);}@OverridepublicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setListAdapter(ArrayAdapter.createFromResource(getActivity().getApplicationContext(),R.array.tut_titles,R.layout.list_item));}

  TutViewerFragment类更简单一些。我们基于当前片段运行在同一个活动下并且直接从Fragment类内问部获取目标数据的事实。添加一个重写onCreateView()方法。这个方法的代码应该看起来像这样:

@OverridepublicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,BundlesavedInstanceState){IntentlaunchingIntent=getActivity().getIntent();Stringcontent=launchingIntent.getData().toString();WebViewviewer=(WebView)inflater.inflate(R.layout.tut_view,container,false);viewer.loadUrl(content);returnviewer;}

  直接访问活动实例的能力非常有用,但是在后面会引起一个问题。如果这个片段存在于带有列表片段的界面上会怎么样呢?在那样的情况下,就会没有启动目标来获取URL。类似的在TutListFragment中,只要当用户点击一个列表项时我们都直接启动一个新的Activity。如果TutViewFragment在同一个活动中存在什么怎么样呢?如果这样的话,启动一个新的活动就没有意义了。我们将在这个教程的后面回过头来解决这个问题。

  步骤4:添加片段布局资源

  现在创建一个新的名为“tutlist_fragment.xml”的布局文件来表示包含文章列表的片段。片段布局资源使用你创建的Fragment类的标签和引用。

<?xmlversion="1.0"encoding="utf-8"?><fragmentxmlns:android="http://schemas.android.com/apk/res/android"android:name="com.mamlambo.tutorial.tutlist.TutListFragment"android:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/tutlist_fragment"></fragment>

  接下来,创建一个类似的布局文件,叫做tutview_fragment.xml:

<?xmlversion="1.0"encoding="utf-8"?>
对我有帮助
(0)
0%
对我没帮助
(0)
0%
返回顶部
在线反馈
在线反馈