RecyclerView内嵌ViewPager无限滑动Banner的爬坑之旅

前言收到线上用户反馈,RecyclerView 实现的 Feed 流列表中的 Banner Item 在滑动过程中偶现没有进行内容切换,而是进行了外层频道切换。嵌套的UI布局如下图所示: 问题原因定位猜测原因是:最外层OuterViewPager拦截了Touch事件,没有将Touch事件传递给内层的BannerViewPager,从而导致外层频道切换。 想证实猜测的准确性,定位为什么OuterViewPager拦截了事件,只能通过阅读ViewPager的事件拦截源码进行分析,这是最快也是最靠谱的证实方案。 ViewPager事件拦截原理从onInterceptTouchEvent源码分析一下ViewPager对Touch事件的拦截机制,相关源码已经添加中文注解: @Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) { final int action = ev.getAction() & MotionEvent.ACTION_MASK; if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) { // cancel和up事件代表触摸事件结束,需要重置触摸变量 resetTouch(); return false; } if (action != MotionEvent.ACTION_DOWN) { if (mIsBeingDragged) { // 如果ViewPager已经响应拖拽事件,则直接拦截后续事件 return true; } if (mIsUnableToDrag) { // 如果ViewPager不能响应拖拽事件,则不拦截后续事件 return false; } } switch (action) { case MotionEvent.ACTION_MOVE: { // 多指触摸处理,值得学习阅读 final int activePointerId = mActivePointerId; if (activePointerId == INVALID_POINTER) { break; } final int pointerIndex = ev.findPointerIndex(activePointerId); final float x = ev.getX(pointerIndex); final float dx = x - mLastMotionX; final float xDiff = Math.abs(dx); final float y = ev.getY(pointerIndex); final float yDiff = Math.abs(y - mInitialMotionY); // 这里是关键,判断OuterViewPager是否需要将touch事件传递给内层BannerViewPager if (dx != 0 && !isGutterDrag(mLastMotionX, dx) && canScroll(this, false, (int) dx, (int) x, (int) y)) { // 如果内层Child可以滑动,则OuterViewPager不拦截事件,将事件向下传递 mLastMotionX = x; mLastMotionY = y; mIsUnableToDrag = true; return false; } // OuterViewPager开始接管Touch事件处理. // X轴横向偏移量大于最小滑动距离,并且滑动角度小于45度 if (xDiff > mTouchSlop && xDiff * 0.5f > yDiff) { // 设置拦截拖拽标记位 mIsBeingDragged = true; // 通知父View不要拦截事件 requestParentDisallowInterceptTouchEvent(true); // 设置滑动状态为开始拖拽 setScrollState(SCROLL_STATE_DRAGGING); // 设置滑动开始的坐标 mLastMotionX = dx > 0 ? mInitialMotionX + mTouchSlop : mInitialMotionX - mTouchSlop; mLastMotionY = y; setScrollingCacheEnabled(true); } else if (yDiff > mTouchSlop) { // 竖向滑动不拦截后续TOUCH事件 mIsUnableToDrag = true; } if (mIsBeingDragged) { // 执行滑动 if (performDrag(x)) { ViewCompat.postInvalidateOnAnimation(this); } } break; } case MotionEvent.ACTION_DOWN: { // 多指处理的逻辑,值得学习,标准写法 mLastMotionX = mInitialMotionX = ev.getX(); mLastMotionY = mInitialMotionY = ev.getY(); mActivePointerId = ev.getPointerId(0); mIsUnableToDrag = false; mIsScrollStarted = true; mScroller.computeScrollOffset(); if (mScrollState == SCROLL_STATE_SETTLING && Math.abs(mScroller.getFinalX() - mScroller.getCurrX()) > mCloseEnough) { // down事件到来,需要终止上次的滑动 mScroller.abortAnimation(); mPopulatePending = false; populate(); // 因为上次滑动没有终止,因此需要拦截后续TOUCH事件,开始新的滑动 mIsBeingDragged = true; requestParentDisallowInterceptTouchEvent(true); setScrollState(SCROLL_STATE_DRAGGING); } else { completeScroll(false); mIsBeingDragged = false; } break; } case MotionEvent.ACTION_POINTER_UP: onSecondaryPointerUp(ev); break; } // 速度追踪 if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain(); } mVelocityTracker.addMovement(ev); return mIsBeingDragged;}通过onInterceptTouchEvent源码分析,可以看出: ...

July 7, 2019 · 4 min · jiezi

百行以内超轻量级的多类型列表视图框架

名字有点唬人,其实就是组合了几个封装类能够方便实现RecyclerView的多视图,毕竟“框架”这个词在我看来还是指具有一定规模量级及重点技术的代码体系,但仅就解决特定问题而言也不妨被冠以这个名号。同时它真的是“超轻量”总共不过4个类,不超过130行代码~ 视图抽象我们已经有了一个无需类型强转的通用ViewHolder(ItemViewHolder),一个ViewHolder对象可以找到所有视图实例。而且它是完全独立的, 没有引入任何自定义类或者任何第三方依赖;即使没有这个“框架”,也完全可以拆出来用在其他地方。 控件适配器适配器(Adapter)是与控件关联的, 是控件对其子视图列表的一种抽象。抽象了什么?由具体定义决定。比如列表控件的适配器(无论是以前的ListView, 现在RecyclerView, 以及其它的如ViewPager)一般抽象了三个属性: 数量 getItemCount()操作 onBindView(ViewHolder holder, int position),onCreateView类型 getViewType(int position)控件适配是SDK关联的,框架的ItemAdapter也是基于RecyclerView.Adapter 元素抽象适配器(Adapter) 是容器控件对子控件的整体抽象,相应位置的元素没有作出任何限制,position对应的元素可以是接口返回的一个具体数据,也可以是从本地获取的应用数据。框架要做的一个工作就是对元素数据类型进行抽象, 但是数据类型千差万别,无法对数据元素本身的属性做统一操作,结果就是变成像MultiType库那样,用范型抽象所有的数据元素,然后通过注册数据类型(.class)到数据绑定器类型(ItemViewBinder.class)的映射,反射得到绑定器实例,其中有大量的对象类型强转。 框架不对数据元素做抽象,而是针对操作作抽象,即adapter对每个position元素的操作作抽象;用一个简单的List数据结构持有抽象实例;因为同样有绑定操作,所以姑且也叫做绑定器ItemBinder。ViewHolder就用我们之前的通用ViewHolder(ItemViewHolder),结合前面说到adapter有三个重要属性,于是有: public interface ItemBinder { void onBindViewHolder(ItemViewHolder holder, int position); int getViewType();}public class ItemAdapter extends RecyclerView.Adapter<ItemViewHolder> { private final List<ItemBinder> mBinders = new ArrayList<>(10); @Override public void onBindViewHolder(@NonNull ItemViewHolder holder, int position) { ItemBinder binder = mBinders.get(position); binder.onBindViewHolder(holder, position); } @Override public int getItemCount() { return mBinders.size(); } @Override public int getItemViewType(int position) { return mBinders.get(position).getViewType(); } public void setBinders(List<ItemBinder> binders) { mBinders.clear(); mBinders.addAll(binders); }}对于Adapter而言,元素仅仅是ItemBinder,它不关心ItemBinder是用哪种数据类型,又是怎样把数据填充到ViewHolder中。 ...

July 6, 2019 · 4 min · jiezi

我是如何做到-GitHub-star-在-5-天内从-0-飙至-666-的

前言很高兴和大家见面! 上周五我在掘金发表了 《真香警告:即使不用饿了么订餐,也请务必收藏好该库!》,文中主角 Linkage-RecyclerView 原本只是为 《RxJava魔法师》 这个项目的需求而存在的,没想到在各路读者的积极参与下,让一个本来默默无闻的项目,在内容发布的第三天,登陆 GitHub 今日趋势 Java 专区榜单前三,并在 5 天内做到 GitHub star 从 0 飙至 666。(不要慌,项目链接文末已给出) 在此我首先特别感谢热心读者的见证和参与。掘金社区、WanAndroid 读者对源码的认真阅读和交流,让我备受感动。 开源这个项目的初衷每个架构都有专属的用武之地开源这个项目的初衷有两个,一个是方便读者借助该项目深入理解,当我们为项目选择架构时,选材的依据是什么。 就我当前的认知来看,项目开发,无非就是顾及 “配置解耦” 和 “职责分离” 这两件事。 对于通用必用的控件库和组件库,我们可以将其抽取成模块,做成可供多个项目依赖的第三方库。 第三方库的目标是让使用者无需了解内部逻辑、通过外部简单的配置即可轻松上手,因而第三方库适合使用 MVP 架构,来实现 “配置解耦”。 对于多人参与的主干工程,我们需要确保 UI 和 业务之间可以分工给不同的人协作,这就要求架构必须具备 “关注点分离(SoC)” 或 “职责分离(SoD)” 的特性。 因而我们可以在主干工程中采用目前主流的关注点分离架构 JetPack MVVM,或者由我自主设计并在公司项目重构中采用的职责分离的 VIABUS Architecture。 未雨绸缪方能在关键时刻拯救自己开源这个项目的另一个缘由是: 有些事我都已忘记,但我现在还记得,在一个晚上,同事阿左问我,今天怎么不开心。...我说在我的想象中,有一个开源库,与众不同最时尚,接入肯定棒,整个 GitHub 找遍所有的 Repo,都没有。他说将来会找到的,时间,时间,会给我答案。。哈哈,开玩笑的。缘于,公司某个项目中的另一个需求:为多级联动表单动态绑定数据。 用过 Spinner 的读者都知道,原生的 Spinner 在 onSelectItem 回调中存在延迟的 bug,虽然延迟只有 100ms,但对于哼哧哼哧地装载、绑定、协调表单数据的多级联动表单来说,实在是致命的错误。 因而在那天晚上加班改需求的时候,我非常盼望着找到一款当下就可以使用的 PopupWindow + RecyclerView 实现的第三方 Spinner 开源库。 ...

May 19, 2019 · 1 min · jiezi

ItemTouchHelper 实现可拖拽和侧滑的 RecyclerView

前言话不多说,直接上图:这里是项目的【GitHub地址】 。笔者使用 RecyclerView 的 ItemTouchHelper 来实现这个效果,过程非常简单。实现功能:按住 item 左侧的按钮可以上下拖动 item向右侧滑删除 itemitem 拖动或侧滑时有阴影效果实现基本功能循序渐进学习,这里我们先实现基本的功能:长按 item 实现上下拖拽向右侧滑删除布局文件很简单,不多说,直接上代码:activity_main.xml<?xml version=“1.0” encoding=“utf-8”?><LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android" android:layout_width=“match_parent” android:layout_height=“match_parent”> <android.support.v7.widget.RecyclerView android:layout_width=“match_parent” android:layout_height=“match_parent” android:id=”@+id/main_recyclerView" android:scrollbars=“none” android:background="#F2F8FC"> </android.support.v7.widget.RecyclerView></LinearLayout>item_list.xml<?xml version=“1.0” encoding=“utf-8”?><android.support.constraint.ConstraintLayout xmlns:android=“http://schemas.android.com/apk/res/android" xmlns:app=“http://schemas.android.com/apk/res-auto" android:layout_width=“match_parent” android:layout_height=“60dp” android:background="#ffffff”> <ImageView android:id=”@+id/item_list_menu_imageView" android:layout_width=“30dp” android:layout_height=“25dp” android:layout_marginBottom=“8dp” android:layout_marginStart=“15dp” android:layout_marginTop=“8dp” android:src="@drawable/imageview_menu" app:layout_constraintBottom_toBottomOf=“parent” app:layout_constraintStart_toStartOf=“parent” app:layout_constraintTop_toTopOf=“parent” /> <TextView android:id="@+id/item_list_text_textView" android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:layout_marginBottom=“8dp” android:layout_marginStart=“15dp” android:layout_marginTop=“8dp” android:textColor="#000000" android:textSize=“18sp” app:layout_constraintBottom_toBottomOf=“parent” app:layout_constraintStart_toEndOf="@+id/item_list_menu_imageView" app:layout_constraintTop_toTopOf=“parent”/> <android.support.v7.widget.SwitchCompat android:id="@+id/item_list_switchCompat" android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:layout_marginBottom=“8dp” android:layout_marginEnd=“15dp” android:layout_marginTop=“8dp” app:layout_constraintBottom_toBottomOf=“parent” app:layout_constraintEnd_toEndOf=“parent” app:layout_constraintTop_toTopOf=“parent” /> </android.support.constraint.ConstraintLayout>ItemTouchHelper官方的API解释:This is a utility class to add swipe to dismiss and drag & drop support to RecyclerView.这是一个给 RecyclerView 添加侧滑删除和拖拽的工具类。有了它,我们就可以很方便的实现上面的效果。从构造器: ItemTouchHelper(ItemTouchHelper.Callback callback) 可以看出,我们需要一个 ItemTouchHelper.Callback 去构造 ItemTouchHelper 。ItemTouchHelper.Callback 官方提供了一个实现类 ItemTouchHelper.SimpleCallback() ,它的使用很简单,但为了得到更高的定制性,这里我们不使用它,有兴趣的朋友可以去尝试一下。新建一个 MyItemTouchHelperCallback 类继承 ItemTouchHelper.Callback ,这里我们关注它其中的三个方法:getMovementFlags() 定义 item 的可以拖拽和滑动的方向。onMove() 当 item 想要上下拖拽时会调用此方法。onSwiped 当 item 想要左右侧滑时会调用此方法。在写 MyItemTouchHelperCallback 之前我们先创建一个 IItemTouchHelperAdapter 接口,让 RecyclerViewAdapter 实现这个接口。用于 RecyclerViewAdapter 回调。public interface IItemTouchHelperAdapter { /** * 当item被移动时调用 * * @param fromPosition 被操作的item的起点 * @param toPosition 被操作的item的终点 / void onItemMove(int fromPosition, int toPosition); /* * 当item被侧滑时调用 * * @param position 被侧滑的item的position / void onItemDismiss(int position);}在 RecyclerViewAdapter 中实现刚刚继承的两个方法: @Override public void onItemMove(int fromPosition, int toPosition) { Collections.swap(mList, fromPosition, toPosition); notifyItemMoved(fromPosition, toPosition); } @Override public void onItemDismiss(int position) { mList.remove(position); notifyItemRemoved(position); }之后我们就可以开始编写 MyItemTouchHelperCallback ,注释很清楚,就不多说了。public class MyItemTouchHelperCallback extends ItemTouchHelper.Callback { private IItemTouchHelperAdapter mAdapter; public MyItemTouchHelperCallback(IItemTouchHelperAdapter mAdapter) { this.mAdapter = mAdapter; } @Override public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { //上下拖拽,若有其他需求同理 int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN; //向右侧滑,若有其他需求同理 int swipeFlags = ItemTouchHelper.RIGHT; return makeMovementFlags(dragFlags, swipeFlags); } @Override public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { //通知Adapter更新数据和视图 mAdapter.onItemMove(viewHolder.getAdapterPosition(), target.getAdapterPosition()); //若返回false则表示不支持上下拖拽 return true; } @Override public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { //通知Adapter更新数据和视图 mAdapter.onItemDismiss(viewHolder.getAdapterPosition()); } @Override public boolean isItemViewSwipeEnabled() { //是否可以左右侧滑,默认返回true return true; } @Override public boolean isLongPressDragEnabled() { //是否可以长按上下拖拽,默认返回false return true; }}最后,在 Acivity 中将 ItemTouchHelper 和 RecyclerView 关联起来 mItemTouchHelper = new ItemTouchHelper(new MyItemTouchHelperCallback(adapter)); mItemTouchHelper.attachToRecyclerView(recyclerView);运行效果:完善我们实现的的基本效果与文章开头给出的效果还是有一点差距的,还需要实现的效果:通过按住 item 左边按钮才能上下拖拽。侧滑或拖拽时被操作的 item Z轴高度增加,有明显的阴影。通过按住 item 左边按钮才能上下拖拽首先修改 MyItemTouchHelperCallback 的 isLongPressDragEnabled() @Override public boolean isLongPressDragEnabled() { //禁止长按item可以上下拖拽,因为我们要自定义开启拖拽的时机 return false; }其次新建一个OnStartDragListener接口,用于回调public interface OnStartDragListener { /* * 当View需要拖拽时回调 * * @param viewHolder The holder of view to drag / void onStartDrag(RecyclerView.ViewHolder viewHolder);}让 Activity 继承这个类,实现 onStartDrag() 方法@Override public void onStartDrag(RecyclerView.ViewHolder viewHolder) { //通知ItemTouchHelper开始拖拽 mItemTouchHelper.startDrag(viewHolder); }在 RecyclerViewAdapter 的构造方法中传入 OnStartDragListener 的实例(即实现了该接口的Activity),给 item 左侧的按钮添加事件监听public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ItemViewHolder> implements IItemTouchHelperAdapter { //构造方法 public RecyclerViewAdapter(List<ItemEntity> list, OnStartDragListener mDragListener) { mList = list; this.mDragListener = mDragListener; } … @Override public void onBindViewHolder(final IItemViewHolder holder, @SuppressLint(“RecyclerView”) final int position) { … holder.menu.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View view, MotionEvent motionEvent) { if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) { //通知ItemTouchHelper开始拖拽 mDragListener.onStartDrag(holder); } return false; } }); } …}侧滑或拖拽时被操作的 item Z轴高度增加,有明显的阴影要实现这个效果,笔者使用 ItemTouchHelper.Callback 提供的两个回调方法:onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) :当 ViewHolder (即 item )滑动或拖动时被调用。clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) :当 ViewHolder 滑动和拖拽结束时被调用首先新建一个 IItemTouchHelperViewHolder 接口用于回调,让 RecyclerViewAdapter 的 ViewHolder 继承它。public interface IItemTouchHelperViewHolder { /* * item被选中,在侧滑或拖拽过程中更新状态 / void onItemSelected(); /* * item的拖拽或侧滑结束,恢复默认的状态 */ void onItemClear();}然后让ViewHolder重写上述的两个方法: class ItemViewHolder extends RecyclerView.ViewHolder implements IItemTouchHelperViewHolder { private TextView text; private ImageView menu; private SwitchCompat switchCompat; ItemViewHolder(View itemView) { super(itemView); text = itemView.findViewById(R.id.item_list_text_textView); menu = itemView.findViewById(R.id.item_list_menu_imageView); switchCompat = itemView.findViewById(R.id.item_list_switchCompat); } @Override public void onItemSelected() { itemView.setTranslationZ(10); } @Override public void onItemClear() { itemView.setTranslationZ(0); }}这里通过 setTranslationZ() 来改变 itemView 的高度。之前笔者尝试通过 setElevation() 来改变高度,但是行不通,后来查资料发现 View 的Z轴阴影Z = elevation + translationZ 其中:elevation 是静态值,是 View 在Z轴上的初始值translationZ 是动态值,是Z上的偏移变化所以我们这里应该使用 setTranslationZ() 来改变 View 的Z轴高度而不是使用 setElevation() ,读者们可以自行尝试一下。最后修改 MyItemTouchHelperCallback ,重写上述的两个方法,过程很简单,直接看代码: @Override public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) { if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) { //不为空闲状态,即为拖拽或侧滑状态 if (viewHolder instanceof IItemTouchHelperViewHolder) { IItemTouchHelperViewHolder itemTouchHelperViewHolder = (IItemTouchHelperViewHolder) viewHolder; itemTouchHelperViewHolder.onItemSelected(); } } super.onSelectedChanged(viewHolder, actionState); } @Override public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { super.clearView(recyclerView, viewHolder); if (viewHolder instanceof IItemTouchHelperViewHolder) { IItemTouchHelperViewHolder itemTouchHelperViewHolder = (IItemTouchHelperViewHolder) viewHolder; itemTouchHelperViewHolder.onItemClear(); } }最后如果 SwipeAndDragRecyclerView 对您有任何帮助,希望能得到您在 GitHub 的一个 Star !如果文章中有什么错误或值得改进的地方,欢迎到评论区中给我留言 ...

February 1, 2019 · 3 min · jiezi