概述
本文主要分享使用NestedScrollView嵌套RecyclerView实现仿京东Tab吸顶效果，先来看一下效果图：
image
实现要点
- Tab控件如何吸顶
- 如何实现嵌套滚动，即父view可以滚动的情况下子view也可以滚动
- 如何实现惯性滑动
Tab控件吸顶
先看一下布局结构：
<com.fmt.conflictproject.view.NestedScrollLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.fmt.conflictproject.view.ConflictRecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewpager_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
</com.fmt.conflictproject.view.NestedScrollLayout>
布局中使用了LinearLayout包裹TabLayout与ViewPager2作为内容控件，那将LinearLayout的高度设置为NestedScrollView的高度即可实现TabLayout吸顶效果，本质上是NestedScrollView滑到底了，所以TabLayout自然就吸顶了，代码如下：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
ViewGroup.LayoutParams layoutParams = mContentView.getLayoutParams();
layoutParams.height = getMeasuredHeight();
mContentView.setLayoutParams(layoutParams);
}
如何实现嵌套滚动
嵌套滚动的两个角色：NestedScrollingParent3与NestedScrollingChild3，由NestedScrollingChild3触发嵌套滚动事件，这里采用NestedScrollView嵌套RecyclerView的实现方法，而NestedScrollView与RecyclerView分别实现了NestedScrollingParent3与NestedScrollingChild3
但需要注意，当使用NestedScrollView嵌套RecyclerView并将内容控件的高度设置为NestedScrollView的高度后，会出现一个奇怪的现象如下：
可以发现，在滑动RecyclerView时并没有先让NestedScrollView滚动到顶部后，然后RecyclerView在滑动，那是什么原因造成的呢？先来看一下嵌套滚动的大致流程图：
图片 1.png
从流程图可以发现，在NestedScrollingChild滚动前会调用dispatchNestedPreScroll方法询问NestedScrollingParent是否要先滚动，而NestedScrollingParent会调用自身的onNestedPreScroll方法处理事件，那追踪NestedScrollView的onNestedPreScroll方法：
@Override
public void onNestedPreScroll(@NonNull View target, int dx, int dy, @NonNull int[] consumed,
int type) {
dispatchNestedPreScroll(dx, dy, consumed, null, type);
}
@Override
public boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed, int[] offsetInWindow,
int type) {
return mChildHelper.dispatchNestedPreScroll(dx, dy, consumed, offsetInWindow, type);
}
//该方法属于NestedScrollingChildHelper
public boolean dispatchNestedPreScroll(int dx, int dy, @Nullable int[] consumed,
@Nullable int[] offsetInWindow, @NestedScrollType int type) {
if (isNestedScrollingEnabled()) {
final ViewParent parent = getNestedScrollingParentForType(type);
if (parent == null) {
return false;
}
if (dx != 0 || dy != 0) {
int startX = 0;
int startY = 0;
if (offsetInWindow != null) {
mView.getLocationInWindow(offsetInWindow);
startX = offsetInWindow[0];
startY = offsetInWindow[1];
}
if (consumed == null) {
consumed = getTempNestedScrollConsumed();
}
consumed[0] = 0;
consumed[1] = 0;
ViewParentCompat.onNestedPreScroll(parent, mView, dx, dy, consumed, type);
if (offsetInWindow != null) {
mView.getLocationInWindow(offsetInWindow);
offsetInWindow[0] -= startX;
offsetInWindow[1] -= startY;
}
return consumed[0] != 0 || consumed[1] != 0;
} else if (offsetInWindow != null) {
offsetInWindow[0] = 0;
offsetInWindow[1] = 0;
}
}
return false;
}
由源码可知，NestedScrollView的onNestedPreScroll方法并没有处理滑动事件，而是调用了dispatchNestedPreScroll方法将事件又传递给了NestedScrollingParent了，由于NestedScrollView本身即实现了NestedScrollingParent又实现了NestedScrollingChild，所以导致无法先滚动到顶部的现象，那只需重新onNestedPreScroll方法并实现滚动到顶部的逻辑即可解决此问题，代码如下：
@Override
public void onNestedPreScroll(@NonNull View target, int dx, int dy, @NonNull int[] consumed, int type) {
//super.onNestedPreScroll(target, dx, dy, consumed, type);
boolean hideTop = dy > 0 && getScrollY() < mHeadView.getMeasuredHeight();
if (hideTop) {
//滚动到相应的滑动距离
scrollBy(0, dy);
//记录父控件消费的滚动记录，防止子控件重复滚动
consumed[1] = dy;
}
}
如何实现惯性滑动
观察京东的滚动效果，可以发现，当快速滑动父控件松手后，会带动子控件惯性向上滑动，那如何实现这张效果呢？
实现思路：
- 记录父控件惯性滑动的速度
- 将惯性滑动的速度转化成距离
- 计算子控件应滑的距离 = 惯性距离 - 父控件已滑动距离
- 将子控件应滑的距离转化成速交给子控件进行惯性滑动
记录父控件惯性滑动的速度
@Override
public void fling(int velocityY) {
super.fling(velocityY);
if (velocityY <= 0) {
mVelocityY = 0;
} else {
mVelocityY = velocityY;
}
}
记录父控件惯性滑动的速度
double distance = mFlingHelper.getSplineFlingDistance(mVelocityY);
计算子控件应滑的距离 = 惯性距离 - 父控件已滑动距离
//设置滚动监听事件
setOnScrollChangeListener(new View.OnScrollChangeListener() {
@Override
public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
/*
* scrollY == 0 即还未滚动
* scrollY == getChildAt(0).getMeasuredHeight() - v.getMeasuredHeight()即滚动到顶部了
*/
//判断NestedScrollView是否滚动到顶部，若滚动到顶部，判断子控件是否需要继续滚动滚动
if (scrollY == getChildAt(0).getMeasuredHeight() - v.getMeasuredHeight()) {
dispatchChildFling();
}
//累计自身滚动的距离
mConsumedY += scrollY - oldScrollY;
}
});
将子控件应滑的距离转化成速交给子控件进行惯性滑动
private void dispatchChildFling() {
if (mVelocityY != 0) {
//将惯性滑动速度转化成距离
double distance = mFlingHelper.getSplineFlingDistance(mVelocityY);
//计算子控件应该滑动的距离 = 惯性滑动距离 - 已滑距离
if (distance > mConsumedY) {
RecyclerView recyclerView = getChildRecyclerView(mContentView);
if (recyclerView != null) {
//将剩余滑动距离转化成速度交给子控件进行惯性滑动
int velocityY = mFlingHelper.getVelocityByDistance(distance - mConsumedY);
recyclerView.fling(0, velocityY);
}
}
}
mConsumedY = 0;
mVelocityY = 0;
}
NestedScrollLayout核心类实现
public class NestedScrollLayout extends NestedScrollView {
ViewGroup mHeadView;//顶部控件
ViewGroup mContentView;//内容控件
int mVelocityY;//惯性滚动速度
FlingHelper mFlingHelper;//处理惯性滑动速度与距离的转化
int mConsumedY;//记录自身已经滚动的距离
public NestedScrollLayout(@NonNull Context context) {
this(context, null);
}
public NestedScrollLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public NestedScrollLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mFlingHelper = new FlingHelper(getContext());
//设置滚动监听事件
setOnScrollChangeListener(new View.OnScrollChangeListener() {
@Override
public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
/*
* scrollY == 0 即还未滚动
* scrollY == getChildAt(0).getMeasuredHeight() - v.getMeasuredHeight()即滚动到顶部了
*/
//判断NestedScrollView是否滚动到顶部，若滚动到顶部，判断子控件是否需要继续滚动滚动
if (scrollY == getChildAt(0).getMeasuredHeight() - v.getMeasuredHeight()) {
dispatchChildFling();
}
//累计自身滚动的距离
mConsumedY += scrollY - oldScrollY;
}
});
}
//将惯性滑动剩余的距离分发给子控件，继续惯性滑动
private void dispatchChildFling() {
if (mVelocityY != 0) {
//将惯性滑动速度转化成距离
double distance = mFlingHelper.getSplineFlingDistance(mVelocityY);
//计算子控件应该滑动的距离 = 惯性滑动距离 - 已滑距离
if (distance > mConsumedY) {
RecyclerView recyclerView = getChildRecyclerView(mContentView);
if (recyclerView != null) {
//将剩余滑动距离转化成速度交给子控件进行惯性滑动
int velocityY = mFlingHelper.getVelocityByDistance(distance - mConsumedY);
recyclerView.fling(0, velocityY);
}
}
}
mConsumedY = 0;
mVelocityY = 0;
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mHeadView = (ViewGroup) ((ViewGroup) getChildAt(0)).getChildAt(0);
mContentView = (ViewGroup) ((ViewGroup) getChildAt(0)).getChildAt(1);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//第一个要点：顶部悬浮效果
//解决方式：将内容布局的高度设置为NestedScrollView的高度，即滑到顶了，自然就固定在顶部了
ViewGroup.LayoutParams layoutParams = mContentView.getLayoutParams();
layoutParams.height = getMeasuredHeight();
mContentView.setLayoutParams(layoutParams);
}
/**
* 嵌套滑动的两个角色：NestedScrollingParent3和NestedScrollingChild3，是由NestedScrollingChild3触发嵌套滑动，由NestedScrollingParent3触发不算嵌套滑动
* 小结：子控件触发dispatchNestedPreScroll时会先调用支持嵌套滚动父控件的onNestedPreScroll让父控件先滚动，再执行
* 自身的dispatchNestedScroll进行滚动
*/
@Override
public void onNestedPreScroll(@NonNull View target, int dx, int dy, @NonNull int[] consumed, int type) {
//super.onNestedPreScroll(target, dx, dy, consumed, type);
/*
第二个要点：先让NestedScrollingParent3滑动到顶部后，NestedScrollingChild3才可以滑动
解决方法:由于NestedScrollView即实现了NestedScrollingParent3又实现了NestedScrollingChild3，
所以super.onNestedPreScroll(target, dx, dy, consumed, type)内部实现又会去调用父控件
的onNestedPreScroll方法，就会出现NestedScrollView无法滑动到顶部的想象，所以此处
注释掉super.onNestedPreScroll(target, dx, dy, consumed, type)，实现滑动逻辑
*/
//向上滚动并且滚动的距离小于头部控件的高度，则此时父控件先滚动并记录消费的滚动距离
boolean hideTop = dy > 0 && getScrollY() < mHeadView.getMeasuredHeight();
if (hideTop) {
//滚动到相应的滑动距离
scrollBy(0, dy);
//记录父控件消费的滚动记录，防止子控件重复滚动
consumed[1] = dy;
}
}
/**
* 要点三：惯性滑动，父控件在滑动完成后，在通知子控件滑动,此时不是嵌套滚动
* 解决方法:1.记录惯性滑动的速度
* 2.将速度转化成距离
* 3.计算子控件应该滑动的距离 = 惯性滑动距离 - 已滑距离
* 4.将剩余滑动距离转化成速度交给子控件进行惯性滑动
*/
@Override
public void fling(int velocityY) {
super.fling(velocityY);
//3.1记录惯性滚动的速度
if (velocityY <= 0) {
mVelocityY = 0;
} else {
mVelocityY = velocityY;
}
}
//递归获取子控件RecyclerView
private RecyclerView getChildRecyclerView(ViewGroup viewGroup) {
for (int i = 0; i < viewGroup.getChildCount(); i++) {
View view = viewGroup.getChildAt(i);
if (view instanceof RecyclerView && Objects.requireNonNull(((RecyclerView) view).getLayoutManager()).canScrollVertically()) {
return (RecyclerView) view;
} else if (viewGroup.getChildAt(i) instanceof ViewGroup) {
RecyclerView childRecyclerView = getChildRecyclerView((ViewGroup) viewGroup.getChildAt(i));
if (childRecyclerView != null && Objects.requireNonNull((childRecyclerView).getLayoutManager()).canScrollVertically()) {
return childRecyclerView;
}
}
}
return null;
}
}
完整代码实现
百度链接
密码:r6mi
