如何實現 Android ListView『上拉加載更多』?

jopen 8年前發布 | 13K 次閱讀 ListView Android開發 移動開發

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

來自: http://segmentfault.com/a/1190000004292874

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!