ViewPager 详解（一）---基本入门-CFANZ编程社区

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

效果图：

实现了三个view间的相互滑动

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

ViewPager 详解（一）---基本入门_xml

ViewPager 详解（一）---基本入门_xml_02

一、新建项目，引入ViewPager控件

ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。

1.在主布局文件里加入

android.support.v4.view.ViewPager 该布局要导入一个JAR包

ViewPager 详解（一）---基本入门_ide_03

<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 >

二、代码实战

先上整体代码，然后逐步讲解。

package com.example.testviewpage_1;  
/** 
 * @author  harvic 
 * @date 2014.8.9 
 */  
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, view2, view3;  
private List<View> viewList;//view数组  
private ViewPager viewPager;  //对应的viewPager

首先viewPager对应 <android.support.v4.view.ViewPager/>控件。

view1,view2 ,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,view2,view3添加到viewList中

3、PageAdapter——PageView的适配器

适配器这个东东想必大家都不莫生，在ListView中也有适配器，listView通过重写GetView（）函数来获取当前要加载的Item。而PageAdapter不太相同，毕竟PageAdapter是单个VIew的合集。

PageAdapter 必须重写的四个函数：

boolean isViewFromObject(View arg0, Object arg1)
int getCount()
void destroyItem(ViewGroup container, int position,Object object)
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, int position,  
        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():对于这个函数就先不做讲解，大家目前先知道它要这样重写就行了，后面我们会对它进行改写。

viewPager.setCurrentItem(viewPager.getCurrentItem()+1);//不能在子线程里面更新UI 表示跳转到某个页面

viewPager.setOnPageChangeListener(this);//设置接听器

//方法重新  接听器
  
  
  //滚动状态变化调用
  @Override
  public void onPageScrollStateChanged(int state) {
    
  }
  //滚动的时候调用
  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
  }
  //当新的条目被选中的时候调用
  @Override
  public void onPageSelected(int position) {
    int newPosition=position%listImage.size();//防止越界
    
    textView.setText(contentData[newPosition]);
    
    ll_point_container.getChildAt(lastPosition).setEnabled(false);//表示选中的位置  就是白点选中的位置
    ll_point_container.getChildAt(newPosition).setEnabled(true);//表示选中的位置  就是白点选中的位置
    
    lastPosition=newPosition;//记录上次的位置
  }

viewPager.setCurrentItem(500000);//设置跳到某个位置500000表示可以一直重复使用

整个轮番图项目

MainActivity.java

package com.liufangguanggao.image;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;

public class MainActivity extends Activity implements OnPageChangeListener{
      private ViewPager viewPager;  //对应的viewPager  
      int[] imageResIds;
      ArrayList<ImageView> listImage;
      LinearLayout ll_point_container;
      
      String[] contentData;//显示的文本
      
      TextView textView;//显示的文本
      
      int lastPosition;
      
      
      boolean isLoop=true;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    //初始化布局View视图
    initView();
    
    //Model数据
    initData();
    
    //Controller控制器
    initAdapter();
    
    
    
    //开启轮番图
    new Thread(){
      public void run() {
        while(isLoop){
          try {
            Thread.sleep(2000);
          } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
          }
          
          runOnUiThread(new Runnable() {
            
            @Override
            public void run() {
              viewPager.setCurrentItem(viewPager.getCurrentItem()+1);//不能在子线程里面更新UI
            }
          });
          //条到下一个页面去
        }
      };
    }.start();
  }
  @Override
  public void onBackPressed() {
    isLoop=false;
    super.onBackPressed();
  }
  private void initView() {
    
    viewPager=(ViewPager)findViewById(R.id.viewpager);
    //viewPager.setOffscreenPageLimit(2);表示左右各新建2个   默认表示左右各建1个
    ll_point_container=(LinearLayout)findViewById(R.id.ll_point_container); 
  
    viewPager.setOnPageChangeListener(this);//设置接听器
    textView=(TextView)findViewById(R.id.textViewId);//初始化文本编辑
    
    
    
  }
  @Override
  protected void onDestroy() {
    isLoop=false;
    super.onDestroy();
  }
  private void initData() {
    //初始化要显示的数据
    
    //图片数组id资源
     imageResIds = new int[]{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e};
     
    //文本描述
     contentData = new String[]{
        "这位37岁的牙买加老将具备夺取世界冠军",
        "当奥蒂今晚闪着泪花走出第六届",
        "世界田径锦标赛赛场时，她追求了一生的梦想化作了一场噩梦。",
        "奥蒂已经赢得过一次百米冠军。",
        "可以说，没有任何一个"
    };
     
     
     //初始化图片
     listImage = new ArrayList<ImageView>();
     ImageView imageView;
     View pointView;
     LayoutParams linear;
     for(int i=0;i<imageResIds.length;i++){
       imageView = new ImageView(this);
       imageView.setBackgroundResource(imageResIds[i]);
       listImage.add(imageView);
       
       //加小白点
       pointView = new View(this);
       pointView.setBackgroundResource(R.drawable.selector_bg_point);
       linear= new LinearLayout.LayoutParams(15, 15);//设置圆的大小
       if(i!=0)
       linear.leftMargin=30;
       pointView.setEnabled(false);//吧该把你
       ll_point_container.addView(pointView,linear);
     }
    
  }
  private void initAdapter() {
    //设置适配器
    ll_point_container.getChildAt(0).setEnabled(true);//表示选中的位置  就是白点选中的位置  初始化白点
    textView.setText(contentData[0]);
    lastPosition=0;
    
    
    viewPager.setAdapter(new PagerAdapter() {
      
      @Override
      public int getCount() {
        // TODO Auto-generated method stub
        return Integer.MAX_VALUE;//listImage.size()表示有几项滑动  Integer.MAX_VALUE表示一个很大的数
      }
      //3.指定复用的判断逻辑  固定写法
      @Override
      public boolean isViewFromObject(View view, Object object) {
      //当划到新的条目,又返回来,view是否可以被复用
        //返回判断规则
        return view==object;
      }
      
      
      //1.返回要显示的条目内容,创建条目
      @Override
      public Object instantiateItem(ViewGroup container, int position) {
        //container 容器：ViewPager
        //position  ：当前要显示的条目容器的位置
        Log.v("wang", "初始化条目");
        int newPosition=position%listImage.size();
        ImageView imageView=listImage.get(newPosition);//position这里如果想我想循环的换必须判断或取余
        //1.吧View添加的container中
        container.addView(imageView);
        //2.吧View对象返回给框架,适配器
        return imageView;//必须重写，否则报异常
      }

      //2.销毁条目
      @Override
      public void destroyItem(ViewGroup container, int position, Object object) {
        //object 要销毁的对象
        Log.v("wang", "销毁对象"+position);
        container.removeView((View)object);
      }
      
      
    });
    
    
    //默认设置到中间的某个位置
    //int pos=Integer.MAX_VALUE/2-(Integer.MAX_VALUE/2%listImage.size());
    viewPager.setCurrentItem(500000);//设置跳到某个位置
  }

  
  //方法重新  接听器
  
  
  //滚动状态变化调用
  @Override
  public void onPageScrollStateChanged(int state) {
    
  }
  //滚动的时候调用
  @Override
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
  }
  //当新的条目被选中的时候调用
  @Override
  public void onPageSelected(int position) {
    int newPosition=position%listImage.size();//防止越界
    
    textView.setText(contentData[newPosition]);
    
    ll_point_container.getChildAt(lastPosition).setEnabled(false);//表示选中的位置  就是白点选中的位置
    ll_point_container.getChildAt(newPosition).setEnabled(true);//表示选中的位置  就是白点选中的位置
    
    lastPosition=newPosition;//记录上次的位置
  }
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >
    
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="160dp">
        
        <android.support.v4.view.ViewPager  
            android:id="@+id/viewpager"  
            android:layout_width="match_parent"  
            android:layout_height="match_parent"  
            android:layout_gravity="center" /> 
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:padding="5dp"
            android:orientation="vertical"
            android:gravity="center_horizontal"
            android:layout_alignParentBottom="true"
            android:background="#66000000">
            <TextView 
                android:id="@+id/textViewId"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@android:color/white"
                android:singleLine="true"
                />
            <LinearLayout 
                android:layout_width="match_parent"
                android:id="@+id/ll_point_container"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:gravity="center_horizontal"
                >
                
            </LinearLayout>
            
        </LinearLayout>        
    </RelativeLayout>
 
</RelativeLayout>

shape_bg_point_disable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <corners android:radius="5dp"/>
    <solid android:color="@android:color/darker_gray"/>
</shape>

shape_bg_point_enable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <corners android:radius="5dp"/>
    <solid android:color="#fff"/>
</shape>

selector_bg_point.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_enabled="true" android:drawable="@drawable/shape_bg_point_enable"></item>
    <item android:state_enabled="false" android:drawable="@drawable/shape_bg_point_disable"></item>
</selector>