Android——ListView的上拉分頁加載

前言

ListView的上拉分頁加載在很多app中都能看到，例如微信朋友圈、QQ空間、新聞列表等，因為數(shù)據(jù)量很大，一次加載所有的數(shù)據(jù)將嚴(yán)重造成資源浪費且影響用戶體驗。所以如果每次只加載一部分的數(shù)據(jù)，需要時再加載下一部分?jǐn)?shù)據(jù)，那么就可以很大程度上節(jié)約資源。

具體實現(xiàn)

（前排提示：熟悉使用ListView而只想了解分頁加載的朋友可直接空降第五部分）

一、數(shù)據(jù)源

  • 這里我的數(shù)據(jù)源來自 易源接口 的奇聞異事API
  • 通過谷歌自帶的HttpURLConnection獲取數(shù)據(jù)，這里我將數(shù)據(jù)獲取封裝成GetJsonObject方法，返回值為JSONObject對象，代碼如下：
public class GetJsonObject {
    public static JSONObject getJsonObject(String url) {
        JSONObject mJsonObject = null;

        try {
            URL mURL = new URL(url);
            HttpURLConnection mHttpURLConnection = (HttpURLConnection) mURL.openConnection();
            mHttpURLConnection.setRequestMethod("GET");
            mHttpURLConnection.setReadTimeout(5000);
            mHttpURLConnection.setDoInput(true);

            StringBuffer mStringBuffer = new StringBuffer();
            String str;
            BufferedReader mBufferedReader = new BufferedReader(new InputStreamReader(mHttpURLConnection.getInputStream()));
            while ((str = mBufferedReader.readLine()) != null) {
                mStringBuffer.append(str);
            }

            //用數(shù)據(jù)源StringBuffer創(chuàng)建JSONObject對象方便后面解析json
            mJsonObject = new JSONObject(String.valueOf(mStringBuffer));
        } catch (JSONException | IOException e) {
            e.printStackTrace();
        }
        return mJsonObject;
    }
}
  • 解析json
    1、創(chuàng)建Bean對象，用于數(shù)據(jù)封裝
public class NewsBean {
    public String news_ImageView;
    public String news_TextView;
}

2、創(chuàng)建用于存儲數(shù)據(jù)的List<NewsBean>

private List<NewsBean> mList = new ArrayList<>();

3、用谷歌自帶的JSONObject解析json并將數(shù)據(jù)填充到List<NewsBean>中

try {
        JSONObject mJSONObject = GetJsonObject.getJsonObject(url).getJSONObject("showapi_res_body");
        JSONArray mJSONArray = mJSONObject.getJSONArray("newslist");

        for (int i = 0; i < mJSONArray.length(); i++) {
            JSONObject mJSONObject1 = mJSONArray.getJSONObject(i);
            NewsBean mNewsBean = new NewsBean();
            mNewsBean.news_ImageView = mJSONObject1.getString("picUrl");
            mNewsBean.news_TextView = mJSONObject1.getString("title");
            mList.add(mNewsBean);
        }
    } catch (JSONException e) {
        e.printStackTrace();
}

二、創(chuàng)建ListView的適配器

  • 新建一個MyListAdapter類繼承BaseAdapter ，代碼如下：
public class MyListAdapter extends BaseAdapter {

    private List<NewsBean> mNewsBeanList;
    private LayoutInflater mLayoutInflater;
    private Context mContext;

    public void bindData(Context mContext, List<NewsBean> mNewsBeanList){
        this.mContext = mContext;
        this.mLayoutInflater = LayoutInflater.from(mContext);
        this.mNewsBeanList = mNewsBeanList;
    }

    @Override
    public int getCount() {
        return mNewsBeanList.size();
    }

    @Override
    public Object getItem(int position) {
        return mNewsBeanList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder mViewHolder;
        if (convertView == null){
            mViewHolder = new ViewHolder();
            convertView = mLayoutInflater.inflate(R.layout.list_item, null);
            mViewHolder.mImageView = (ImageView) convertView.findViewById(R.id.image_item);
            mViewHolder.mTextView = (TextView) convertView.findViewById(R.id.text_item);
            convertView.setTag(mViewHolder);
        }else {
            mViewHolder = (ViewHolder) convertView.getTag();
        }

        NewsBean mNewsBean = mNewsBeanList.get(position);
        //使用了Glide框架加載圖片
        Glide.with(mContext).load(mNewsBean.news_ImageView).placeholder(R.mipmap.ic_launcher).into(mViewHolder.mImageView);
        mViewHolder.mTextView.setText(mNewsBean.news_TextView);

        return convertView;
    }

    class ViewHolder{
        public ImageView mImageView;
        public TextView mTextView;
    }
}

三、加載數(shù)據(jù)

  • 由于網(wǎng)絡(luò)請求是耗時操作，事實上請求和解析都是在異步任務(wù)AsyncTask的doInBackground中方法完成的，而給ListView設(shè)置適配器則是在onPostExecute方法中完成的。這里我在MainActivity中新建了一個內(nèi)部類MyAsyncTask繼承AsyncTask，代碼如下：
class MyAsyncTask extends AsyncTask<String, Void, List<NewsBean>> {

        @Override
        protected void onPreExecute() {
            super.onPreExecute();
        }

        @Override
        protected List<NewsBean> doInBackground(String... params) {

            try {
                JSONObject mJSONObject = GetJsonObject.getJsonObject(params[0]).getJSONObject("showapi_res_body");
                JSONArray mJSONArray = mJSONObject.getJSONArray("newslist");

                for (int i = 0; i < mJSONArray.length(); i++) {
                    JSONObject mJSONObject1 = mJSONArray.getJSONObject(i);
                    NewsBean mNewsBean = new NewsBean();
                    mNewsBean.news_ImageView = mJSONObject1.getString("picUrl");
                    mNewsBean.news_TextView = mJSONObject1.getString("title");
                    mNewsBean.news_Url = mJSONObject1.getString("url");
                    mList.add(mNewsBean);
                }
            } catch (JSONException e) {
                e.printStackTrace();
            }

            return mList;
        }

        @Override
        protected void onPostExecute(List<NewsBean> strings) {
            super.onPostExecute(strings);
            mMyListAdapter.bindData(MainActivity.this, strings);
            //只有當(dāng)加載入第一頁時才設(shè)置一次適配器
            if (page == 1) {
                mListView.setAdapter(mMyListAdapter);
            }
            mMyListAdapter.notifyDataSetChanged();
            page++;

        }

        @Override
        protected void onProgressUpdate(Void... values) {
            super.onProgressUpdate(values);
        }
    }

  • 調(diào)用 MyAsyncTask的execute()方法加載數(shù)據(jù)


    Paste_Image.png

  • 效果如圖所示


    Paste_Image.png

五、分頁加載

  • 準(zhǔn)備了那么多終于到了本文的重點，其實分頁加載的關(guān)鍵在于什么時候需要加載下一頁？
    1、判斷ListView什么時候滑動到了底部？方法是給ListView設(shè)置滾動監(jiān)聽，并重寫onScroll()方法，代碼如下：
mListView.setOnScrollListener(new AbsListView.OnScrollListener() {

            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                isLast = (totalItemCount == firstVisibleItem + visibleItemCount);     //判斷是否滑到底部
            }
        });

其中
-isLast是個boolean變量，用于判斷ListView是否滑動到了底部
-totalItemCount 表示ListView總的的item數(shù)量
-firstVisibleItem 表示手機屏幕所顯示的第一個item是ListView中的第幾個item
-visibleItemCount表示手機屏幕可以看見的item的數(shù)量
所以當(dāng)totalItemCount == firstVisibleItem + visibleItemCount時，就是滑動到了底部
2、然而有時ListView是滑動到了底部，但是我們的手指并沒有離開屏幕，此時我們不想繼續(xù)看下面的內(nèi)容而往上滑動了，這時就沒必要加載分頁了，于是我們還需要判斷滾動狀態(tài)是否為停止?jié)L動了


Paste_Image.png

所以需要再重寫onScrollStateChanged()方法，于是完整的判斷代碼為：

mListView.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                isLast = (totalItemCount == firstVisibleItem + visibleItemCount);     //判斷是否滑倒底部

            }

            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
                //當(dāng)滑動到底部 且 手指離開屏幕時 確定為需要加載分頁
                if (isLast && scrollState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE) {
                    new MyAsyncTask().execute(URL_PATH1 + num + URL_PATH2 + page + URL_PATH3 + showapi_timestamp + URL_PATH4);
                }
            }
        });

再返回來看MyAsyncTask中的onPostExecute()方法


Paste_Image.png

其中

if (page == 1) {
    mListView.setAdapter(mMyListAdapter);
}
mMyListAdapter.notifyDataSetChanged();

保證了適配器不會被多次設(shè)置且加載分頁后頁面不會移動到ListView的第一個item那邊，而 page++ 則使每次調(diào)用加載分頁時傳入的url的頁碼參數(shù)自增一。

后話

  • 關(guān)于網(wǎng)絡(luò)請求和解析json格式的數(shù)據(jù)，推薦使用okHttp框架+Gson框架，更佳高效便捷。
  • 關(guān)于ListView中加載網(wǎng)絡(luò)圖片，強烈推薦使用Glide框架，原因是因為在ListView上加載圖片時會出現(xiàn)錯誤的位置加載圖片而有圖片閃動現(xiàn)象，還有時我們需要看的是ListView后面的一點的數(shù)據(jù)，所以滑動時的圖片不需要加載，而只需加載最終我們等待加載的頁面的圖片，這些Glide框架都幫我們處理好了，不需要我們自己去實現(xiàn)這些代碼。
  • 完整代碼已上傳Github，如有疑問或表述有誤的地方，歡迎在評論區(qū)交流。
  • Github：https://github.com/TheCoffeeNoSugar/Novel
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容