帶你實現開發者頭條（五） RecyclerView下拉刷新上拉加載

　　一 、前言

　　1.我們的目標

　　把RecyclerView下拉刷新上拉加載更多加入到我們的開發者頭條APP中。

　　2.效果圖

　　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. }  

　　三、源碼下載

　　源碼下載