前言

产品让做一个仿京东金融的效果,在网上搜了搜,就找到一个通过重写ViewPage实现联动的案例,但效果不理想.最后实在没找到适合参考的案例,所以记录下来,希望能给有同样需求的童鞋一些帮助.

首先感谢我的同事ChenWei，没有他的帮助，绝对达不到现在的效果。里面好多难点都是他搞定的。

12081141-a5c57479bc7e5049.gif all.gif

技术难点

1、两个ViewPager的联动
2、滑动任一列表时,headerVp和其他列表都跟着滑动
3、切换页面时所有列表回到初始位置
4、有个页面有悬停吸顶栏,我们是用CoordinatorLayout+AppBarLayout+RecyclerView利用behavior实现的,怎么获取此页面滑动的距离、怎么让其跟随别的列表滑动及怎么归位

一、两个ViewPager的联动

viewpagerLink.gif

布局如下:

<RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_below="@+id/tabLayout"
      android:clipChildren="false"
      >
    <android.support.v4.view.ViewPager

        android:id="@+id/body_vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/header_vp"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:clipChildren="false"
        />
  </RelativeLayout>

既然要联动,两个ViewPager自然就要相互监听.

bodyVp.addOnPageChangeListener(new BaseLinkPageChangeListener(bodyVp, headerVp) {
      @Override public void onPageSelected(int position) {
        super.onPageSelected(position);
        pageScrollToTop();
      }
    });
    headerVp.addOnPageChangeListener(new BaseLinkPageChangeListener(headerVp, bodyVp) {
      @Override public void onPageSelected(int position) {
        super.onPageSelected(position);
        tabLayout.onPageSelected(position);
      }
    });

17_33_52__07_16_2018.jpg

在ViewPager滑动过程中,如上图所示,滑动完整一页时bodyVp滑动距离为屏幕宽度screenWidth,而headerVp滑动距离为headerVp自身宽度再加上右边那个白色的marging值(为headerWidth + margin),那么当bodyVp滑动距离为bodyX时,headVp滑动距离headerX就为bodyX / screenWidth * (headerWidth + margin);

然后调用headerVp.scrollTo(headerX, 0),headerVp就能跟随滑动了.

下面是封装的OnPagerChangeLIstener:

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);
    }
  }
}

ps

其实headerVp如果主要用来展示数据,没有复杂的触摸操作的话,可以吧bodyVp放在上层,只是将headerVp占用的那块空间用透明布局填充.这时无论是滑动headerVp,还是bodyVp其实都是在滑动bodyVp,这样只需让headerVp跟着bodyVp滑动就行了.

二、滑动任一列表时,headerVp和其他列表都跟着滑动

首先说一点,headerVp和另外的列表随着当前页面向上滑动时,如果headerVp不可见了,他们将不会再向上滑动.

followingSlidding.gif

1.计算当前list滑动距离

1. scrollView:
   scrollView有个onScrollChanged()方法,我是写了一个类继承NestedScrollView,
   然后重写onScrollChanged()方法,再把top暴露出去.

@Override protected void onScrollChanged(int l, int t, int oldl, int oldt) {
    super.onScrollChanged(l, t, oldl, oldt);
    if (this.onScrollChangedListener != null) {
      onScrollChangedListener.onScrollChanged(t, oldt);
    }
  }

top就是scrollView顶部的y坐标值.
在scrollView界面就可以监听到滑动的距离了

scrollView.setOnScrollChangedListener(new OnScrollChangedListener() {
      @Override public void onScrollChanged(int top, int oldTop) {
        if (isPageVisible()) {
          ((MainActivity) getActivity()).pageScrollTo(Math.min(top, maxScrollDisY()));
        }
      }
    });

2. recycleVIew
   直接用recyclerView.computeVerticalScrollOffset()就可以获取recycleView移动的距离了.

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
      @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        if (isPageVisible()) {
          if (layoutManager.findFirstVisibleItemPosition() == 0) {
            ((MainActivity) getActivity()).pageScrollTo(recyclerView.computeVerticalScrollOffset());
          } else {
            ((MainActivity) getActivity()).pageScrollTo(maxScrollDisY());
          }
        }
      }
    });

3. CoordinatorLayout+AppBarLayout+RecyclerView

这时通过监听appBarLayout来获取距离

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
      @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (isPageVisible()) {
          ((MainActivity) getActivity()).pageScrollTo(
              Math.min(Math.abs(verticalOffset), maxScrollDisY()));
        }
      }
    });

2. 跟随移动

1. headerVp直接调用headerVp.setTranslationY(-distance);
2. scrollView调用scrollView.scrollTo(0, disY);
3. recycleView用layoutManager.scrollToPositionWithOffset(0, -disY);
4. layoutManager.scrollToPositionWithOffset(0, -disY);
   coordinatorLayout.scrollTo(0, disY);

三、切换页面时所有列表回到初始位置

scrollView和recycleView比较简单,重点说下coordinateLayout的那种情况.

@Override public void pageScrollToTop() {
    layoutManager.scrollToPositionWithOffset(0, 0);
    appBarLayout.setExpanded(true);
    coordinatorLayout.scrollTo(0, 0);
  }

coordinateLayout和recycleView和appBarLayout必须都要调用对应的方法才能完成复位.尤其是appBarLayout很容易忽略.

总结

由于篇幅原因,还有很多细节没有展开讲,感兴趣的童鞋就麻烦看下源码吧...

https://github.com/Alphabet111/ViewPagerDemo