引言:使用RecycleView实现Item滑动的自动反弹,有点类似于ViewPager那样的滑动体验。
时间:2017年03月16日21:26:41
作者:JustDo23
01. 前言
事件分发一直是面试中的常客,只是知道简单的原理却不会实战总是不行的,这方面还是需要继续的学习积累与总结。遇到这样的需求,在一个列表进行滑动之后,需要将顶部
第一个显示完整或者显示不全
的Item自动的慢慢滚动出屏幕
或滚动以完整显示并定位成第一个
,这种体验和 ViewPager
以及Gallery
很像,有大牛使用ListView
自定义ReboundListView
实现了极好的效果。接下来记录使用RecycleView的实现方式。效果自由体验,仅供参考。
02. 效果图
没有完整代码也没有录制 GIF 图,在网上找个类似效果先体验一下。来源https://github.com/luckyandyzhang/CleverRecyclerView/blob/master/art/s3.gif
02. 滑动监听
对于RecyclerView
的滑动监听在其内部有一个监听类OnScrollListener
,点击查看源码可以看到这是一个抽象类,内部有两个方法onScrollStateChanged
和onScrolled
都是空实现的。自定义一个类继承该类并实现方法。
/**
* RecyclerView 的滑动监听
*
* @author JustDo23
*/
public class OnRecyclerViewScrollListener extends RecyclerView.OnScrollListener {
/**
* 滑动中回调
*
* @param recyclerView 控件对象
* @param dx [距离][X轴]
* @param dy [距离][Y轴][正数代表向下][负数代表向上]
*/
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
LogUtil.e("onScrolled : " + "dx = " + dx + "dy = " + dy);
}
/**
* 滑动状态发生改变的时候回调
*
* @param recyclerView 控件对象
* @param newState [状态值][每次滑动时候三个状态都会回调一次][手指拖动(惯性滑动)静止]
*/
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
LogUtil.e("onScrolled : " + "newState = " + newState);
switch (newState) {
case RecyclerView.SCROLL_STATE_IDLE:// 静止
LogUtil.e("静止静止");
break;
case RecyclerView.SCROLL_STATE_DRAGGING:// 手指拖动
LogUtil.e("手指拖动");
break;
case RecyclerView.SCROLL_STATE_SETTLING:// 惯性滑动
LogUtil.e("惯性滑动");
break;
}
}
}
状态改变的回调有三个状态值,见名知意,很好理解不用过多解释。
03. 添加滑动监听
在对 RecycleView 初始化完之后调用如下代码添加监听
recycle_view.addOnScrollListener(new OnRecyclerViewScrollListener());
另外,添加监听有一个set
的方法,已经过时。添加监听之后运行程序,查看Logcat
观察打印并总结规律:
- 只要正在滑动就会回调
onScrolled
方法
- 手指一碰触就会返回状态
SCROLL_STATE_DRAGGING
(手机拖动) - 最后停止的时候回返回状态
SCROLL_STATE_IDLE
(静止) - 基本上操作一次滑动的状态顺序是:**从 **
SCROLL_STATE_DRAGGING
(手机拖动) 到SCROLL_STATE_SETTLING
(惯性滑动) 到SCROLL_STATE_IDLE
(静止)
04. 思路原型
根据总结的规律,状态SCROLL_STATE_DRAGGING
和SCROLL_STATE_SETTLING
是开始滑动和滑动中的回调,每次滑动结束都是以状态SCROLL_STATE_IDLE
(静止)结束的,那就在静止的是判断一下当前第一个Item
的显示情况,如果其大半都显示少部分未显示就调用smoothScrollToPosition
方法将其全部显示,否则就慢慢滑动到它的下一个位置。
关于状态SCROLL_STATE_SETTLING
(惯性滑动)的返回,不使用手指拖动,直接调用scroll
之类的方法让RecycleView滑动到指定位置,返回的状态顺序是:**从 **SCROLL_STATE_SETTLING
(惯性滑动) 到 SCROLL_STATE_IDLE
(静止) 。
这样就会有一次完整的状态顺序是:**从 **SCROLL_STATE_DRAGGING
(手机拖动) 到 SCROLL_STATE_SETTLING
(惯性滑动) 到 SCROLL_STATE_IDLE
(静止) 到SCROLL_STATE_SETTLING
(惯性滑动) 到 SCROLL_STATE_IDLE
(静止) 。
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
switch (newState) {
case RecyclerView.SCROLL_STATE_IDLE:// 静止
RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
if (layoutManager instanceof LinearLayoutManager) {// 只有LinearLayoutManager才有查找第一个和最后一个可见view位置的方法
LinearLayoutManager linearLayoutManager = (LinearLayoutManager) layoutManager;
int firstItemPosition = linearLayoutManager.findFirstVisibleItemPosition();// 获取第一个可见view的位置
View childView = linearLayoutManager.findViewByPosition(firstItemPosition);// 获取显示的第一个 View
int childViewHeight = childView.getHeight();
int childViewTop = childView.getTop();
if (Math.abs(childViewTop) == recyclerView.getPaddingTop() || Math.abs(childViewTop) == recyclerView.getPaddingTop() * 2) {// 反弹结束
} else if (Math.abs(childViewTop) >= childViewHeight / 2.0f) {// 定位下一个
int nextPosition = firstItemPosition + 1;
recyclerView.smoothScrollToPosition(nextPosition);
} else {// 定位当前
recyclerView.smoothScrollToPosition(firstItemPosition);
}
}
break;
case RecyclerView.SCROLL_STATE_DRAGGING:// 手指拖动
break;
case RecyclerView.SCROLL_STATE_SETTLING:// 惯性滑动
break;
}
}
- 获取RecycleView第一个显示的位置等有参考网上的文章。RecycleViewScrollHelper--RecyclerView滑动事件检测的辅助类以及总结和分析几种判断RecyclerView到达底部的方法
- 除以2是获取到一个childView后以其高度的一般作为分界线。
- 函数求绝对值是因为childView的Top值有正负两种,负数代表未显示。
- 在使用RecycleView的时候设置了padding值和分割线的高度,两者相同大小。
05. smoothScrollToPosition方法无效
满心欢喜,本以为功能都要实现了,运行后发现,向上滑动是可以的,基本达到理想效果。向下滑动却不会进行自动滑动到指定的位置,和没有写代码是一样的。各种打印之后发现代码是没有问题的,定位也是没有问题的,就是滑动的smoothScrollToPosition
方法失效了。参考文章 Android RecyclerView滚动定位并写出如下代码:
/**
* 缓慢移动到指定的位置
*
* @param position
*/
private void smoothMoveToPosition(RecyclerView recyclerView, int position) {
RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
if (layoutManager instanceof LinearLayoutManager) {// 只有LinearLayoutManager才有查找第一个和最后一个可见view位置的方法
LinearLayoutManager linearLayoutManager = (LinearLayoutManager) layoutManager;
int firstItem = linearLayoutManager.findFirstVisibleItemPosition();// 先从RecyclerView的LayoutManager中获取第一项和最后一项的Position
int lastItem = linearLayoutManager.findLastVisibleItemPosition();
if (position <= firstItem) {// 当要置顶的项在当前显示的第一个项的前面时
recyclerView.smoothScrollToPosition(position);
} else if (position <= lastItem) {// 当要置顶的项已经在屏幕上显示时
int top = recyclerView.getChildAt(position - firstItem).getTop();
recyclerView.smoothScrollBy(0, top);
} else {// 当要置顶的项在当前显示的最后一项的后面时
recyclerView.smoothScrollToPosition(position);
}
}
}
这个方法中有用的就两行。调用smoothScrollBy
方法,将定位下一个的代码进行替换就没有问题。其实还有就是最后一个Item的显示,你可能会发现最后一个Item怎么也滑不上来,当然可以修改一下逻辑来解决。项目中有添加footer
的需求,就给避免了这样的问题。
06. 接口回调
但滑动中和反弹之后需要有回调获取状态,然后进行相应的业务处理。
/**
* 反弹监听
*
* @author JustDo23
*/
public interface OnReboundListener {
/**
* 正在滑动回调
*/
void onRebounding();
/**
* 反弹结束回调
*
* @param position 静止的位置
*/
void onReboundFinish(int position);
}
在OnRecyclerViewScrollListener
相应的位置去进行接口的回调。
07. 完整代码
/**
* RecyclerView 的滑动监听
*
* @author JustDo23
*/
public class OnRecyclerViewScrollListener extends RecyclerView.OnScrollListener {
private OnReboundListener onReboundListener;
public OnRecyclerViewScrollListener(OnReboundListener onReboundListener) {
this.onReboundListener = onReboundListener;
}
/**
* 滑动中回调
*
* @param recyclerView 控件对象
* @param dx [距离][X轴]
* @param dy [距离][Y轴][正数代表向下][负数代表向上]
*/
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
LogUtil.e("onScrolled : " + "dx = " + dx + "dy = " + dy);
}
/**
* 滑动状态发生改变的时候回调
*
* @param recyclerView 控件对象
* @param newState [状态值][每次滑动时候三个状态都会回调一次][手指拖动(惯性滑动)静止]
*/
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
LogUtil.e("onScrolled : " + "newState = " + newState);
switch (newState) {
case RecyclerView.SCROLL_STATE_IDLE:// 静止
LogUtil.e("静止");
RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
if (layoutManager instanceof LinearLayoutManager) {// 只有LinearLayoutManager才有查找第一个和最后一个可见view位置的方法
LinearLayoutManager linearLayoutManager = (LinearLayoutManager) layoutManager;
int totalItemCount = layoutManager.getItemCount();// 当前RecyclerView的所有子项个数
int firstItemPosition = linearLayoutManager.findFirstVisibleItemPosition();// 获取第一个可见view的位置
int lastItemPosition = linearLayoutManager.findLastVisibleItemPosition();// 获取最后一个可见view的位置
View childView = linearLayoutManager.findViewByPosition(firstItemPosition);// 获取显示的第一个 View
int childViewHeight = childView.getHeight();
int childViewTop = childView.getTop();
if (Math.abs(childViewTop) == recyclerView.getPaddingTop() || Math.abs(childViewTop) == recyclerView.getPaddingTop() * 2) {
if (onReboundListener != null) {// 反弹结束
onReboundListener.onReboundFinish(firstItemPosition);
}
} else if (Math.abs(childViewTop) >= childViewHeight / 2.0f) {// 定位下一个
int nextPosition = firstItemPosition + 1;
smoothMoveToPosition(recyclerView, nextPosition);
} else {// 定位当前
recyclerView.smoothScrollToPosition(firstItemPosition);
}
LogUtil.e("childViewHeight = " + childViewHeight);
LogUtil.e("totalItemCount = " + totalItemCount);
LogUtil.e("firstItemPosition = " + firstItemPosition);
LogUtil.e("lastItemPosition = " + lastItemPosition);
LogUtil.e("childViewGetTop = " + childView.getTop());
LogUtil.e("childViewGetY = " + childView.getY());
LogUtil.e("childViewGetPaddingTop = " + childView.getPaddingTop());
LogUtil.e("PaddingTop = " + SizeUtil.dip2px(recyclerView.getContext(), 10.0f));
LogUtil.e("Padding = " + recyclerView.getPaddingTop());
}
break;
case RecyclerView.SCROLL_STATE_DRAGGING:// 手指拖动
LogUtil.e("手指拖动");
if (onReboundListener != null) {
onReboundListener.onRebounding();
}
break;
case RecyclerView.SCROLL_STATE_SETTLING:// 惯性滑动
LogUtil.e("惯性滑动");
break;
}
}
/**
* 缓慢移动到指定的位置
*
* @param position
*/
private void smoothMoveToPosition(RecyclerView recyclerView, int position) {
RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
if (layoutManager instanceof LinearLayoutManager) {// 只有LinearLayoutManager才有查找第一个和最后一个可见view位置的方法
LinearLayoutManager linearLayoutManager = (LinearLayoutManager) layoutManager;
int firstItem = linearLayoutManager.findFirstVisibleItemPosition();// 先从RecyclerView的LayoutManager中获取第一项和最后一项的Position
int lastItem = linearLayoutManager.findLastVisibleItemPosition();
if (position <= firstItem) {// 当要置顶的项在当前显示的第一个项的前面时
recyclerView.smoothScrollToPosition(position);
} else if (position <= lastItem) {// 当要置顶的项已经在屏幕上显示时
int top = recyclerView.getChildAt(position - firstItem).getTop();
recyclerView.smoothScrollBy(0, top);
} else {// 当要置顶的项在当前显示的最后一项的后面时
recyclerView.smoothScrollToPosition(position);
}
}
}
}
08. 遗留问题
- 使用 RecycleView 如何获取 Item 分割线的高度
- 如何禁止 RecycleView 的快速滑动
09. 别人家的代码
在网络上搜索了关键字RecyclerView ViewPager
之后再 GitHub 上找到RecyclerViewPager和CleverRecyclerView两个库。因为在CleverRecyclerView中看到类似的想要的效果,就下载下来写了个Demo看了看效果。然后对源码进行了简单研究,主要也是针对滑动事件的。
@Override
public void onScrollStateChanged(int state) {
super.onScrollStateChanged(state);
switch (state) {
case SCROLL_STATE_DRAGGING:
mCurrentChildView = mCleverRecyclerViewHelper.getCurrentFirstVisibleChild();// 获取第一个显示的View
mCurrentPosition = getChildAdapterPosition(mCurrentChildView);// 获取这个View在Adapter中的位置
if (mCurrentChildView != null) {// 如果这个View不是空的,从RecycleView中获取这个View的top值
mPositionBeforeDragging = mCleverRecyclerViewHelper.getChildCurrentPosition(mCurrentChildView);
}
mNeedAdjustAfterScrollStopped = true;// 滑动之后需要进行位置调整
break;
case SCROLL_STATE_SETTLING:
mNeedAdjustAfterScrollStopped = false;
break;
case SCROLL_STATE_IDLE:
if (mNeedAdjustAfterScrollStopped) {// 没有触发fling时,需要再次处理子View的位置偏移
if (mCurrentChildView != null) {
float draggingDistance = mCleverRecyclerViewHelper.getChildCurrentPosition(mCurrentChildView) - mPositionBeforeDragging;// 当前的top - 滑动之前的top
if (mCleverRecyclerViewHelper.isRightScrollTriggered(draggingDistance) || mCleverRecyclerViewHelper.isDownScrollTriggered(draggingDistance)) {
mCurrentPosition--;// 判断方向是向下滑动,则原来的位置减减
} else if (mCleverRecyclerViewHelper.isLeftScrollTriggered(draggingDistance) || mCleverRecyclerViewHelper.isUpScrollTriggered(draggingDistance)) {
mCurrentPosition++;// 判断方向是向上滑动,则原来的位置加加
}
int safeTargetPosition = mCleverRecyclerViewHelper.getTargetPositionSafely(mCurrentPosition, getAdapter().getItemCount());// 新位置和总数比较获取安全位置
smoothScrollToPosition(safeTargetPosition);
}
}
break;
}
}
注释是后来打上去的,是对源码的简单理解。自定义CleverRecyclerView
继承RecyclerView
后重写了fling
方法smoothScrollToPosition
方法onScrollStateChanged
方法等。
- 手指拖拽滑动,当手指触碰的时候获取一下当前显示的位置,手指松开回调静止状态,计算手指拖拽的距离,并根据距离判断方向,向上滑动则原来的位置加加,向下滑动则原来的位置减减。
- 手指滑动产生惯性滑动会先回调
SCROLL_STATE_SETTLING
状态,当静止时候是需要进行位置调整的,很奇怪每次都能滑动到指定位置,回头看fling
方法有相应的位置调整。
另外在阅读代码的时候发现有一个专门的Helper
类需要一个RecyclerView
类的对象去支持,辅助类类似工具类,设计模式什么的懂的不多,感觉这 Helper
类像一个工具类将很多需要计算或判断的代码从自定义类中抽取出来,很有味道。
10. 拓展文章
- 使用 RecyclerView 实现 Gallery 画廊效果,并控制 Item 停留位置
- 教你如何用 RecyclerView 做一个好用的轮播图