用事件分发的原理结合SwipeRefreshLayout写一个RecyclerView的上下拉

很久之前我看到网上写了很多关于ListView、GridView上下拉的资源,所以就萌生了自己是否能写一个上下拉。最近我看了很多关于RecyclerView的上下拉的做法,基本上都是在RecyclerView的OnScrollListener里面判断是否在头部底部,然后再给RecyclerView添加头尾部,这样的方法既简便又容易让人理解。但我今天恰恰不用这种方法去添加上下拉,我用的方法其实跟最早时候的ListView、GridView添加上下拉是一样的原理-------事件分发。
其实这种方法也比较简单,只是需要有一定事件分发的知识。那我们先讲讲原理:


原理图.png

首先我们创建两个布局文件,contentView和footerView,我们只是把contentView和footerView都放在了一个垂直分布的LinearLayout里面,然后将contentView设置为match_parent,很自然地,footerView就被挤到屏幕外面去了。然后我们就通过事件分发的机制,不断滑动的同时判断

1,滑动的状态是否是处于上拉状态;
2.RecyclerView是否已经滑到底部。

如果你理解了这样的两个简单条件,恭喜你,那你就基本搞懂了整个上下拉的原理了。
原理讲解开始前先理解几个用到的变量:

private SwipeRefreshLayout swipeRefreshLayout;
private RecyclerView recyclerView;
private TextView tvLoadingText;
//x上次保存的
private int mLastMotionX;
//y上次保存的
private int mLastMotionY;
//滑动状态
private int mPullState;
//上滑
private int PULL_UP_STATE = 2;
private int PULL_FINISH_STATE = 0;
//当前滑动的距离,偏移量
private int curTransY;
//尾部的高度
private int footerHeight;
//内容布局
private View contentView;
//尾布局
private View footerView;
private LinearLayout linearView;
//是否上拉加载更多
private boolean isLoadNext = false;
//是否在加载中
private boolean isLoading = false;
private OnSwipeRecyclerViewListener onSwipeRecyclerViewListener;
private boolean isCancelLoadNext = false;

让我们看看具体的实现代码:

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) 
{  
  int x = (int)ev.getX();  
  int y = (int)ev.getY();  
  switch (ev.getAction()){     
     //手指触摸屏幕
     case MotionEvent.ACTION_DOWN:   
         mLastMotionX = x;       
         mLastMotionY = y;      
         break;    
     //手指移动
     case MotionEvent.ACTION_MOVE:    
         int deltaX = x - mLastMotionX;      
         int deltaY = y - mLastMotionY;      
         //这里是判断左右滑动和上下滑动,如果是上下滑动和滑动了一定的距离,被认为是上下滑动
         if(Math.abs(deltaX) < Math.abs(deltaY) && Math.abs(deltaY) > 10){     
            //进入条件判断,如果isRreshViewScroll返回true,则事件被拦截   
            if(isRefreshViewScroll(deltaY)){         
                  return true;        
            }     
         }       
         break;  
     }  
     return super.onInterceptTouchEvent(ev);
}
private boolean isRefreshViewScroll(int deltaY) { 
   //条件1:deltaY<0,现在处于上下拉的状态;条件2:RecyclerView是否到达底部;
   //条件3:curTransY<=footerHeight是下拉的偏移量;条件4:是否处于上拉或者下拉状态
   if(deltaY < 0 && RecyclerViewUtil.isBottom(recyclerView) && curTransY <= footerHeight && !isLoading && !isCancelLoadNext){     
        //处于下拉状态   
        mPullState = PULL_UP_STATE;     
        isLoading = true;     
        return true;  
   }  
   return false;
}

基本上,理解了以上部分,这个上下拉的原理你算是可以毕业了,是不是很开心?让我们再往下看另外一半。

@Override
public boolean onTouchEvent(MotionEvent event) {  
    int y = (int)event.getY();  
    switch (event.getAction()){   
       case MotionEvent.ACTION_MOVE:     
          float deltaY = y - mLastMotionY;   
          if(mPullState == PULL_UP_STATE){       
          //算出偏移量
          curTransY += deltaY;     
          //如果偏移量大于footerView的高度,把下拉的高度赋给偏移量
          if (Math.abs(curTransY) >  Math.abs(footerHeight)) { 
                 curTransY = - footerHeight;         
          }          
          //把View整体向上滑动
          linearView.setTranslationY(curTransY);      
          if(Math.abs(curTransY) == Math.abs(footerHeight)){   
                 isLoadNext = true;      
          }       
     }      
       mLastMotionY = y;     
       return true;    
       //在这里UP与CANCEL是一样的
       case MotionEvent.ACTION_UP:  
       case MotionEvent.ACTION_CANCEL:     
          if(isLoadNext){      
              //设置footerView的变化
              changeFooterState(true);        
              mPullState = PULL_FINISH_STATE;       
              //设置上拉监听
              if(onSwipeRecyclerViewListener != null){      
                   onSwipeRecyclerViewListener.onLoadNext();     
              }else {           
                   //如果没有拉到底,则再次把尾部隐藏
                   hideTranslationY();         
                   isLoading = false;       
             }        
          }      
          return true;   
     }  
     return super.onTouchEvent(event);
}

好了,基本上已经完成所有的原理扫盲了,接下来就是围绕着这个原理把简单的代码补上。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
   android:orientation="vertical" 
   android:layout_width="match_parent"    
   android:layout_height="match_parent"
   >  
  <android.support.v4.widget.SwipeRefreshLayout   
      android:id="@+id/swiperefreshlayout"    
      android:layout_width="match_parent"  
      android:layout_height="match_parent">      
      <android.support.v7.widget.RecyclerView     
          android:id="@+id/recyclerview"     
          android:layout_width="match_parent"    
          android:layout_height="match_parent"
          >      
      </android.support.v7.widget.RecyclerView>    
 </android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>

contentView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
    android:orientation="vertical" 
    android:layout_width="match_parent"    
    android:layout_height="match_parent"
    >  
    <TextView   
         android:id="@+id/loading_text"     
         android:layout_width="match_parent"    
         android:layout_height="55dp"        
         android:gravity="center"  
         android:text="加载更多"    
         android:textColor="#000000"           
         android:background="#EEEEE0"/>
</LinearLayout>

footerView

public SwipeRecyclerView(Context context) {     
   this(context, null); 
}  
public SwipeRecyclerView(Context context, AttributeSet attrs) {   
     this(context, attrs, 0); 
}   
public SwipeRecyclerView(Context context, AttributeSet attrs, int defStyleAttr) {  
      super(context, attrs, defStyleAttr);    
      initView(context);  
}  
public RecyclerView getRecyclerView(){  
      return recyclerView;
}  
public SwipeRefreshLayout getSwipeRefreshLayout(){   
      return swipeRefreshLayout;  
}  
private void initView(Context context){     
      linearView = new LinearLayout(context);     
      linearView.setOrientation(LinearLayout.VERTICAL);     
      final LinearLayout.LayoutParams linearParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);   
      addView(linearView, linearParams);    
      contentView = LayoutInflater.from(context).inflate(R.layout.swiperecyclerview,null); 
      swipeRefreshLayout = (SwipeRefreshLayout)contentView.findViewById(R.id.swiperefreshlayout);    
      recyclerView = (RecyclerView)contentView.findViewById(R.id.recyclerview);   
      footerView = LayoutInflater.from(context).inflate(R.layout.swiperecyclerview_footerview,null);   
      tvLoadingText = (TextView)footerView.findViewById(R.id.loading_text);    
      //设置SwipeRefreshLayout的监听
      swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {       
          @Override      
          public void onRefresh() {      
             if (!isLoading) {         
                isLoading = true;       
                swipeRefreshLayout.setRefreshing(true);       
                (new Handler()).postDelayed(new Runnable() {      
                    @Override           
                    public void run() {      
                           swipeRefreshLayout.setRefreshing(false);         
                           if (onSwipeRecyclerViewListener != null) {       
                               onSwipeRecyclerViewListener.onRefresh();      
                           }                   
                           isLoading = false;          
                     }         
              }, 2000);          
          }       
     }     
   });     
      linearView.addView(contentView);  
      linearView.addView(footerView);        
      //测量并设置各个布局的高度
      getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {      
         @Override      
         public void onGlobalLayout() {      
               int height = getHeight();    
               if (height != 0) {         
               getViewTreeObserver().removeOnGlobalLayoutListener(this);    
               ViewGroup.LayoutParams recycleParams = contentView.getLayoutParams();          
               recycleParams.height = height;       
               contentView.setLayoutParams(recycleParams);    
               ViewGroup.LayoutParams footerParams =tvLoadingText.getLayoutParams();        
               footerHeight = footerParams.height;        
               ViewGroup.LayoutParams contentParams = linearView.getLayoutParams();                    
               contentParams.height = height + footerHeight;             
               linearView.setLayoutParams(contentParams);      
               // 设置偏移量为0
               curTransY = 0;      
               }      
          }     
      }); 
  }  
  public void setSwipeRefreshColor(int color){      
       swipeRefreshLayout.setColorSchemeColors(getResources().getColor(color)); 
  }

以上是初始化的相关代码
以下是一些工具方法:

//数据改变完之后,调用这方法,重置各种数值
public void onLoadFinish(){ 
   if(curTransY == 0){   
     return;  
   }  
   isLoading = false; 
   hideTranslationY();
}
//用动画的方式把footerView隐藏
private void hideTranslationY() {  
      ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(linearView, "translationY",curTransY, 0).setDuration(1000);   
      objectAnimator.setInterpolator(new DecelerateInterpolator());    
      objectAnimator.start();  
      objectAnimator.addListener(new AnimatorListenerAdapter() {  
      @Override   
      public void onAnimationEnd(Animator animation) {      
        curTransY = 0;    
        changeFooterState(false);    
    }  
  });
}
private void changeFooterState(boolean loading){   
   if(loading){     
       tvLoadingText.setText("正在努力的加载中..."); 
   }
   else{    
       tvLoadingText.setText("加载更多");  
   }
}
public void setOnSwipeRecyclerViewListener(OnSwipeRecyclerViewListener onSwipeRecyclerViewListener){  
    this.onSwipeRecyclerViewListener = onSwipeRecyclerViewListener;
}
public interface OnSwipeRecyclerViewListener{  
    public void onRefresh();  
    public void onLoadNext();
}

接下来看看使用:

简单的使用.png

有兴趣的同学可以去下载源码去研究一下,以上我还有一个判断RecyclerView各种状态类似于判断是否到顶部或者底部的工具类,是由我有个很好人的师兄提供给我的,他也在我写代码的时候给我提供很多很好的建议。慢慢地,我觉得一些自定义ViewHolder的原理并没有想象中的难,只有你是否肯花时间去研究。如果对这个上下拉有什么意见可以跟我讨论,一起提高!
源码下载链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351

推荐阅读更多精彩内容