两个ViewPager的联动效果

前言

以前做的项目，导航栏基本上是在顶部或者是在底部，但是最近开发的一款app，刚开始拿到设计图也是很懵逼的，导航栏居然是在中间，what fuck！设计图如下：

index.png

导航栏在中间就会涉及到两个viewpager之间的联动，viewpager的高度适应等问题，现在来纪录一下是怎么解决问题的？希望给有同样需求的提供一定的帮助。

（一）Viewpager 高度自适应

1. 系统自动viewpager 不能设置wrap_content；
2. 自定义viewpager，注意高度的设置否则底部空白的问题
   网上也会有很多相关的教程，我选择了其中一个。具体代码如下：

public class WrapContentHeightViewPager extends ViewPager {
    private int current;
    private int height = 0;
    private boolean scrollble = true;

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

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (getChildCount() > current) {
            View child = getChildAt(current);
            child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
            int h = child.getMeasuredHeight();
            height = h;

        }
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    public void resetHeight(int current) {
        this.current = current;
        if (getChildCount() > current) {
            LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) getLayoutParams();
            if (layoutParams == null) {
                layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, height);
            } else {
                layoutParams.height = height;
            }
            setLayoutParams(layoutParams);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (!scrollble) {
            return true;
        }
        return super.onTouchEvent(ev);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return scrollble && super.onInterceptTouchEvent(ev);
    }

    public boolean isScrollble() {
        return scrollble;
    }

    public void setScrollble(boolean scrollble) {
        this.scrollble = scrollble;
    }

}

（二）Viewpager 的联动

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

如果ViewPager有关于移动距离的回调接口，这事儿就好办了，遗憾的是没有，只有一个OnPageChangeListener，我试过在OnPageChangeListener中根据onPageScrolled(int position, float positionOffset, int positionOffsetPixels)的参数来做，但是失败了。
没办法只有改造一下OnPageChangeListener，让它可以实现两个viewpager的联动,难点在于对滑动的距离一个计算。

public class BaseLinkPageChangeListener implements ViewPager.OnPageChangeListener {

    private ViewPager linkViewPager;
    private ViewPager selfViewPager;

    private int pos;

    public BaseLinkPageChangeListener(ViewPager selfViewPager, ViewPager linkViewPager) {
        this.linkViewPager = linkViewPager;
        this.selfViewPager = selfViewPager;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        int marginX = ((selfViewPager.getWidth() + selfViewPager.getPageMargin()) * position
                + positionOffsetPixels) * (linkViewPager.getWidth() + linkViewPager.getPageMargin()) / (
                selfViewPager.getWidth()
                        + selfViewPager.getPageMargin());

        if (linkViewPager.getScrollX() != marginX) {
            linkViewPager.scrollTo(marginX, 0);
        }
    }

    @Override
    public void onPageSelected(int position) {
        this.pos = position;
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if (state == ViewPager.SCROLL_STATE_IDLE) {
            linkViewPager.setCurrentItem(pos);
        }
    }
}

（三）使用方法

1. xml布局

2. activity中的配置

        bodyVp.addOnPageChangeListener(new BaseLinkPageChangeListener(bodyVp, headerVp) {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                pageScrollToTop();
                bodyVp.resetHeight(position);//设置viewpager高度
                headerVp.resetHeight(position);
            }
        });
        headerVp.addOnPageChangeListener(new BaseLinkPageChangeListener(headerVp, bodyVp) {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
                tabLayout.onPageSelected(position);
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
                tabLayout.onPageScrolled(position, positionOffset, positionOffsetPixels);
                bodyVp.resetHeight(position);
                headerVp.resetHeight(position);
            }
        });

大功搞成，看一下效果图

result.gif

总结

一顿乱写，个人观点仅供参考，如有不对的地方，请直接直出
源码传送门