Android中ListView非同步載入圖片錯位、重複、閃爍問題分析及解決方案_Android

來源:互聯網
上載者:User

Android ListView非同步載入圖片錯位、重複、閃爍分析以及解決方案,具體問題分析以及解決方案請看下文。

我們在使用ListView非同步載入圖片的時候,在快速滑動或者網路不好的情況下,會出現圖片錯位、重複、閃爍等問題,其實這些問題總結起來就是一個問題,我們需要對這些問題進行ListView的最佳化。

比如ListView上有100個Item,一屏只顯示10個Item,我們知道getView()中convertView是用來複用View對象的,因為一個Item的對應一個View對象,而ImageView控制項就是View對象通過findViewById()獲得的,而我們在複用View對象時,同時這個ImageView對象也被複用了。比如第11個Item的View複用了第1個Item View對象,那麼ImageView就同時被複用了,所以當圖片沒下載出來,這個ImageView(第11個Item)顯示的資料就是複用(第1個Item)的資料。

1:Item圖片顯示重複

這個顯示重複是指當前行Item顯示了之前某行Item的圖片。

比如ListView滑動到第2行會非同步載入某個圖片,但是載入很慢,載入過程中ListView已經滑動到了第14行,且滑動過程中該圖片載入結束。第2行已不在螢幕內,根據上面介紹的緩衝原理,第2行的View對象可能被第14行複用,這樣我們看到的就是第14行顯示了本該屬於第2行的圖片,造成顯示重複。

2. Item圖片顯示錯亂

這個顯示錯亂是指某行Item顯示了不屬於該行Item的圖片。

跟上面的原因一樣。

3. Item圖片顯示閃爍

上面介紹的另外一種情況,如果第14行圖片又很快載入結束,所以我們看到第14行先顯示了複用的第2行的圖片,立馬又顯示了自己的圖片進行覆蓋造成閃爍錯亂。

解決方案:

通過上面的分析我們知道了出現錯亂的原因是非同步載入及對象被複用造成的,如果每次getView能給對象一個標識,在非同步載入完成時比較標識與當前行Item的標識是否一致,一致則顯示,否則不做處理即可。

原理:首先給ImageView設定一個Tag,這個Tag中設定的是圖片的url,然後在載入的時候取得這個url和要載入那position中的url對比,如果不相同就載入,相同就是複用以前的就不載入了。

Android在ListView顯示圖片(重複錯亂閃爍問題)

1、原因分析

ListView item緩衝機制:

為了使得效能更優,ListView會緩衝行item(某行對應的View)。

ListView通過adapter的getView函數獲得每行的item。

滑動過程中

a. 如果某行item已經滑出螢幕,若該item不在緩衝內,則put進緩衝,否則更新緩衝;

b. 擷取滑入螢幕的行item之前會先判斷緩衝中是否有可用的item,如果有,做為convertView參數傳遞給adapter的getView。

這樣,如下的getView寫法就可以充分利用緩衝大大提升ListView的效能。即便上萬個行item,最多inflate的次數為n,

n為一屏最多顯示ListView 行item的個數。

@Overridepublic View getView ( int position , View convertView , ViewGroup parent ) {  ViewHolder holder ;  if ( convertView == null ) {   convertView = inflater . inflate ( R . layout . list_item , null ) ;   holder = new ViewHolder ( ) ;   ……   convertView . setTag ( holder ) ;  } else {   holder = ( ViewHolder ) convertView . getTag ( ) ;  }}

 這樣提升了效能,但同時也會造成另外一些問題:

a. 行item圖片顯示重複

這個顯示重複是指當前行item顯示了之前某行item的圖片。

比如ListView滑動到第2行會非同步載入某個圖片,但是載入很慢,載入過程中listView已經滑動到了第14行,且滑動過程中該圖片載入結束,

第2行已不在螢幕內,根據上面介紹的緩衝原理,第2行的view可能被第14行複用,這樣我們看到的就是第14行顯示了本該屬於第2行的圖片,

造成顯示重複。

b. 行item圖片顯示錯亂

這個顯示錯亂是指某行item顯示了不屬於該行item的圖片。

比如ListView滑動到第2行會非同步載入某個圖片,但是載入很慢,載入過程中listView已經滑動到了第14行,第2行已不在螢幕內,根據上面介紹的緩衝原理,第2行的view可能被第14行複用,第14行顯示了第2行的View,這時之前的圖片載入結束,就會顯示在第14行,造成錯亂。

c. 行item圖片顯示閃爍

上面b的情況,第14行圖片又很快載入結束,所以我們看到第14行先顯示了第2行的圖片,立馬又顯示了自己的圖片進行覆蓋造成閃爍錯亂。

2、解決方案

通過上面的分析我們知道了出現錯亂的原因是非同步載入及對象被複用造成的,如果每次getView能給對象一個標識,在非同步載入完成時比較標識與當前行item的標識是否一致,一致則顯示,否則不做處理即可。

andbase中的實現代碼:

/**  * 顯示這個圖片,解決了列表問題.  * 列表問題:滑動過程中,getView的imageView會重複利用,導致圖片會串位  * @param imageView 顯得的View  * @param url the url  * @return  */  public void display( final ImageView imageView,String url) {   if (AbStrUtil.isEmpty(url)){    if (noImage != null ){     if (loadingView != null ){      loadingView.setVisibility(View.INVISIBLE);      imageView.setVisibility(View.VISIBLE);     }     imageView.setImageDrawable(noImage);    }    return ;   }   //設定下載項   final AbImageDownloadItem item = new AbImageDownloadItem();   //設定顯示的大小   item.width = width;   item.height = height;   //設定為縮放   item.type = type;   item.imageUrl = url;   final String cacheKey = AbImageCache   .getCacheKey(item.imageUrl, item.width, item.height, item.type);   item.bitmap = AbImageCache.getBitmapFromCache(cacheKey);   //if(D) Log.d(TAG, "緩衝中擷取的"+cacheKey+":"+item.bitmap);   //設定標記   imageView.setTag(url);   if (item.bitmap == null ){    //先顯示載入中    if (loadingView!= null ){     loadingView.setVisibility(View.VISIBLE);     imageView.setVisibility(View.INVISIBLE);    } else if (loadingImage != null ){     imageView.setImageDrawable(loadingImage);    }    //下載完成後更新介面    item.setListener( new AbImageDownloadListener() {     @Override     public void update(Bitmap bitmap, String imageUrl) {      //未設定載入中的圖片,並且設定了隱藏的View      if (loadingView != null && imageUrl.equals(imageView.getTag())){       loadingView.setVisibility(View.INVISIBLE);       imageView.setVisibility(View.VISIBLE);      }      //要判斷這個imageView的url有變化,如果沒有變化才set,      //有變化就取消,解決列表的重複利用View的問題      if(bitmap!=null&& imageUrl.equals(imageView.getTag())){       if (D) Log.d(TAG, "圖片下載,設定:" +imageUrl);       imageView.setImageBitmap(bitmap);      } else {       if (errorImage != null && imageUrl.equals(imageView.getTag())){        imageView.setImageDrawable(errorImage);       }      }     }    });    if (D) Log.d(TAG, "圖片下載,執行:" +url);    mAbImageDownloadPool.execute(item);   } else {    if (loadingView != null ){     loadingView.setVisibility(View.INVISIBLE);     imageView.setVisibility(View.VISIBLE);    }    imageView.setImageBitmap(item.bitmap);   }  }

以上內容就是Android中ListView非同步載入圖片錯位、重複、閃爍問題分析及解決方案,希望對大家今後的工作和學習有所協助。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.