The cause and solution of repetitive flicker in image display during slide of Android ListView

The main analysis of the Android ListView scrolling process of image display repetition, confusion, flashing reasons and solutions, incidentally mentioned ListView caching mechanism.

1. Reason Analysis

ListView Item caching mechanism: To make performance better, ListView caches line item (view for a row). ListView gets the item for each line through the adapter GetView function. In the process of sliding,

A. If a line item has been slipped out of the screen, if the item is not in the cache, put the cache, otherwise update the cache;

B. Get the line item that slides into the screen before you determine if there is an item available in the cache, and if so, pass the Convertview parameter to adapter's GetView.

More specific visible source code Listview.obtainview.

In this way, the following getview can be used to greatly improve the performance of ListView. Even tens of thousands of line items, the maximum number of inflate is n,n for a screen to display the number of ListView line item.

@Override public
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 ();
    }
}
     
/**
* Viewholder * *
@author trinea@trinea.cn 2013-08-01
/
private static class Viewholder {
     
    ImageView AppIcon;
    TextView  AppName;
    TextView  appInfo;
}

This improves performance, but it can also cause other problems:

A. Line item pictures show duplicates

This display repetition refers to the current line item showing a picture of the item on the previous line.

Like ListView sliding to the 2nd line to load a picture asynchronously, but the load is very slow, the load process ListView has slipped to line 14th, and the picture in the sliding process of loading, the 2nd line is not in the screen, according to the caching principle described above, the view of line 2nd may be the 14th line reuse So what we see is that line 14th shows a picture that was supposed to be on line 2nd, causing the display to repeat.

B. Line item picture showing confusion

This display disorder refers to a line item that shows a picture that does not belong to the line item.

For example, ListView slide to the 2nd line to load a picture asynchronously, but the load is slow, ListView has slipped to the 14th line in the load process, the 2nd row is not in the screen, according to the caching principle described above, the view of the 2nd line may be reused by the 14th line. Line 14th shows the view of line 2nd, at which point the previous picture loading ended, showing up in line 14th, causing confusion.

C. line item picture Display flashing

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/OS/extra/

In the case of B above, the 14th line of the picture is quickly loaded and finished, so we see the 14th line shows the picture of the 2nd line, and immediately showed their own image to cover caused flicker confusion.

2. Solution method

Through the above analysis we know that the reason for the disorder is asynchronous loading and the object is reused, if each getview can give the object an identity, the asynchronous load when the comparison between the identity and the current line item identification is consistent, the consistent display, otherwise do not handle it.

The following is an example of using Imagecache to provide a picture capture cache for ListView, and Imagecache is strongly recommended in ListView.

First, add in the GetView of ListView adapter

@Override
Publicviewgetview (intposition,viewconvertview,viewgroupparent) {
    viewholderholder;
    if (convertview==null) {
        convertview=inflater.inflate (r.layout.list_item,null);
        Holder=newviewholder ();
        ..... Convertview.settag (holder);
    } else{
        holder= (viewholder) Convertview.gettag ();
    }
    ..... Add tag for image, to compare it when image loaded finish
    Imageview.settag (IMAGEURL);
    If not in cache, restore default
    if (! Cache.ICON_CACHE.get (Imageurl,imageview)) {
        imageview.setimagedrawable (null);
    }
}

Where the Settag represents the setting of the logo to facilitate the following flag comparison

if (! Cache.ICON_CACHE.get (IMAGEURL, ImageView))

Cache.icon_cache is an instance of Imagecache, which means that if it is not in the cache, the setting drawable is null (you can set your own default resource, of course) to prevent the display of a picture of a previous line item, which resolves A. The row item picture shows a duplicate problem.

Add in the onimageloaded function of the Imagecache Onimagecallbacklistener

Publicvoidonimageloaded (stringimageurl,drawableimagedrawable,viewview,booleanisincache) {
    //can be another View child, like TextView and so on
    if (view!=null&&imagedrawable!=null) {
        imageviewimageview= ( ImageView) view;
        Add tag judge, avoid ListView cache and so on
        stringimageurltag= (String) Imageview.gettag ();
        if (Objectutils.isequals (Imageurltag,imageurl)) {
            imageview.setimagedrawable (imagedrawable);
        }}}
;

On the above, use string Imageurltag = (string) Imageview.gettag (), get the tag that was set before, and then compare it to the current URL, and if it is equal, resolve B. Row item picture shows disorder, C. Row item picture shows two problems of disorder. which objectutils visible objectutils@github.

Other asynchronous load process resolution principles are similar.