仿京东金融两个ViewPager联动效果
前言
产品让做一个仿京东金融的效果,在网上搜了搜,就找到一个通过重写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滑动距离
- 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()));
}
}
});
- 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());
}
}
}
});
- 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. 跟随移动
- headerVp直接调用headerVp.setTranslationY(-distance);
- scrollView调用scrollView.scrollTo(0, disY);
- recycleView用layoutManager.scrollToPositionWithOffset(0, -disY);
- 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很容易忽略.
总结
由于篇幅原因,还有很多细节没有展开讲,感兴趣的童鞋就麻烦看下源码吧...
