683
技術社區[雲棲]
Android ListView隻加載當前屏幕內的圖片（解決list滑動時加載卡頓）
最近在做ListView分頁顯示，其中包括圖片 和文字（先下載解析文字內容，再異步加載圖片）發現每次點擊下一頁後，文字內容加載完畢，馬上向下滑動，由於這時後台在用線程池異步下載圖片，我每頁有20條，也就是20張圖片，會導致listview滑動卡頓！
這是用戶不想看到的，我參考了網易新聞和電子市場等應用，發現它們都是隻加載屏幕內的圖片，不現實的不加載,於是我也仿照做了一個。我是菜鳥，我承認 嗬嗬，雖然不見得完全和他們的一樣，但是確實解決了翻頁時那一刻的卡頓現象。
因為未發現網上有相關文章，希望對朋友們有用~
下麵是相關代碼（分頁的就沒放）：
/**
* list滾動監聽
*/
listView.setOnScrollListener(new OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
// TODO Auto-generated method stub
// 異步加載圖片
if (scrollState == OnScrollListener.SCROLL_STATE_IDLE) {//list停止滾動時加載圖片
pageImgLoad(_start_index, _end_index);
}
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {
// TODO Auto-generated method stub
//設置當前屏幕顯示的起始index和結束index
_start_index = firstVisibleItem;
_end_index = firstVisibleItem + visibleItemCount;
if (_end_index >= totalItemCount) {
_end_index = totalItemCount - 1;
}
}
});
/**
* 隻加載from start_index to end_index 的圖片
* @param start_index
* @param end_index
*/
private void pageImgLoad(int start_index, int end_index) {
for (; start_index < end_index; start_index++) {
HashMap<String, Object> curr_item = adapter.getItem(start_index);
if (curr_item.get(Constant.NEWS_ICON_URL) != null
&& curr_item.get(Constant.NEWS_ICON) == null) {
loadImage(curr_item);
}
}
}
異步加載圖片代碼，這裏我之前使用的是AsyncTask，但是繼承AsyncTask後不能被執行多次，所以我改用了線程唿叫handler更新UI：
/**
* 異步加載圖片
* @param curr_item
*/
private void loadImage(final HashMap<String, Object> curr_item) {
executorService.submit(new Runnable() {
public void run() {
try {
Drawable curr_icon = null;
String icon_URL = (String) curr_item
.get(Constant.NEWS_ICON_URL);
String newsId = (String) curr_item.get(Constant.NEWS_ID);
if (imageCache.containsKey(icon_URL)) {//軟引用
SoftReference<Drawable> softReference = imageCache
.get(icon_URL);
curr_icon = softReference.get();
System.out.println("CASE USING SoftReference!!!!!!!!!!!!!!!!!!!!");
}
if (curr_icon == null) {
HttpUtils hu = new HttpUtils();
FileUtils fu = new FileUtils();
if (hu.is_Intent(Home_Activity.this)) {
fu.write2LocalFromIS(Home_Activity.this, newsId
+ Constant.SAVE_NEWS_ICON_NAME
+ Constant.SAVE_IMG_SUFFIX,
hu.getISFromURL(icon_URL));
}
// 從本地加載圖片 如果沒網則直接加載本地圖片
curr_icon = fu.readDrawableFromLocal(
Home_Activity.this, newsId
+ Constant.SAVE_NEWS_ICON_NAME
+ Constant.SAVE_IMG_SUFFIX);
imageCache.put(icon_URL, new SoftReference<Drawable>(
curr_icon));
}
curr_item.put(Constant.NEWS_ICON, curr_icon);
// UI交給handler更新
Message msg = _viewHandler.obtainMessage();
msg.arg1 = Constant.MSG_LIST_IMG_OK;
msg.sendToTarget();
} catch (Exception e) {
throw new RuntimeException(e);
}
}
});
}
@Override
public void handleMessage(Message msg) {
switch (msg.arg1) {
case Constant.MSG_LIST_IMG_OK:
// 更新UI
adapter.notifyDataSetChanged();
break;
}
super.handleMessage(msg);
}
};
上個圖吧：
最後更新：2017-04-02 22:14:28