仿zaker最新版本引导界面的视图联动效果

简介

在jcodecraeer网站看到一篇文章是如何实现如何实现两个ViewPager的联动的文章

http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1031/1884.html




那篇文章的部分片段需要自定义Viewpager但是通过addonpagerchangeListener就可实现

联动ViewPager的意思就是当一个viewpager在滑动的时候，另外一个ViewPager也跟着滑动，而且两者是同步的。

如果ViewPager有关于移动距离的回调接口，这事儿就好办了，遗憾的是没有，只有一个OnPageChangeListener，我试过在OnPageChangeListener中根据onPageScrolled(int position, float positionOffset, int positionOffsetPixels)的参数来做，但是失败了。

那就只有自定义ViewPager了。

实现

通过viewpager的addonpagerchangeListener实现

效果图如下

首先简单介绍一下OnPageChangeListener

onPageSelected(int arg0)

[code]该函数只在切换时调用
arg0参数表示当前viewpager选中第几页

onPageScrolled(int arg0, float arg1, int arg2)

[code]该函数当滑动时调用
arg0表示当前滑动页面索引 0开始
arg1表示当前页面滑动百分比【0-1】
arg2表示当前滑动页面滑动像素【0-页面宽度】

onPageScrollStateChanged(int arg0)

[code]在每个状态变换的瞬间调用
SCROLL_STATE_IDLE : 值为0，表示当前页已经选定。
SCROLL_STATE_DRAGGING: 值为1，表示当前页面正在拖动。
SCROLL_STATE_SETTING: 值为2，表示当前页面正在拖动中，还没有到选定状态。

关键代码

[code]   //内部ViewPager
        viewpager2.setAdapter(new MypagerAdapter());
        viewpager2.addOnPageChangeListener(new OnPageChangeListener() {

            private int  index=0;

            @Override
            public void onPageSelected(int arg0) {
                index=arg0;

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

               int width=viewpager1.getWidth();
                //滑动外部Viewpager
                viewpager1.scrollTo((int)(width*arg0+width*arg1), 0);
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
               if(arg0==0){
                    viewpager1.setCurrentItem(index);
               }

            }
        });

[code] //外部ViewPager
        viewpager1.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager()));
        viewpager1.addOnPageChangeListener(new OnPageChangeListener() {

            private int index=0;

            @Override
            public void onPageSelected(int arg0) {
                index=arg0;

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                  //arg0当前滑动界面
                 //arg1当页面前滑动百分比
                 //arg2当前页面滑动像素

                int width=viewpager2.getWidth();
                //滑动内部Viewpager
                viewpager2.scrollTo((int)(width*arg0+width*arg1), 0);
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                 if(arg0==0){
                        viewpager2.setCurrentItem(index);
                 }

            }
        });
    }

传送门

项目地址