如何實現 Android ListView『上拉加載更多』?
ListView上拉加載更多的UI需求
(1)向上滑動 ListView,當最后一個條目滾入屏幕時開始加載更多條目,在列表底部增加一個 footerView:一個 infinite progressBar,一個 textView 顯示 “Loading...”;
(2)根據數據加載的結果更新 view:
(2.1)如果已經沒有更多條目,則更新 footerView:僅包含一個 textView 顯示“No More”;
(2.2)如果成功獲取更多條目,則更新 ListView,同時移除(隱藏) footerView;
(2.3)如果加載失敗(網絡異常等原因),移除(隱藏) footerView。
綜上述,需要有一個 footerView,它包含兩種狀態:
------------------------------- | @ Loading... | (借用 @ 當做infinite progressBar) ------------------------------- ------------------------------- | No More | -------------------------------
這是一個挺簡單 UI 需求,比常見的實現方式少了一種狀態:
------------------------------- | 查看更多 | -------------------------------
在這種狀態下,點擊 footerView 也可以和『上拉』一樣加載更多條目。我對比了手Q和微信,手Q就多了這個『查看更多』的狀態(當然,必須在上拉時恰好讓它停在最后一個條目,不然上拉過頭后,就立刻變成『Loading...』)。
本需求并不需要這個狀態,所以下面的實現分析不會考慮它,所以整體實現相對簡單。
為了實現上述需求,需要考慮三個問題:
-
如何定義 footerView?
-
何時加載更多?
-
數據加載完畢后,如何更新視圖?
如何定義 footerView?
如上述, footerView 包含兩種狀態:加載中、沒有加載 。
『加載中』包含兩個控件,infinite progressBar 和 textView,放進一個 LinearLayout;『沒有加載』只包含一個控件,textView,也把它放進一個 LinearLayout;然后把這兩個 LinearLayout 放到一個 FrameLayout 內。根據狀態決定顯示哪個 LinearLayout。因此只需要一個 public method:
public class PullUpLoadListViewFooter extends LinearLayout { public enum State { LOADING, NOT_LOADING, } public void updateView(State state, String content) {} }
何時加載更多?
向上滑動 ListView,當最后一個條目滾入屏幕時開始加載更多條目。ListView 可以監聽滾動事件,因此知道何時加載更多。但數據加載的工作顯然應該交給控制器,也就是 ListView 的托管者比如 Activity 來完成。
所以,在 ListView 中定義一個接口,并在 ListView 滾動事件中回調這個接口方法:
public class PullUpLoadListView extends ListView { public interface OnPullUpLoadListener { void onPullUpLoading(); } public void setOnPullUpLoadListener(OnPullUpLoadListener listener) { mOnPullUpLoadListener = listener; } private OnPullUpLoadListener mOnPullUpLoadListener; private OnScrollListener mOnScrollListener = new OnScrollListener() { @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { // Start a new loading when the last item scrolls into screen, instead of overriding method onTouchEvent. // 檢查是否到listView底部,檢查callbacks是否注冊: if (needLoad(...)) { startPullUpLoad(); } } }; }
startPullUpLoad() 是listView 處理上拉加載的核心代碼:秀出顯示『Loading...』的footerView;設置標志位表示『已經處于上拉加載狀態中』防止重復加載;回調。
private void startPullUpLoad() { if (mOnPullUpLoadListener != null) { // Show the foot view and update its state to LOADING. showFooterView(); // Set flag mIsPullUpLoading = true; // Call the callback to notify the listView's hosted controller to load data. mOnPullUpLoadListener.onPullUpLoading(); } }
再由 Activity 實現該接口完成加載工作:
listView.setOnPullUpLoadListener(new PullUpLoadListView.OnPullUpLoadListener() { @Override public void onPullUpLoading() { if (shouldLoadMore) { // Loading more data new LoadDataAsyncTask().execute(); } else { // Already has no more data // 下面會講到這個方法 listView.onPullUpLoadFinished(true); } } });
數據加載完畢后,如何更新視圖?
ListView 提供一個public方法,根據數據加載的結果更新視圖:
public class PullUpLoadListView extends ListView { // When loading finished, the controller should call this public method to update footer view. public void onPullUpLoadFinished(boolean hasNoMoreItems) { // Clear flag mIsPullUpLoading = false; if (hasNoMoreItems) { // when have no more items, update footer view to: NO MORE mFooterView.updateView(PullUpLoadListViewFooter.State.NOT_LOADING, FOOTER_VIEW_CONTENT_NO_MORE); } else { // The other cases: (1)Loading succeed and still has more items, (2)Loading failed, // should hide footer view. hideFooterView(); } } }
Activity 完成加載數據后,調用 ListView 提供的方法,并更新 adapter 數據集:
listView.onPullUpLoadFinished(false); // Add more data to adapter and notify data set changed to update listView. adapter.addMoreItems(newItems);
源碼實現總結
上述實現基于 nicolasjafelle/PagingListView ,對 PagingListView.java 做了兩處較大改動:
(1)數據加載完成后,由PagingListView負責更新adapter, 考慮到ListView可能并不清楚adapter的接口,所以還是交給activity比較好 ;
// PagingListView的實現 public void onFinishLoading(boolean hasMoreItems, List<? extends Object> { ... ((PagingBaseAdapter) adapter).addMoreItems(newItems); }
(2)PagingListView維護了一個私有成員 boolean hasMoreItems ,然后在滾動事件回調 onScroll(...) 中,如果該值為false,就不會加載更多數據。
我覺得不應該由ListView來維護『是否具有更多的item』,這樣會帶來一些困惑和額外的工作。比如該值為false的情況下,當外部清空list item后,必須重置 hasMoreItems ,否則無法繼續加載。
這樣邏輯顯得比較亂,而『是否可以加載更多』,應該分成兩部分:
由 ListView 判斷『沒有處于加載狀態』并且『已經滾到了最后一個條目』則允許加載;
由 Activity 判斷『還有更多的數據』則允許加載。
這樣就顯得清晰很多了。
你可以從這里獲取源碼:Learning_Android_Open_Source/Pull_Up_Load_ListView_Sample
如下的GIF演示了上拉加載的過程:
weiyi.li - weiyi.just2@gmail.com http://li2.me
2016-01-09~2016-01-12