Android开发网

首页|Android开发环境|Android开发教程|Android开发视频|Android游戏开发|Android开发实例|Android开发书籍|鸡啄米博客

带你实现开发者头条（五） RecyclerView下拉刷新上拉加载

　　一 、前言

　　1.我们的目标

　　把RecyclerView下拉刷新上拉加载更多加入到我们的开发者头条APP中。

　　2.效果图

带你实现开发者头条（五） RecyclerView下拉刷新上拉加载

　　3.实现步骤

　　• 找一个带上拉刷新下载加载更多的RecyclerView开源库，我们要站在巨人的肩膀上

　　• 下载下来自己先运行下demo，然后看看是不是我们需要的功能，觉得不错就把module依赖进来，整合主项目。

　　• 整合进来了之后，我们肯定需要进行修改，例如我这边就有滑动冲突，有多个headView等问题。

　　二 、具体实现

　　1.寻找RecyclerView上拉刷新下载加载开源库

　　我们找开源项目肯定首选github，去搜索一下一大堆，如果效果图是你想要的功能的话，然后找排名靠前，收藏比较多的项目吧，我找的项目是CommonPullToRefresh,支持ListView，RecyclerView，GridView，SwipeRefreshLayout等常用控件。我跑了一下Demo，没啥bug，挺好用的。

　　2.加入项目中

　　1).module导入进来，然后主项目依赖一下。

　　2).代码实现,我们这边就是修改SelectedFragment

　　首先我们看布局文件的变化,在RecyclerView外面包裹了自定义的一个类PtrClassicFrameLayout,内部实现了下拉刷新，上拉加载更多。还可以设置自定义属性，都是啥意思我就不解释了，有兴趣的点击github上那个链接，讲解的很详细。

XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical">  
  6.   
  7.     <com.chanven.lib.cptr.PtrClassicFrameLayout xmlns:cube_ptr="http://schemas.android.com/apk/res-auto"  
  8.         android:id="@+id/test_recycler_view_frame"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent"  
  11.         android:background="#f0f0f0"  
  12.         cube_ptr:ptr_duration_to_close="200"  
  13.         cube_ptr:ptr_duration_to_close_header="700"  
  14.         cube_ptr:ptr_keep_header_when_refresh="true"  
  15.         cube_ptr:ptr_pull_to_fresh="false"  
  16.         cube_ptr:ptr_ratio_of_header_height_to_refresh="1.2"  
  17.         cube_ptr:ptr_resistance="1.8">  
  18.   
  19.         <android.support.v7.widget.RecyclerView  
  20.             android:id="@+id/test_recycler_view"  
  21.             android:layout_width="match_parent"  
  22.             android:layout_height="match_parent"  
  23.             android:background="@android:color/white"/>  
  24.     </com.chanven.lib.cptr.PtrClassicFrameLayout>  
  25. </LinearLayout>  

　　再来看onCreateView方法，这个代码就不解释了。

Java代码
  1. @Override  
  2. public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){  
  3.         View rootView = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_selected, null);  
  4.   
  5.         ptrClassicFrameLayout = (PtrClassicFrameLayout) rootView.findViewById(R.id.test_recycler_view_frame);  
  6.         mRecyclerView = (RecyclerView) rootView.findViewById(R.id.test_recycler_view);  
  7.         mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));  
  8.   
  9.         init();  
  10.         return rootView;  
  11. }  

　　在onCreateView里面调用了init()方法，我们来瞧瞧怎么实现的。这里解释一下为什么要对适配器进行包装，这样的目的在包装类里面处加入头部，底部View，处理点击事件。大家拿到源码了之后自己也可以看看。

Java代码
  1. private void init() {  
  2.     //初始化适配器  
  3.     selectedAdapter = new SelectedRecyclerAdapter(getActivity());  
  4.     //对适配器进行封装  
  5.     mAdapter = new RecyclerAdapterWithHF(selectedAdapter);  
  6.     //把滚动Banner加入头部  
  7.     mAdapter.addCarouse(initCarouselHead());  
  8.     mRecyclerView.setAdapter(mAdapter);  
  9.     ptrClassicFrameLayout.setPtrHandler(ptrDefaultHandler);//设置下拉监听  
  10.     ptrClassicFrameLayout.setOnLoadMoreListener(onLoadMoreListener);//设置上拉监听  
  11.     ptrClassicFrameLayout.setLoadMoreEnable(true);//设置可以加载更多  
  12. }  

　　mAdapter.addCarouse(initCarouselHead()); 初始化一个滚动Banner，然后加入适配器头部。这个我前面的教程应该已经讲过了。。

Java代码
  1. //初始化  
  2. private View initCarouselHead(){  
  3.     View headView = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_selected_header,mRecyclerView,false);  
  4.   
  5.     tvContent=(TextView) headView.findViewById(R.id.tv_content);  
  6.     tvContent.setText(carousePageStr[0]);  
  7.   
  8.     viewPager = (ViewPager)headView.findViewById(R.id.viewpager);  
  9.     selectedPagerAdapter=new SelectedPagerAdapter(getActivity(),carousePagerSelectView);  
  10.     viewPager.setOffscreenPageLimit(2);  
  11.     viewPager.setCurrentItem(0);  
  12.     viewPager.addOnPageChangeListener(onPageChangeListener);  
  13.     viewPager.setAdapter(selectedPagerAdapter);  
  14.   
  15.     ViewGroup group = (ViewGroup) headView.findViewById(R.id.viewGroup);// 初始化底部显示控件  
  16.     tips = new ImageView[3];  
  17.     for (int i = 0; i < tips.length; i++){  
  18.         ImageView imageView = new ImageView(getActivity());  
  19.         if (i == 0) {  
  20.             imageView.setBackgroundResource(R.mipmap.page_indicator_focused);  
  21.         } else {  
  22.             imageView.setBackgroundResource(R.mipmap.page_indicator_unfocused);  
  23.         }  
  24.   
  25.         tips[i] = imageView;  
  26.         LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));  
  27.         layoutParams.leftMargin = 10;// 设置点点点view的左边距  
  28.         layoutParams.rightMargin = 10;// 设置点点点view的右边距  
  29.         group.addView(imageView, layoutParams);  
  30.     }  
  31.   
  32.     timer = new Timer(true);//初始化计时器  
  33.     timer.schedule(task, 0, CAROUSEL_TIME);//延时0ms后执行,3000ms执行一次  
  34.   
  35.     return headView;  
  36. }  

　　SelectedRecyclerAdapter 必须继承RecyclerView.Adapter

　　这玩意跟ListView的适配器差不多，用过ListView适配器的应该一看就懂了。

　　首先会调用getItemCount，知道我要显示多少item。

　　知道了行数然后就是循环调用onCreateViewHolder跟onBindViewHolder了，onCreateViewHolder就是创建一个item的View,onBindViewHolder就会把上次创建的item的View传入进来，还有一个下标，这样我们就能给每一行赋值，这两个方法都是先后一起调用。item回收重用的机制应该跟ListView一样的。

Java代码
  1. public class SelectedRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {  
  2.     private List<SelectedArticle> selectedArticles;  
  3.     private LayoutInflater inflater;  
  4.   
  5.     public SelectedRecyclerAdapter(Context context) {  
  6.         super();  
  7.         inflater = LayoutInflater.from(context);  
  8.   
  9.         selectedArticles = new ArrayList<SelectedArticle>();  
  10.         initData();  
  11.     }  
  12.   
  13.     private void initData() {  
  14.         for (int i = 0; i < 10; i++) {  
  15.             SelectedArticle selectedArticle = new SelectedArticle(i, "Android开发666", i, i, "");  
  16.             selectedArticles.add(selectedArticle);  
  17.         }  
  18.     }  
  19.   
  20.     public void loadMore(int page) {  
  21.         for (int i = 0; i < 5; i++) {  
  22.             SelectedArticle selectedArticle = new SelectedArticle(i, "第" + page + "页数据", i, i, "");  
  23.             selectedArticles.add(selectedArticle);  
  24.         }  
  25.     }  
  26.   
  27.     public void getFirst() {  
  28.         selectedArticles.clear();  
  29.         initData();  
  30.     }  
  31.   
  32.     @Override  
  33.     public int getItemCount() {  
  34.         return selectedArticles.size();  
  35.     }  
  36.   
  37.     @Override  
  38.     public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {  
  39.         SelectedRecyclerHolder holder = (SelectedRecyclerHolder) viewHolder;  
  40.   
  41.         SelectedArticle selectedArticle = selectedArticles.get(position);  
  42.         holder.title.setText(selectedArticle.getTitle());  
  43.         holder.like.setText("" + selectedArticle.getLikeNumber());  
  44.         holder.comment.setText("" + selectedArticle.getCommentNumber());  
  45.     }  
  46.   
  47.     @Override  
  48.     public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewHolder, int position) {  
  49.         View view = inflater.inflate(R.layout.fragment_selected_item, null);  
  50.         return new SelectedRecyclerHolder(view);  
  51.     }  
  52.   
  53.     public class SelectedRecyclerHolder extends RecyclerView.ViewHolder {  
  54.         private TextView title;//标题  
  55.         private TextView like;//喜欢数量  
  56.         private TextView comment;评论数量  
  57.   
  58.         public SelectedRecyclerHolder(View view) {  
  59.             super(view);  
  60.             title = (TextView) view.findViewById(R.id.tv_title);  
  61.             like = (TextView) view.findViewById(R.id.tv_like);  
  62.             comment = (TextView) view.findViewById(R.id.tv_comment);  
  63.         }  
  64.     }  
  65. }  

　　3.解决整合进来的bug

　　• 滑动冲突

　　当我们上拉到顶部把标题栏挤出屏幕外的时候,进行下拉会触发RecyclerView的下拉事件，正确的情况应该是显示Toolbar.

　　1).RecyclerView下拉刷新的时候先判断Toolbar有没有显示。如果Toolbar没有显示就不处理。

　　2).AppBarLayout有一个addOnOffsetChangedListener方法,在AppBarLayout的布局偏移量发生改变时被调用。

　　在MainFragment里面进行监听

Java代码
  1. appBarLayout= (AppBarLayout) rootView.findViewById(R.id.appBarLayout);  
  2. appBarLayout.addOnOffsetChangedListener(onOffsetChangedListener);  

　　然后在回调函数中，把值给SelectedFragment，

Java代码
  1. private AppBarLayout.OnOffsetChangedListener onOffsetChangedListener=new AppBarLayout.OnOffsetChangedListener() {  
  2.     @Override  
  3.     public void onOffsetChanged(AppBarLayout appBarLayout, int i){  
  4.        //i>=0  Toolbar全部显示  
  5.         selectedFragment.setPullRefresh(i>=0);  
  6.         System.out.println("i值:"+i);  
  7.     }  
  8. };  

　　3).在SelectedFragment中，继续把值传给PtrFrameLayout

Java代码
  1. public void setPullRefresh(boolean pullRefresh) {  
  2.     ptrClassicFrameLayout.setPullRefresh(pullRefresh);  
  3. }  

　　4.在PtrFrameLayout里面用一个实例变量接收这个值

Java代码
  1. private boolean pullRefresh=true;  
  2.   
  3. public void setPullRefresh(boolean pullRefresh) {  
  4.     this.pullRefresh = pullRefresh;  
  5. }  

　　4).找到PtrFrameLayout类的dispatchTouchEvent事件,这个方法是处理屏幕的触摸事件的。

Java代码
  1.     @Override  
  2.     public boolean dispatchTouchEvent(MotionEvent e) {  
  3.         if (!isEnabled() || mContent == null || mHeaderView == null) {  
  4.             System.out.println("都是空的...");  
  5.             return dispatchTouchEventSupper(e);  
  6.         }  
  7.         int action = e.getAction();  
  8.         switch (action) {  
  9.             case MotionEvent.ACTION_UP:  
  10.                 System.out.println("弹起...");  
  11.             case MotionEvent.ACTION_CANCEL:  
  12.                   System.out.println("取消...");  
  13. //                if(pullRefresh){  
  14.                     mPtrIndicator.onRelease();  
  15.                     if (mPtrIndicator.hasLeftStartPosition()) {  
  16.                         if (DEBUG) {  
  17.                             PtrCLog.d(LOG_TAG, "call onRelease when user release");  
  18.                         }  
  19.                         System.out.println("call onRelease when user release");  
  20.                         onRelease(false);  
  21.                         if (mPtrIndicator.hasMovedAfterPressedDown()) {  
  22.                             sendCancelEvent();  
  23.                             return true;  
  24.                         }  
  25.                     }  
  26.                     return dispatchTouchEventSupper(e);  
  27. //                }  
  28.             case MotionEvent.ACTION_DOWN:  
  29.                 System.out.println("按下...");  
  30.                 mHasSendCancelEvent = false;  
  31.                 mPtrIndicator.onPressDown(e.getX(), e.getY());  
  32.   
  33.                 mScrollChecker.abortIfWorking();  
  34.   
  35.                 mPreventForHorizontal = false;  
  36.                 // The cancel event will be sent once the position is moved.  
  37.                 // So let the event pass to children.  
  38.                 // fix #93, #102  
  39.                 return dispatchTouchEventSupper(e);  
  40.             case MotionEvent.ACTION_MOVE:  
  41.                 System.out.println("移动...");  
  42.                 if(pullRefresh){//Toolbar显示  
  43.                     mLastMoveEvent = e;  
  44.                     mPtrIndicator.onMove(e.getX(), e.getY());  
  45.                     float offsetX = mPtrIndicator.getOffsetX();  
  46.                     float offsetY = mPtrIndicator.getOffsetY();  
  47.   
  48.                     if (mDisableWhenHorizontalMove && !mPreventForHorizontal && (Math.abs(offsetX) > mPagingTouchSlop && Math.abs(offsetX) > Math.abs(offsetY))) {  
  49.                         if (mPtrIndicator.isInStartPosition()) {  
  50.                             mPreventForHorizontal = true;  
  51.                         }  
  52.                     }  
  53.                     if (mPreventForHorizontal) {  
  54.                         return dispatchTouchEventSupper(e);  
  55.                     }  
  56.   
  57.                     boolean moveDown = offsetY > 0;  
  58.                     boolean moveUp = !moveDown;  
  59.                     boolean canMoveUp = mPtrIndicator.hasLeftStartPosition();  
  60.   
  61.                     if (DEBUG) {  
  62.                         boolean canMoveDown = mPtrHandler != null && mPtrHandler.checkCanDoRefresh(this, mContent, mHeaderView);  
  63.                         PtrCLog.v(LOG_TAG, "ACTION_MOVE: offsetY:%s, currentPos: %s, moveUp: %s, canMoveUp: %s, moveDown: %s: canMoveDown: %s", offsetY, mPtrIndicator.getCurrentPosY(), moveUp, canMoveUp, moveDown, canMoveDown);  
  64.                     }  
  65.   
  66.                     // disable move when header not reach top  
  67.                     if (moveDown && mPtrHandler != null && !mPtrHandler.checkCanDoRefresh(this, mContent, mHeaderView)) {  
  68.                         return dispatchTouchEventSupper(e);  
  69.                     }  
  70.   
  71.                     if ((moveUp && canMoveUp) || moveDown) {  
  72. //                        System.out.println("是否下拉刷新:"+pullRefresh+"偏移量是多少:"+offsetY);  
  73.                         movePos(offsetY);  
  74.                         return true;  
  75.                     }  
  76.                 }  
  77.         }  
  78.         return dispatchTouchEventSupper(e);  
  79.     }  

　　我就改了一行代码，在action==MotionEvent.ACTION_MOVE的时候，先判断我们传入的pullRefresh是否为true。。。

　　• 顶部加入轮播

　　RecyclerView头部底部加入View，前面我们介绍过了，都是适配器的封装类RecyclerAdapterWithHF来控制。从效果图中，我们可以看出，轮播的View是加入头部的，找到RecyclerAdapterWithHF类，看看源码依葫芦画瓢就可以了。

　　1).得有一个保存View的集合，其实用一个变量也行，因为我们只有一个轮播View.

Java代码
  1. private List<View> mCarouse = new ArrayList<View>();//保存轮播View  
  2. //可以添加轮播View  
  3. public void addCarouse(View view){  
  4.     mCarouse.add(view);  
  5. }  

　　2).定义一个常量，用于类型判断

Java代码
  1. public static final int TYPE_CAROUSE = 7900;  

　　3).在getItemViewType里面加入轮播的类型

Java代码
  1. @Override  
  2. public final int getItemViewType(int position) {  
  3.     // check what type our position is, based on the assumption that the  
  4.     // order is headers > items > footers  
  5.     if (isHeader(position)) {  
  6.         return TYPE_HEADER;  
  7.   
  8.     } else if (mCarouse.size()>0&&mHeaders.size()==position){ //判断集合个数&&position==0  这个时候mHeaders里面是没有值的  
  9.         return TYPE_CAROUSE;  
  10.     }else if (isFooter(position)) {  
  11.         return TYPE_FOOTER;  
  12.     }  
  13.     int type = getItemViewTypeHF(getRealPosition(position));  
  14.     if (type == TYPE_HEADER || type == TYPE_FOOTER|| type == TYPE_CAROUSE) {  
  15.         throw new IllegalArgumentException("Item type cannot equal " + TYPE_HEADER + " or " + TYPE_FOOTER);  
  16.     }  
  17.     return type;  
  18. }  

　　4).onCreateViewHolder里面也要修改一下，就是在if里面多加了个&&.无论是头部，底部，轮播的View，都是添加到FrameLayout里面的。

Java代码
  1. @Override  
  2. public final RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int type) {  
  3.     // if our position is one of our items (this comes from  
  4.     // getItemViewType(int position) below)  
  5.     if (type != TYPE_HEADER && type != TYPE_FOOTER && type != TYPE_CAROUSE) {  
  6.         ViewHolder vh = onCreateViewHolderHF(viewGroup, type);  
  7.         return vh;  
  8.         // else we have a header/footer  
  9.     } else {  
  10.         // create a new framelayout, or inflate from a resource  
  11.         FrameLayout frameLayout = new FrameLayout(viewGroup.getContext());  
  12.         // make sure it fills the space  
  13.         frameLayout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));  
  14.         return new HeaderFooterViewHolder(frameLayout);  
  15.     }  
  16. }  

　　5).onBindViewHolder这里为item绑定数据，其实就是第四步返回的ItemView绑定数据.

Java代码
  1.     @Override  
  2.     public final void onBindViewHolder(final RecyclerView.ViewHolder vh, int position){  
  3.         // check what type of view our position is  
  4.         if (isHeader(position)) {  
  5.             View v = mHeaders.get(position);  
  6.             // add our view to a header view and display it  
  7.             prepareHeaderFooter((HeaderFooterViewHolder) vh, v);  
  8.         }else if(mCarouse.size()>0&&position==mHeaders.size()){//这个时候mHeaders.size()值为0  
  9. //            System.out.println("有多少个头View:"+mHeaders.size()+"值等于多少:"+(mHeaders.size()-1));  
  10.             View v = mCarouse.get(mHeaders.size());//取出轮播的View  
  11.             prepareHeaderFooter((HeaderFooterViewHolder) vh, v);  
  12.         } else if (isFooter(position)) {  
  13.             View v = mFooters.get(position - getItemCountHF() - mHeaders.size());  
  14.             // add our view to a footer view and display it  
  15.             prepareHeaderFooter((HeaderFooterViewHolder) vh, v);  
  16.         } else {  
  17.             vh.itemView.setOnClickListener(new MyOnClickListener(vh));  
  18.             vh.itemView.setOnLongClickListener(new MyOnLongClickListener(vh));  
  19.             // it's one of our items, display as required  
  20.             onBindViewHolderHF(vh, getRealPosition(position));  
  21.         }  
  22.     }  

　　6).我们从第五步看到头部底部轮播View最后都会调用prepareHeaderFooter方法。看到这方法的源码，其实就是把类型对应的View，添加到Item中.

Java代码
  1. private void prepareHeaderFooter(HeaderFooterViewHolder vh, View view) {  
  2.     // if it's a staggered grid, span the whole layout  
  3.     if (mManagerType == TYPE_MANAGER_STAGGERED_GRID) {  
  4.         StaggeredGridLayoutManager.LayoutParams layoutParams = new StaggeredGridLayoutManager.LayoutParams  
  5.                 (ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);  
  6.         layoutParams.setFullSpan(true);  
  7.         vh.itemView.setLayoutParams(layoutParams);  
  8.     }  
  9.   
  10.     // if the view already belongs to another layout, remove it  
  11.     if (view.getParent() != null) {  
  12.         ((ViewGroup) view.getParent()).removeView(view);  
  13.     }  
  14.   
  15.     // empty out our FrameLayout and replace with our header/footer  
  16.     vh.base.removeAllViews();  
  17.     vh.base.addView(view);  
  18. }  

　　三、源码下载

　　源码下载

Tags:View | 2016/6/13 | 发表评论

相关文章: