ViewPager在首尾页滑动切换

转载自：http://www.cnblogs.com/xiabi/p/4343030.html

  上图是我们需要实现的效果图，功能有如下三个：

  1. 手势滑动可以切换界面，点击上面的引导一到引导四也可以切换到相应的画面。

  2. 切换界面时，引导一到引导四下面的横线会相应的移动到对应的地方。

  3. 没有手势时，界面会自动轮转，有种广告轮转的效果；有手势是，会停止轮转。

 

  在这篇文章里，我们先实现第一个功能。为了实现这个功能，我们需要知道ViewPager控件，它是google SDk中自带的一个android-support-v4.jar的一个类，可以用来实现屏幕间的切换。这个包在我们创建新工程时会自动添加，因此无需紧张。

首先我们先来看主界面是如何设计的：

 

  布局代码就不贴出来了，正如图中三个红框，第一个红框是四个TextView，第二个红框是一个ImageView，第三个红框是ViewPager。在ViewPager里，切换界面时，实际上是切换View，因此需要创建对应的四个布局文件，这个布局文件很简单，只需要设置背景为图片就好。

PagerAdaper的说明

  类似Listview，我们需要一个适配器，ViewPager对应的适配器是PagerAdapter，这是一个抽象类，因此我们需要自己写一个类来继承PagerAdapter。继承pageradapter，至少必须重写下面的四个方法：

1 instantiateItem(ViewGroup, int)
2. destroyItem(ViewGroup, int, Object)
3. getCount()
4. isViewFromObject(View, Object) 

具体的这个类可以看下面的代码：

package com.example.viewpager;

import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;

public class MyPagerAdater extends PagerAdapter {

        // 放置页卡界面的List
    private List<View> listview;

    public MyPagerAdater(List<View> l) {
        listview = l;
    }

　　　　　// 当要显示的图片可以进行缓存的时候，会调用这个方法进行显示图片的初始化，我们将要显示的ImageView加入到ViewGroup中，然后作为返回值返回即可
    @Override
    public Object instantiateItem(View container, int position) {
        // TODO Auto-generated method stub
        ((ViewPager) container).addView(listview.get(position));
        return listview.get(position);
    }

        // 获取要滑动的控件的数量，在这里应该是展示的页卡数量
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return listview.size();
    }

        // 来判断显示的是否是同一张图片，这里我们将两个参数相比较返回即可
    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        // TODO Auto-generated method stub
        return arg0 == arg1;
    }

        // PagerAdapter只缓存三张要显示的图片，如果滑动的图片超出了缓存的范围，就会调用这个方法，将图片销毁
    @Override
    public void destroyItem(View container, int position, Object object) {
        // TODO Auto-generated method stub
        ((ViewPager) container).removeView(listview.get(position));

    }

}

MyPagerAdapter的使用

  MyPagerAdapter写好后，如何运用呢，其实跟ListView是相似的，在MyPagerAdapter的构造器中我们需要传入List数组，这个List里放的时页卡的界面，因此需要用到LayoutInflater来获得View。

LayoutInflater inflater = getLayoutInflater();
listview.add(inflater.inflate(R.layout.l1, null));
listview.add(inflater.inflate(R.layout.l2, null));
listview.add(inflater.inflate(R.layout.l3, null));
listview.add(inflater.inflate(R.layout.l4, null));

  接着就是简单的mViewPager.setAdapter(mPagerAdater);以及mPagerAdater.notifyDataSetChanged();就行。

 

  之前我们说到点击上面的引导一到引导四也可以切换到相应的画面，这个也是很容易实现的，只需设置TexView的监听器并且在onClick函数里调用setCurrentItem(index)即可。

 

  另外我们发现一个问题，滑动到最后一个页面时，发现无法继续向右滑动，这怎么解决呢？我们只需监听ViewPager的滑动过程，

因此我们需要实现OnPageChangeListener这个接口。OnPageChangeListener这个接口需要实现三个方法：（onPageScrollStateChanged，onPageScrolled ，onPageSelected）

① onPageScrollStateChanged(int arg0) ：此方法是在状态改变的时候调用。其中arg0这个参数有三种状态（0，1，2）。arg0 ==1的时辰默示正在滑动，arg0==2的时辰默示滑动完毕了，arg0==0的时辰默示什么都没做。

  页卡正常滑动时，会经历 1-2-0的三个阶段；

  页卡在最后一页向右滑，或者第一页向左滑经历 1-0-2-0的阶段；

  直接调用 setCurrentItem则只是经历 2-0的阶段

② onPageScrolled(int arg0,float arg1,int arg2)：当页面在滑动的时候会调用此方法，在滑动被停止之前，此方法回一直得到调用。其中三个参数的含义分别为：

arg0 :当前页面，及你点击滑动的页面；  arg1:当前页面偏移的百分比；  arg2:当前页面偏移的像素位置   。

③ onPageSelected(int arg0) ：此方法是页面跳转完后得到调用，arg0是你当前选中的页面的Position（位置编号）。

 

  下面重写onPageScrollStateChanged方法即可。具体代码如下：

public class MyOnPageChangeListener implements OnPageChangeListener {

        private boolean isScrolled = false;

        public void onPageScrollStateChanged(int arg0) {
            switch (arg0) {
            case 0:
                // 每一次的滑动arg0都会经历1-2-0的阶段，但是在最后一个页面向右滑，或者第一个页面向左滑时会经历 1-0-2-0的阶段
                // 例如： 最后页面右滑时，刚刚开始会是1，这时isScrolled为false，但是没有下一页面，所以此时的页面还是最后一个页面，满足if条件
                if (mViewPager.getCurrentItem() == mViewPager.getAdapter()
                        .getCount() - 1 && !isScrolled)
                    mViewPager.setCurrentItem(0);
                else if (mViewPager.getCurrentItem() == 0 && !isScrolled) {
                    mViewPager.setCurrentItem(mViewPager.getAdapter()
                            .getCount() - 1);
                }
                break;
            case 1:
                isScrolled = false;
                break;
            case 2:
                isScrolled = true;
                break;
            }
        }
       ........
}