詳解RecyclerView下拉刷新與上拉更多
前言
在原來的文章中我提及了如何使用RecyclerView添加header與footer，今天我們來更深入的擴展一下使用RecyclerView實現常用的下拉刷新與上拉加載更多的功能。當然這些功能的實現也是基于前面的RecyclerView添加header與footer為基礎來實現的，不是很了解的可以先看看前面的文章可能能更好的幫助理解。
依賴
為了方法大家的使用我已經把他上傳到Jcenter中了，所以大家可以調用下面的代碼了直接獲取使用：
- compile 'com.idisfkj.enchancerecyclerview:mylibrary:1.1.1'
EnhanceRecyclerView
我將這個擴展的RecyclerView命名為EnhanceRecyclerView，繼承RecyclerView。我們知道既然要實現下拉刷新與上拉更多自然先要實現頭部與尾部的布局，所以我們先利用前面的知識來為EnhanceRecycleView添加header與footer
- public void initView() {
- View headerView = LayoutInflater.from(getContext()).inflate(R.layout.head_layout, null);
- View footerView = LayoutInflater.from(getContext()).inflate(R.layout.footer_layout, null);
- addHeaderView(headerView);
- addFooterView(footerView);
- }
其中的布局文件就不多說了，至于addHeaderView與addFooterView方法可以查看我前面的那篇文章，有詳細的介紹
設置監聽器
既然要實現下拉刷新與上拉加載，自然少不了對監聽器的處理，所以下面來詳細介紹下對監聽器OnScrollListener與OnTouchListener的處理。
OnScrollListener
為EnhanceRecyclerView添加addOnScrollListener實現其中的onScrollStateChanged與onScrolled方法。
onScrolled
在onScrolled中我們主要做的是獲取EnhanceRcyclerView中item的總數量、視圖顯示中的***個item在EnhanceRecyclerView中所處的位置與視圖顯示中***一個item在EnhanceRecyclerView中所處的位置。
對于item的總數量很好獲取直接調用
- totalCount = getLayoutManager().getItemCount();
由于RecyclerView能實現LinearLayoutManager、GridLayoutManager與StaggeredGridLayoutManager不同的布局，所以另外兩個要根據不同的manager來獲取,還是看具體代碼吧
- if (getLayoutManager() instanceof LinearLayoutManager) {
- lastItem = ((LinearLayoutManager) getLayoutManager()).findLastVisibleItemPosition();
- firstVisible = ((LinearLayoutManager) getLayoutManager()).findFirstVisibleItemPosition();
- } else {
- into = ((StaggeredGridLayoutManager) getLayoutManager()).findLastVisibleItemPositions(into);
- firstInto = ((StaggeredGridLayoutManager) getLayoutManager()).findFirstVisibleItemPositions(firstInto);
- lastItem = into[0];
- firstVisible = firstInto[0];
- }
onScrollStateChanged
獲取到了那三個關鍵數據以后，就可以在onScrollStateChanged中實現具體的邏輯，在這個方法中主要實現的是對上拉加載更多的處理
- if (lastItem == adapter.getItemCount() + 1 && newState == RecyclerView.SCROLL_STATE_IDLE && !isLoad) {
- ViewGroup.LayoutParams params = getFooterView(0).getLayoutParams();
- params.width = RecyclerView.LayoutParams.MATCH_PARENT;
- params.height = RecyclerView.LayoutParams.WRAP_CONTENT;
- getFooterView(0).setLayoutParams(params);
- getFooterView(0).setVisibility(View.VISIBLE);
- smoothScrollToPosition(totalCount);
- isLoad = true;
- loadMoreListener.onLoadMore();
- }
- if (firstVisible == 0) {
- isTop = true;
- } else {
- isTop = false;
- RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) getHeaderView(0).getLayoutParams();
- params.width = RecyclerView.LayoutParams.MATCH_PARENT;
- params.height = RecyclerView.LayoutParams.WRAP_CONTENT;
- params.setMargins(0, -getHeaderView(0).getHeight(), 0, 0);
- getHeaderView(0).setLayoutParams(params);
- }
簡單說明下，核心就是判斷lastItem是否處在***的位置，如果是的話就繼續加載更多的操作，這里提供了一個對數據處理的接口所以只要實現loadMoreListener.onLoadMore();即可。
上拉加載更多核心就是這么多，其它的可以查看源碼
OnTouchListener
這個監聽器主要是對下拉刷新進行處理。我們要分別對其中我們所熟悉的MotionEvent.ACTION_DOWN、MotionEvent.ACTION_MOVE與MotionEvent.ACTION_UP進行處理。ACTION_DOWN就是簡單的獲取按下的坐標位置，這里就不多說了，下面主要的針對另外的兩個進行簡單說明。
ACTION_MOVE
這做的邏輯就是對觸摸后的處理，根據滑動的距離來動態的改變header的文本與布局視圖的顯示。
- public void touchMove(MotionEvent event) {
- endY = event.getY();
- moveY = endY - startY;
- //防止item向上滑出
- if (moveY > 0 && !isRefreshing) {
- //防止回退文本顯示異常
- scrollToPosition(0);
- if (getHeaderView(0).getVisibility() == GONE)
- getHeaderView(0).setVisibility(VISIBLE);
- RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) getHeaderView(0).getLayoutParams();
- params.width = RecyclerView.LayoutParams.MATCH_PARENT;
- params.height = RecyclerView.LayoutParams.WRAP_CONTENT;
- //使header隨moveY的值從頂部漸漸出現
- if (moveY >= 400) {
- moveY = 100 + moveY / 4;
- } else {
- moveY = moveY / 2;
- }
- viewHeight = getHeaderView(0).getHeight();
- if (viewHeight <= 0)
- viewHeight = 130;
- moveY = moveY - viewHeight;
- params.setMargins(0, (int) moveY, 0, 0);
- getHeaderView(0).setLayoutParams(params);
- if (moveY > 80) {
- text.setText(getResources().getString(R.string.release_to_refresh));
- } else {
- text.setText(getResources().getString(R.string.pull_to_refresh));
- }
- } else {
- if (getHeaderView(0).getVisibility() != GONE && !isRefreshing) {
- getHeaderView(0).setVisibility(GONE);
- }
- }
- }
至于下拉時與頂部的距離變化是通過設置margin來動態改變的。
ACTION_UP
***的觸摸處理就是在離開屏幕時根據滑動的距離，是否調用加載數據的接口，或者隱藏下拉刷新頭部，具體還是看代碼吧。
- public void touchUp() {
- if (!isRefreshing && (endY -startY) != 0 ) {
- RecyclerView.LayoutParams params1 = (RecyclerView.LayoutParams) getHeaderView(0).getLayoutParams();
- params1.width = RecyclerView.LayoutParams.MATCH_PARENT;
- params1.height = RecyclerView.LayoutParams.WRAP_CONTENT;
- if (moveY >= 80) {
- text.setText(getResources().getString(R.string.refreshing));
- params1.setMargins(0, 0, 0, 0);
- isRefreshing = true;
- //刷新數據
- pullToRefresh.onRefreshing();
- } else {
- if (viewHeight <= 0)
- viewHeight = 130;
- params1.setMargins(0, -viewHeight, 0, 0);
- getHeaderView(0).setVisibility(GONE);
- }
- getHeaderView(0).setLayoutParams(params1);
- }
- }
代碼中重要的地方都有指出相信都能看懂，這樣下拉與上拉的邏輯就基本實現了，下面來看接口的設計吧
下拉與上拉接口
- public interface PullToRefreshListener {
- void onRefreshing();
- }
- public void setPullToRefreshListener(PullToRefreshListener pullToRefresh) {
- if (loadMoreListener == null) {
- initListener();
- }
- this.pullToRefresh = pullToRefresh;
- }
- public interface LoadMoreListener {
- void onLoadMore();
- }
- public void setLoadMoreListener(LoadMoreListener loadMoreListener) {
- if (pullToRefresh == null) {
- initListener();
- }
- this.loadMoreListener = loadMoreListener;
- }
在運用是添加接口監聽時初始化前面為EnhanceRecyclerView所設置的監聽。
狀態重置設置
在調用下拉刷新或者上拉加載更多之后，我們為其構造通用方法實現，狀態的重置與數據的更新，方便統一調用。
- public void setLoadMoreComplete() {
- RecyclerView.LayoutParams params = (LayoutParams) getFooterView(0).getLayoutParams();
- params.width = 0;
- params.height = 0;
- getFooterView(0).setLayoutParams(params);
- getFooterView(0).setVisibility(View.GONE);
- this.getAdapter().notifyDataSetChanged();
- isLoad = false;
- }
- public void setRefreshComplete() {
- RecyclerView.LayoutParams params1 = (RecyclerView.LayoutParams) getHeaderView(0).getLayoutParams();
- params1.width = RecyclerView.LayoutParams.MATCH_PARENT;
- params1.height = RecyclerView.LayoutParams.WRAP_CONTENT;
- params1.setMargins(0, -getHeaderView(0).getHeight(), 0, 0);
- getHeaderView(0).setLayoutParams(params1);
- getHeaderView(0).setVisibility(GONE);
- this.getAdapter().notifyDataSetChanged();
- isRefreshing = false;
- }
所用工作已經完成下面來做個調用示范
使用
xml中引用
- <com.idisfkj.mylibrary.EnhanceRecyclerView
- android:id="@+id/recyclerView"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- </com.idisfkj.mylibrary.EnhanceRecyclerView>
設置監聽
- mRecyclerView.setPullToRefreshListener(new com.idisfkj.mylibrary.EnhanceRecyclerView.PullToRefreshListener() {
- @Override
- public void onRefreshing() {
- refreshData();
- }
- });
- mRecyclerView.setLoadMoreListener(new EnhanceRecyclerView.LoadMoreListener() {
- @Override
- public void onLoadMore() {
- loadMoreData();
- }
- });
refreshData()與loadMoreData()加載數據的邏輯就不展示了，只是要記住在請求網絡數據完之后要在他們中調用相應的mRecyclerView.setRefreshComplete()與 mRecyclerView.setLoadMoreComplete()來重置狀態。
至于其他的Adapter、LayoutManager等的設置就不多說了，與原生的RecyclerView是一樣的。
總結
其實總的來說難點有兩個
添加header與footer。這個前面已經攻克了，而且原理也相對簡單
實現觸摸與滑動監聽邏輯。這個主要是對邏輯的理解，對整個刷新的過程做個整體分析，就能很好的理解上面的代碼。對其中視圖的動態顯示做相應的變化與接口的調用就能很好的處理這些工程。
當然上面的實現可能還有瑕疵，希望指出，我會相應的做修改或者你們修改后可以提交給我，我統一做修改，謝謝!
