手把手教你實現Android RecyclerView上拉載入功能
阿新 • • 發佈：2019-02-03
心靈雞湯：知之者不如好之者，好之者不如樂之者。摘要
一直在用到RecyclerView時都會微微一顫，因為一直都沒去了解怎麼實現上拉載入，受夠了每次去Github找開源引入，因為感覺就為了一個上拉載入功能而去引入一大堆你不知道有多少BUG的程式碼，不僅增加了專案的冗餘程度，而且出現BUG的時候，你卻發現很難去改，正因為這樣，我就下定決心去了解如何來實現RecyclerView的上拉載入功能，相信大家和我有過同樣的情況，但是我相信，只要你給自己幾分鐘看完這篇文章，你就會發現實現一個上拉載入是非常的簡單什麼是上拉載入
上拉載入和下拉重新整理相對應，在Android API LEVEL 19(即4.4)之後，Google官方推出了SwipeRefreshLayout和RecyclerView的共同使用，為我們提供了更加便捷的列表下拉重新整理功能，但是，並沒有給我們提供上拉載入功能，但是在RecyclerView強大的可擴充套件之下，Github上面有了很多開源專案實現了上拉載入功能，即我們不會一次性將所有資料載入到列表中，當用戶滑動到底部時，再向伺服器請求資料，再填充資料到列表中，這樣不僅可以有更好的人機互動，同時在減少了伺服器的壓力的同時也對客戶端的效能有了更好的提升。本篇文章主要通過介紹實現以下簡單的上拉載入功能，同學們可以在掌握了最基本的實現功能之後，再通過擴充套件和優化，甚至可以封裝成比較通用的程式碼，開源到Github上面。
實現思路
一、XML的實現
佈局很簡單，只有一個SwipeRefreshLayout包裹了一個RecyclerView，相信用過RecyclerView的都很容易看懂。如下為activity_main.xml：<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/refreshLayout" 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.v4.widget.SwipeRefreshLayout> </LinearLayout>
然後，我們RecyclerView的Item佈局也是非常簡單，只有一個TextView。如下為item.xml：
看到我們效果圖都知道，在我們上拉時，還有一個提示的條目，我定義為 footview.xml：<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/tv" android:layout_width="match_parent" android:layout_height="120dp" android:background="@android:color/holo_blue_dark" android:gravity="center" android:textSize="30sp" android:textColor="#ffffff" android:text="11" android:layout_marginBottom="1dp"/> </LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tips"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="30dp"
android:textSize="15sp"
android:layout_marginBottom="1dp"/>
</LinearLayout>
二、初始化SwipeRefreshLayout
在準備好了佈局檔案之後，我們就把目光轉到Activity中去，首先我們需要初始化SwipeRefreshLayout，初始化也是很簡單，這裡省去了findView操作，所以就只有設定轉動的顏色，還有設定重新整理的監聽事件：
private void initRefreshLayout() {
refreshLayout.setColorSchemeResources(android.R.color.holo_blue_light, android.R.color.holo_red_light,
android.R.color.holo_orange_light, android.R.color.holo_green_light);
refreshLayout.setOnRefreshListener(this);
}
@Override
public void onRefresh() {
// 設定可見
refreshLayout.setRefreshing(true);
// 重置adapter的資料來源為空
adapter.resetDatas();
// 獲取第第0條到第PAGE_COUNT（值為10）條的資料
updateRecyclerView(0, PAGE_COUNT);
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
// 模擬網路載入時間，設定不可見
refreshLayout.setRefreshing(false);
}
}, 1000);
}三、定義RecyclerView的Adapter
public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private List<String> datas; // 資料來源
private Context context; // 上下文Context
private int normalType = 0; // 第一種ViewType，正常的item
private int footType = 1; // 第二種ViewType，底部的提示View
private boolean hasMore = true; // 變數，是否有更多資料
private boolean fadeTips = false; // 變數，是否隱藏了底部的提示
private Handler mHandler = new Handler(Looper.getMainLooper()); //獲取主執行緒的Handler
public MyAdapter(List<String> datas, Context context, boolean hasMore) {
// 初始化變數
this.datas = datas;
this.context = context;
this.hasMore = hasMore;
}
// 獲取條目數量，之所以要加1是因為增加了一條footView
@Override
public int getItemCount() {
return datas.size() + 1;
}
// 自定義方法，獲取列表中資料來源的最後一個位置，比getItemCount少1，因為不計上footView
public int getRealLastPosition() {
return datas.size();
}
// 根據條目位置返回ViewType，以供onCreateViewHolder方法內獲取不同的Holder
@Override
public int getItemViewType(int position) {
if (position == getItemCount() - 1) {
return footType;
} else {
return normalType;
}
}
// 正常item的ViewHolder，用以快取findView操作
class NormalHolder extends RecyclerView.ViewHolder {
private TextView textView;
public NormalHolder(View itemView) {
super(itemView);
textView = (TextView) itemView.findViewById(R.id.tv);
}
}
// // 底部footView的ViewHolder，用以快取findView操作
class FootHolder extends RecyclerView.ViewHolder {
private TextView tips;
public FootHolder(View itemView) {
super(itemView);
tips = (TextView) itemView.findViewById(R.id.tips);
}
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
// 根據返回的ViewType，繫結不同的佈局檔案，這裡只有兩種
if (viewType == normalType) {
return new NormalHolder(LayoutInflater.from(context).inflate(R.layout.item, null));
} else {
return new FootHolder(LayoutInflater.from(context).inflate(R.layout.footview, null));
}
}
@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {
// 如果是正常的imte，直接設定TextView的值
if (holder instanceof NormalHolder) {
((NormalHolder) holder).textView.setText(datas.get(position));
} else {
// 之所以要設定可見，是因為我在沒有更多資料時會隱藏了這個footView
((FootHolder) holder).tips.setVisibility(View.VISIBLE);
// 只有獲取資料為空時，hasMore為false，所以當我們拉到底部時基本都會首先顯示“正在載入更多...”
if (hasMore == true) {
// 不隱藏footView提示
fadeTips = false;
if (datas.size() > 0) {
// 如果查詢資料發現增加之後，就顯示正在載入更多
((FootHolder) holder).tips.setText("正在載入更多...");
}
} else {
if (datas.size() > 0) {
// 如果查詢資料發現並沒有增加時，就顯示沒有更多資料了
((FootHolder) holder).tips.setText("沒有更多資料了");
// 然後通過延時載入模擬網路請求的時間，在500ms後執行
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
// 隱藏提示條
((FootHolder) holder).tips.setVisibility(View.GONE);
// 將fadeTips設定true
fadeTips = true;
// hasMore設為true是為了讓再次拉到底時，會先顯示正在載入更多
hasMore = true;
}
}, 500);
}
}
}
}
// 暴露介面，改變fadeTips的方法
public boolean isFadeTips() {
return fadeTips;
}
// 暴露介面，下拉重新整理時，通過暴露方法將資料來源置為空
public void resetDatas() {
datas = new ArrayList<>();
}
// 暴露介面，更新資料來源，並修改hasMore的值，如果有增加資料，hasMore為true，否則為false
public void updateList(List<String> newDatas, boolean hasMore) {
// 在原有的資料之上增加新資料
if (newDatas != null) {
datas.addAll(newDatas);
}
this.hasMore = hasMore;
notifyDataSetChanged();
}
}
四、初始化RecyclerView
private void initRecyclerView() {
// 初始化RecyclerView的Adapter
// 第一個引數為資料，上拉載入的原理就是分頁，所以我設定常量PAGE_COUNT=10，即每次載入10個數據
// 第二個引數為Context
// 第三個引數為hasMore，是否有新資料
adapter = new MyAdapter(getDatas(0, PAGE_COUNT), this, getDatas(0, PAGE_COUNT).size() > 0 ? true : false);
mLayoutManager = new GridLayoutManager(this, 1);
recyclerView.setLayoutManager(mLayoutManager);
recyclerView.setAdapter(adapter);
recyclerView.setItemAnimator(new DefaultItemAnimator());
// 實現上拉載入重要步驟，設定滑動監聽器，RecyclerView自帶的ScrollListener
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
// 在newState為滑到底部時
if (newState == RecyclerView.SCROLL_STATE_IDLE) {
// 如果沒有隱藏footView，那麼最後一個條目的位置就比我們的getItemCount少1，自己可以算一下
if (adapter.isFadeTips() == false && lastVisibleItem + 1 == adapter.getItemCount()) {
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
// 然後呼叫updateRecyclerview方法更新RecyclerView
updateRecyclerView(adapter.getRealLastPosition(), adapter.getRealLastPosition() + PAGE_COUNT);
}
}, 500);
}
// 如果隱藏了提示條，我們又上拉載入時，那麼最後一個條目就要比getItemCount要少2
if (adapter.isFadeTips() == true && lastVisibleItem + 2 == adapter.getItemCount()) {
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
// 然後呼叫updateRecyclerview方法更新RecyclerView
updateRecyclerView(adapter.getRealLastPosition(), adapter.getRealLastPosition() + PAGE_COUNT);
}
}, 500);
}
}
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
// 在滑動完成後，拿到最後一個可見的item的位置
lastVisibleItem = mLayoutManager.findLastVisibleItemPosition();
}
});
}
// 上拉載入時呼叫的更新RecyclerView的方法
private void updateRecyclerView(int fromIndex, int toIndex) {
// 獲取從fromIndex到toIndex的資料
List<String> newDatas = getDatas(fromIndex, toIndex);
if (newDatas.size() > 0) {
// 然後傳給Adapter，並設定hasMore為true
adapter.updateList(newDatas, true);
} else {
adapter.updateList(null, false);
}
}所以，Activity的完整程式碼如下：
public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener {
private SwipeRefreshLayout refreshLayout;
private RecyclerView recyclerView;
private List<String> list;
private int lastVisibleItem = 0;
private final int PAGE_COUNT = 10;
private GridLayoutManager mLayoutManager;
private MyAdapter adapter;
private Handler mHandler = new Handler(Looper.getMainLooper());
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
findView();
initRefreshLayout();
initRecyclerView();
}
private void initData() {
list = new ArrayList<>();
for (int i = 1; i <= 40; i++) {
list.add("條目" + i);
}
}
private void findView() {
refreshLayout = (SwipeRefreshLayout) findViewById(R.id.refreshLayout);
recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
}
private void initRefreshLayout() {
refreshLayout.setColorSchemeResources(android.R.color.holo_blue_light, android.R.color.holo_red_light,
android.R.color.holo_orange_light, android.R.color.holo_green_light);
refreshLayout.setOnRefreshListener(this);
}
private void initRecyclerView() {
adapter = new MyAdapter(getDatas(0, PAGE_COUNT), this, getDatas(0, PAGE_COUNT).size() > 0 ? true : false);
mLayoutManager = new GridLayoutManager(this, 1);
recyclerView.setLayoutManager(mLayoutManager);
recyclerView.setAdapter(adapter);
recyclerView.setItemAnimator(new DefaultItemAnimator());
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
if (newState == RecyclerView.SCROLL_STATE_IDLE) {
if (adapter.isFadeTips() == false && lastVisibleItem + 1 == adapter.getItemCount()) {
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
updateRecyclerView(adapter.getRealLastPosition(), adapter.getRealLastPosition() + PAGE_COUNT);
}
}, 500);
}
if (adapter.isFadeTips() == true && lastVisibleItem + 2 == adapter.getItemCount()) {
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
updateRecyclerView(adapter.getRealLastPosition(), adapter.getRealLastPosition() + PAGE_COUNT);
}
}, 500);
}
}
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
lastVisibleItem = mLayoutManager.findLastVisibleItemPosition();
}
});
}
private List<String> getDatas(final int firstIndex, final int lastIndex) {
List<String> resList = new ArrayList<>();
for (int i = firstIndex; i < lastIndex; i++) {
if (i < list.size()) {
resList.add(list.get(i));
}
}
return resList;
}
private void updateRecyclerView(int fromIndex, int toIndex) {
List<String> newDatas = getDatas(fromIndex, toIndex);
if (newDatas.size() > 0) {
adapter.updateList(newDatas, true);
} else {
adapter.updateList(null, false);
}
}
@Override
public void onRefresh() {
refreshLayout.setRefreshing(true);
adapter.resetDatas();
updateRecyclerView(0, PAGE_COUNT);
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
refreshLayout.setRefreshing(false);
}
}, 1000);
}
}