ViewPage实现类似Gallery效果以及2个ViewPage联动

ViewPage实现类似Gallery效果以及2个ViewPage联动

话不多说直接上图

一：画廊效果其实很简单
1、viewpage设置距离左右一定距离

<ViewPager
            android:id="@+id/vp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="60dp"
            android:layout_marginRight="60dp"
            >

2、设置页与页之间的间距

vp.setPageMargin(70);

3、viewPage父容器的Touch交给Viewpage处理，否则会出现viewpage的触摸空间只有中间一点

container.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return vp.dispatchTouchEvent(event);
            }
        });

4、然后就是正常的setAdapter，即可显示gallery的效果的ViewPage了。

PS：如果想要各种viewpage的切换动画，配合可以参考我的github上的开源项目3DViewPageTransformer

二、2个Viewpage滑动跟随

1、由于viewpage只提供了pageChange的监听，并没有滑动的监听，所以只能自定义ViewPage，在自定义ViewPage内部去关联其他的ViewPage，使得，二者同步滑动。

2、在onInterceptTouchEvent，onTouchEvent，setCurrentItem这几个涉及到ViewPage滑动的处理的地方，对关联的ViewPage做相应的滑动处理，达到同步，代码如下：

package com.example.viewpagefollow;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

/**
 * Created by hml on 2017/7/13.
 */

public class FollowViewPager extends ViewPager {
    FollowViewPager mFollowViewPager;
    private boolean forSuper;

    public FollowViewPager(Context context) {
        super(context);
    }

    public FollowViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent arg0) {
        if (!forSuper && mFollowViewPager!=null) {
            mFollowViewPager.forSuper(true);
            mFollowViewPager.onInterceptTouchEvent(arg0);
            mFollowViewPager.forSuper(false);
        }
        return super.onInterceptTouchEvent(arg0);
    }

    @Override
    public boolean onTouchEvent(MotionEvent arg0) {
        if (!forSuper && mFollowViewPager!=null) {
            mFollowViewPager.forSuper(true);
            mFollowViewPager.onTouchEvent(arg0);
            mFollowViewPager.forSuper(false);
        }
        return super.onTouchEvent(arg0);
    }

    public void setFollowViewPager(FollowViewPager FollowViewPager) {
        mFollowViewPager = FollowViewPager;
    }

    public void forSuper(boolean forSuper) {
        this.forSuper = forSuper;
    }

    @Override
    public void setCurrentItem(int item, boolean smoothScroll) {
        if (!forSuper && mFollowViewPager!=null) {
            mFollowViewPager.forSuper(true);
            mFollowViewPager.setCurrentItem(item, smoothScroll);
            mFollowViewPager.forSuper(false);
        }
        super.setCurrentItem(item, smoothScroll);
    }

    @Override
    public void setCurrentItem(int item) {
        if (!forSuper && mFollowViewPager!=null) {
            mFollowViewPager.forSuper(true);
            mFollowViewPager.setCurrentItem(item);
            mFollowViewPager.forSuper(false);
        }
        super.setCurrentItem(item);

    }
}

mFollowViewPager即关联的ViewPage

FollowViewPager mFollowViewPager;

forSuper 用来处理双向联动时，避免ANR的。

private boolean forSuper;

结语

好了，后面贴上源码，下次见！

Demo在此