前言
ListView的上拉分頁(yè)加載在很多app中都能看到昨凡，例如微信朋友圈铐然、QQ空間蔬崩、新聞列表等，因?yàn)閿?shù)據(jù)量很大搀暑，一次加載所有的數(shù)據(jù)將嚴(yán)重造成資源浪費(fèi)且影響用戶體驗(yàn)沥阳。所以如果每次只加載一部分的數(shù)據(jù)，需要時(shí)再加載下一部分?jǐn)?shù)據(jù)自点，那么就可以很大程度上節(jié)約資源桐罕。
具體實(shí)現(xiàn)
（前排提示：熟悉使用ListView而只想了解分頁(yè)加載的朋友可直接空降第五部分）
一、數(shù)據(jù)源
- 這里我的數(shù)據(jù)源來(lái)自 易源接口 的奇聞異事API
- 通過(guò)谷歌自帶的HttpURLConnection獲取數(shù)據(jù)桂敛，這里我將數(shù)據(jù)獲取封裝成GetJsonObject方法功炮，返回值為JSONObject對(duì)象，代碼如下：
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對(duì)象方便后面解析json
mJsonObject = new JSONObject(String.valueOf(mStringBuffer));
} catch (JSONException | IOException e) {
e.printStackTrace();
}
return mJsonObject;
}
}
- 解析json
1术唬、創(chuàng)建Bean對(duì)象薪伏，用于數(shù)據(jù)封裝
public class NewsBean {
public String news_ImageView;
public String news_TextView;
}
2、創(chuàng)建用于存儲(chǔ)數(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的適配器
- 新建一個(gè)MyListAdapter類(lèi)繼承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ò)請(qǐng)求是耗時(shí)操作塘淑，事實(shí)上請(qǐng)求和解析都是在異步任務(wù)AsyncTask的doInBackground中方法完成的，而給ListView設(shè)置適配器則是在onPostExecute方法中完成的蚂斤。這里我在MainActivity中新建了一個(gè)內(nèi)部類(lè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)加載入第一頁(yè)時(shí)才設(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
五、分頁(yè)加載
- 準(zhǔn)備了那么多終于到了本文的重點(diǎn)曙蒸，其實(shí)分頁(yè)加載的關(guān)鍵在于什么時(shí)候需要加載下一頁(yè)捌治？
1、判斷ListView什么時(shí)候滑動(dòng)到了底部纽窟？方法是給ListView設(shè)置滾動(dòng)監(jiān)聽(tīng)具滴，并重寫(xiě)onScroll()方法，代碼如下：
mListView.setOnScrollListener(new AbsListView.OnScrollListener() {
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
isLast = (totalItemCount == firstVisibleItem + visibleItemCount); //判斷是否滑到底部
}
});
其中
-isLast是個(gè)boolean變量师倔，用于判斷ListView是否滑動(dòng)到了底部
-totalItemCount 表示ListView總的的item數(shù)量
-firstVisibleItem 表示手機(jī)屏幕所顯示的第一個(gè)item是ListView中的第幾個(gè)item
-visibleItemCount表示手機(jī)屏幕可以看見(jiàn)的item的數(shù)量
所以當(dāng)totalItemCount == firstVisibleItem + visibleItemCount時(shí)，就是滑動(dòng)到了底部
2、然而有時(shí)ListView是滑動(dòng)到了底部趋艘，但是我們的手指并沒(méi)有離開(kāi)屏幕疲恢，此時(shí)我們不想繼續(xù)看下面的內(nèi)容而往上滑動(dòng)了，這時(shí)就沒(méi)必要加載分頁(yè)了瓷胧，于是我們還需要判斷滾動(dòng)狀態(tài)是否為停止?jié)L動(dòng)了
Paste_Image.png
所以需要再重寫(xiě)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)滑動(dòng)到底部 且 手指離開(kāi)屏幕時(shí) 確定為需要加載分頁(yè)
if (isLast && scrollState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE) {
new MyAsyncTask().execute(URL_PATH1 + num + URL_PATH2 + page + URL_PATH3 + showapi_timestamp + URL_PATH4);
}
}
});
再返回來(lái)看MyAsyncTask中的onPostExecute()方法
Paste_Image.png
其中
if (page == 1) {
mListView.setAdapter(mMyListAdapter);
}
mMyListAdapter.notifyDataSetChanged();
保證了適配器不會(huì)被多次設(shè)置且加載分頁(yè)后頁(yè)面不會(huì)移動(dòng)到ListView的第一個(gè)item那邊，而 page++ 則使每次調(diào)用加載分頁(yè)時(shí)傳入的url的頁(yè)碼參數(shù)自增一搓萧。
后話
- 關(guān)于網(wǎng)絡(luò)請(qǐng)求和解析json格式的數(shù)據(jù)杂数，推薦使用okHttp框架+Gson框架，更佳高效便捷瘸洛。
- 關(guān)于ListView中加載網(wǎng)絡(luò)圖片揍移，強(qiáng)烈推薦使用Glide框架，原因是因?yàn)樵贚istView上加載圖片時(shí)會(huì)出現(xiàn)錯(cuò)誤的位置加載圖片而有圖片閃動(dòng)現(xiàn)象反肋，還有時(shí)我們需要看的是ListView后面的一點(diǎn)的數(shù)據(jù)那伐，所以滑動(dòng)時(shí)的圖片不需要加載，而只需加載最終我們等待加載的頁(yè)面的圖片石蔗，這些Glide框架都幫我們處理好了罕邀，不需要我們自己去實(shí)現(xiàn)這些代碼。
- 完整代碼已上傳Github养距，如有疑問(wèn)或表述有誤的地方诉探，歡迎在評(píng)論區(qū)交流。
- Github：https://github.com/TheCoffeeNoSugar/Novel
