Android App开发中ViewPager组件的入门使用教程

概述首先让大家有个全局的认识，直接上个项目，看看仅仅通过这几行代码，竟然就能完成如此强悍的功能。下篇再仔细讲讲为什么要这么写。

首先让大家有个全局的认识，直接上个项目，看看仅仅通过这几行代码，竟然就能完成如此强悍的功能。下篇再仔细讲讲为什么要这么写。
效果图：
实现了三个vIEw间的相互滑动
第一个VIEW向第二个VIEW滑动：

第二个VIEW向第三个VIEW滑动：

一、新建项目，引入VIEwPager控件
VIEwPager。它是Google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。

1.在主布局文件里加入

<relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"   xmlns:tools="http://schemas.androID.com/tools"   androID:layout_wIDth="fill_parent"   androID:layout_height="fill_parent"   tools:context="com.example.testvIEwpage_1.MainActivity" >  <androID.support.v4.vIEw.VIEwPager   androID:ID="@+ID/vIEwpager"   androID:layout_wIDth="wrap_content"   androID:layout_height="wrap_content"   androID:layout_gravity="center" />  </relativeLayout> 

其中 <androID.support.v4.vIEw.VIEwPager /> 是VIEwPager对应的组件，要将其放到想要滑动的位置

2、新建三个layout，用于滑动切换的视图
从效果图中也可以看到，我们的三个视图都非常简单，里面没有任何的控件，大家当然可以往里添加各种控件，但这里是个DEMO，只详解原理即可，所以我这里仅仅用背景来区别不用layout布局。

布局代码分别如下：

layout1.xml

<?xml version="1.0" enCoding="utf-8"?> <linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"   androID:layout_wIDth="match_parent"   androID:layout_height="match_parent"   androID:background="#ffffff"   androID:orIEntation="vertical" >     </linearLayout> 

layout2.xml

<?xml version="1.0" enCoding="utf-8"?> <linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"   androID:layout_wIDth="match_parent"   androID:layout_height="match_parent"   androID:background="#ffff00"   androID:orIEntation="vertical" >     </linearLayout> 

layout3.xml

<?xml version="1.0" enCoding="utf-8"?> <linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"   androID:layout_wIDth="match_parent"   androID:layout_height="match_parent"   androID:background="#ff00ff"   androID:orIEntation="vertical" >     </linearLayout><span > </span> 

二、代码实战
先上整体代码，然后逐步讲解。

package com.example.testvIEwpage_1; import java.util.ArrayList; import java.util.List; import java.util.zip.Inflater;  import androID.app.Activity; import androID.os.Bundle; import androID.support.v4.vIEw.PagerAdapter; import androID.support.v4.vIEw.VIEwPager; import androID.vIEw.LayoutInflater; import androID.vIEw.VIEw; import androID.vIEw.VIEwGroup;   public class MainActivity extends Activity {    private VIEw vIEw1,vIEw2,vIEw3;   private VIEwPager vIEwPager; //对应的vIEwPager      private List<VIEw> vIEwList;//vIEw数组         @OverrIDe   protected voID onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentVIEw(R.layout.activity_main);          vIEwPager = (VIEwPager) findVIEwByID(R.ID.vIEwpager);     LayoutInflater inflater=getLayoutInflater();     vIEw1 = inflater.inflate(R.layout.layout1,null);     vIEw2 = inflater.inflate(R.layout.layout2,null);     vIEw3 = inflater.inflate(R.layout.layout3,null);          vIEwList = new ArrayList<VIEw>();// 将要分页显示的VIEw装入数组中     vIEwList.add(vIEw1);     vIEwList.add(vIEw2);     vIEwList.add(vIEw3);               PagerAdapter pagerAdapter = new PagerAdapter() {              @OverrIDe       public boolean isVIEwFromObject(VIEw arg0,Object arg1) {         // Todo auto-generated method stub         return arg0 == arg1;       }              @OverrIDe       public int getCount() {         // Todo auto-generated method stub         return vIEwList.size();       }              @OverrIDe       public voID destroyItem(VIEwGroup container,int position,Object object) {         // Todo auto-generated method stub         container.removeVIEw(vIEwList.get(position));       }              @OverrIDe       public Object instantiateItem(VIEwGroup container,int position) {         // Todo auto-generated method stub         container.addVIEw(vIEwList.get(position));                           return vIEwList.get(position);       }     };               vIEwPager.setAdapter(pagerAdapter);        }   } 

代码量很小，全部放在了OnCreate()函数中。
1、先看声明的变量的意义：

private VIEw vIEw1,vIEw3; private List<VIEw> vIEwList;//vIEw数组 private VIEwPager vIEwPager; //对应的vIEwPager 

首先vIEwPager对应 <androID.support.v4.vIEw.VIEwPager/>控件。

vIEw1,vIEw3对应我们的三个layout，即layout1.xml,layout2.xml,layout3.xml
vIEwList是一个VIEw数组，盛装上面的三个VIEW

2、接下来是他们的初始化过程：

vIEwPager = (VIEwPager) findVIEwByID(R.ID.vIEwpager); LayoutInflater inflater=getLayoutInflater(); vIEw1 = inflater.inflate(R.layout.layout1,null); vIEw2 = inflater.inflate(R.layout.layout2,null); vIEw3 = inflater.inflate(R.layout.layout3,null);  vIEwList = new ArrayList<VIEw>();// 将要分页显示的VIEw装入数组中 vIEwList.add(vIEw1); vIEwList.add(vIEw2); vIEwList.add(vIEw3); 

初始化过程难度不大，就是将资源与变量联系起来布局，最后将实例化的vIEw1,vIEw3添加到vIEwList中
3、PageAdapter――PageVIEw的适配器
适配器这个东东想必大家都不莫生，在ListVIEw中也有适配器，ListVIEw通过重写GetVIEw（）函数来获取当前要加载的Item。而PageAdapter不太相同，毕竟PageAdapter是单个VIEw的合集。

PageAdapter 必须重写的四个函数：

（1）boolean isVIEwFromObject(VIEw arg0,Object arg1)
（2）int getCount()
（3）voID destroyItem(VIEwGroup container,Object object)
（4）Object instantiateItem(VIEwGroup container,int position)
先看看各个函数，我们上面都做了什么吧：

@OverrIDe public int getCount() {   // Todo auto-generated method stub   return vIEwList.size(); } 

getCount():返回要滑动的VIEw的个数

@OverrIDe public voID destroyItem(VIEwGroup container,Object object) {   // Todo auto-generated method stub   container.removeVIEw(vIEwList.get(position)); } 

destroyItem（）：从当前container中删除指定位置（position）的VIEw;

@OverrIDe public Object instantiateItem(VIEwGroup container,int position) {   // Todo auto-generated method stub     container.addVIEw(vIEwList.get(position));               return vIEwList.get(position);   } }; 

instantiateItem()：做了两件事，第一：将当前视图添加到container中，第二：返回当前VIEw

@OverrIDe public boolean isVIEwFromObject(VIEw arg0,Object arg1) {   // Todo auto-generated method stub   return arg0 == arg1; } 

isVIEwFromObject():对于这个函数就先不做讲解，大家目前先知道它要这样重写就行了，后面我们会对它进行改写。 

三、对键Key的理解
vIEwpager不直接处理每一个视图而是将各个视图与一个键联系起来。这个键用来跟踪且唯一代表一个页面，不仅如此，该键还独立于这个页面所在adapter的位置。当pageradapter将要改变的时候他会调用startUpdate函数，接下来会调用一次或多次的instantiateItem或者destroyItem。最后在更新的后期会调用finishUpdate。当finishUpdate返回时 instantiateItem返回的对象应该添加到父VIEwGroup destroyItem返回的对象应该被VIEwGroup删除。methodisVIEwFromObject(VIEw,Object)代表了当前的页面是否与给定的键相关联。

对于非常简单的pageradapter或许你可以选择用page本身作为键，在创建并且添加到vIEwgroup后instantiateItem方法里返回该page本身即可destroyItem将会将该page从vIEwgroup里面移除。isVIEwFromObject方法里面直接可以返回vIEw == object。
经过上面的讲解和实战例子，想必大家给Key的概念应该有个清楚的理解，下面举个例子来说明Key与VIEw的关系，由于Key与VIEw要一一对应，所以我把每个视图所处的位置position作为Key，在上章例子的基础上更改的，下面先看全部代码，然后看部分讲解：

package com.example.testvIEwpage_2; /**  * @author harvic  * @date 2014.8.11  */ import java.util.ArrayList; import java.util.List; import androID.app.Activity; import androID.os.Bundle; import androID.support.v4.vIEw.PagerAdapter; import androID.support.v4.vIEw.VIEwPager; import androID.vIEw.LayoutInflater; import androID.vIEw.VIEw; import androID.vIEw.VIEwGroup;  public class MainActivity extends Activity {    private VIEw vIEw1,vIEw3;   private List<VIEw> vIEwList;// vIEw数组   private VIEwPager vIEwPager; // 对应的vIEwPager      @OverrIDe   protected voID onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentVIEw(R.layout.activity_main);     vIEwPager = (VIEwPager) findVIEwByID(R.ID.vIEwpager);     LayoutInflater inflater = getLayoutInflater();     vIEw1 = inflater.inflate(R.layout.layout1,null);      vIEwList = new ArrayList<VIEw>();// 将要分页显示的VIEw装入数组中     vIEwList.add(vIEw1);     vIEwList.add(vIEw2);     vIEwList.add(vIEw3);      PagerAdapter pagerAdapter = new PagerAdapter() {        @OverrIDe       public boolean isVIEwFromObject(VIEw arg0,Object arg1) {         // Todo auto-generated method stub         //根据传来的key，找到vIEw,判断与传来的参数VIEw arg0是不是同一个视图         return arg0 == vIEwList.get((int)Integer.parseInt(arg1.toString()));       }        @OverrIDe       public int getCount() {         // Todo auto-generated method stub         return vIEwList.size();       }        @OverrIDe       public voID destroyItem(VIEwGroup container,Object object) {         // Todo auto-generated method stub         container.removeVIEw(vIEwList.get(position));       }        @OverrIDe       public Object instantiateItem(VIEwGroup container,int position) {         // Todo auto-generated method stub         container.addVIEw(vIEwList.get(position));          //把当前新增视图的位置（position）作为Key传过去         return position;       }     };      vIEwPager.setAdapter(pagerAdapter);    }  } 

在这里更改了两个地方：
1、先看Key的产生的位置instantiateItem（）

@OverrIDe public Object instantiateItem(VIEwGroup container,int position) {   // Todo auto-generated method stub   container.addVIEw(vIEwList.get(position));    //把当前新增视图的位置（position）作为Key传过去   return position; } 

在这个函数中Key是作为返回值与当前装入Container中的视图对应起来的。所以在这里我们返回postion与container.addVIEw(vIEwList.get(position));里的vIEwList.get(position)这个视图对应起来。
2、isVIEwFromObject （）

@OverrIDe public boolean isVIEwFromObject(VIEw arg0,Object arg1) {   // Todo auto-generated method stub   //根据传来的key，找到vIEw,判断与传来的参数VIEw arg0是不是同一个视图   return arg0 == vIEwList.get((int)Integer.parseInt(arg1.toString())); } 

判断从instantiateItem（）返回来的Key与当前的VIEw是否能对应起来，我们知道从instantiateItem传过来的其实是position，所以我们要根据position找到VIEw，然后跟参数中的VIEw arg0判断。

但在真正 *** 作时出现了问题，我们要先将obect对应转换为int类型：(int)Integer.parseInt(arg1.toString())；然后再根据position找到对应的VIEw；

效果图：三个VIEw之间的滑动切换

       

总结

以上是内存溢出为你收集整理的Android App开发中ViewPager组件的入门使用教程全部内容，希望文章能够帮你解决Android App开发中ViewPager组件的入门使用教程所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。