Android界面设计之：使用水平视图切换

　在本文中，将介绍如何使用Android中提供的兼容包Android compatibility package编写一个横向水平分页功能的小应用。Android compatibility package为Android在2011年初发布的一个功能兼容包，该兼容开发包主要包含了Android最新平台上的最酷的特性,这样的话,当开发者在为旧版本的Android设备开发程序的时候,就可以使用这个兼容开发包来使用最新的Android特性,而不用自己重新开发, 从而减轻了开发者的开发任务。

　　在兼容包中，提供了viewPager组件，可以很方便地开发水平view切换的功能。而水平视图切换的功能，可以方便地让用户通过手指从右向左滑动，就可以轻易切换不同的视图。本文的读者为对Android 开发有初步认识的开发者。

　　概述

　　在Android compatibility package中，有一系列的类可以用来实现水平视图的切换。其中的ViewPager控件(android.support.v4.view.ViewPager)提供了水平方向滑动切换视图的功能，可以用在象图库等需要大量展示不同视图的应用中。而PageAdapter(android.support.v4.view.PagerAdapter)类则是用来定义数据，这些数据将会显示在ViewPager控件中。下面将会以一个简单例子来讲解如何使用该控件。本文的代码可以在http://android-mt-tutorials.googlecode.com/svn/trunk/SimpleViewPager中下载。

　　步骤一 建立Android项目工程

　　先使用Eclipse,建立一个Android Project，应用名称为SimpleViewPager，Activity的名称为SimpleViewPagerActivity。选用的Android SDK版本为2.2或以上。

　　步骤二 安装Android compatibility package

　　要使用Android compatibility 包，需要首先通过Android SDK Manager进行下载。目前其最新的版本为Android Compatibility package v4, Revision 3;，在通过Android SDK Manager下载安装后，要为当前的Android项目增加其Android compatibility功能，我们可以通过在鼠标右键点击已建立的项目，在弹出的菜单中，选择“Android Tools”-à” AddCompatibility Library”即可。此时会在项目的库文件中看到有android-support-v4.jar，表示已经成功在项目中增加了对应的文件。

　　步骤三 定义ViewPager

　　接下来，需要在界面布局中增加ViewPager控件。在我们的例子中，在main.xml的布局文件中，增加如下代码，要注意的是ViewPager控件必须使用完整的全称，即：android.support.v4.view.ViewPager。

　　android:orientation="vertical"

　　android:layout_width="fill_parent"

　　android:layout_height="fill_parent">

　　android:layout_width="match_parent"

　　android:layout_height="match_parent"

　　android:id="@+id/myfivepanelpager"/>

　　步骤四 创建不同的页面文件

　　在这个示例程序中，我们将展示5个不同的界面，每个界面都有不同的文字和图片，当然读者可以自行进行扩展。这5个不同的界面文件的名称分别为：farleft.xml, left.xml,middle.xml, right.xml, 和 farright.xml，具体的代码见附件，下面是5个文件的布局界面图：

▲

　 要注意的是，在这些页面文件中，不要忘记在每个页面的imageview控件中，都要加上onclick事件，因为下文中的PageAdapter会在运行时调用这些页面。

　　步骤五 实现自定义的PageAdapter

　　ViewPager需要使用数据适配器去填充数据，而这些数据来源于我们上一步已经建立并命名好的5个页面布局文件。而PageAdapter则是对应的数据适配器，

　　我们要继承PageAdapter类，实现自己的数据适配器，假设自定义的PageAdapter的名称为MyPagerAdapter，因此要实现以下的几个方法。

　　首先，需要定义切换页面的个数，在本例中，需要有5个页面要显示。所以，可以在getCount()方法中定义，如下：

　　private class MyPagerAdapter extends PagerAdapter {

　　@Override

　　public int getCount() {

　　return 5;

　　}

　　………

　　}

　　接下来，需要实现instantiateItem()方法，在这个方法中，对需要进行水平切换的页面进行了加载和初始化。代码如下：

　　public Object instantiateItem(View collection, int position) {

　　LayoutInflater inflater = (LayoutInflater) collection.getContext()

　　.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

　　int resId = 0;

　　switch (position) {

　　case 0:

　　resId = R.layout.farleft;

　　break;

　　case 1:

　　resId = R.layout.left;

　　break;

　　case 2:

　　resId = R.layout.middle;

　　break;

　　case 3:

　　resId = R.layout.right;

　　break;

　　case 4:

　　resId = R.layout.farright;

　　break;

　　}

　　View view = inflater.inflate(resId, null);

　　((ViewPager)collection).addView(view, 0);

　　return view;

　　}

　　其中，position是定义当前的视图的位置序号，当position为0时，加载的应该是第一个页面，如此类推，并且使用了LayoutInflater服务中的inflate方法加载指定的视图，并且将其加入到ViewPager的视图集合中去(通过如下的两行代码实现：)

　　View view = inflater.inflate(resId, null);

　　((ViewPager)collection).addView(view, 0);

　　下面这个图，则简要说明了5个视图中的各自POSITION的位置。

▲

　　最后，要记得实现destroyItem方法，在这个方法中，要将已经不再显示的视图从ViewPager的视图集合中移除掉。代码如下：

　　public void destroyItem(View arg0, int arg1, Object arg2) {

　　((ViewPager) arg0).removeView((View) arg2);

　　}

　　步骤6 绑定到ViewPager

　　这是最后一步，就是要将刚才编写的自定义PageAdapter绑定到ViewPager控件中去，代码如下：

　　@Override

　　public void onCreate(Bundle savedInstanceState) {

　　super.onCreate(savedInstanceState);

　　setContentView(R.layout.main);

　　MyPagerAdapter adapter = new MyPagerAdapter();

　　ViewPager myPager = (ViewPager) findViewById(R.id.myfivepanelpager);

　　myPager.setAdapter(adapter);

　　myPager.setCurrentItem(2);

　　}

　　可以看到 myPager.setAdapter(adapter);直接将自定义的MyPagerAdapter适配器实例跟ViewPager控件相绑定，并通过setCurrentItem方法设置初始化显示的是第2个视图界面(在我们的例子中是一张猴子的照片)。最后，如下图所示，就完成了一个能从右到左滑动的图片展示应用了，是不是很简单呢?

▲