• Android在ListView显示图片(重复混乱闪烁问题)


    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的个数。

    @Override
    public View getView ( int position , View convertView , ViewGroup parent ) {
         ViewHolder holder ;
         if( convertView ==null) {
             convertView = inflater . inflate ( R . layout . list_item ,null) ;
             holder =newViewHolder ( ) ;
            ……
             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
         */
        publicvoiddisplay(finalImageView 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;
            }
             
            //设置下载项
            finalAbImageDownloadItem item =newAbImageDownloadItem();
            //设置显示的大小
            item.width = width;
            item.height = height;
            //设置为缩放
            item.type = type;
            item.imageUrl = url;
            finalString 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);
                }elseif(loadingImage !=null){
                    imageView.setImageDrawable(loadingImage);
                }
                 
                //下载完毕后更新界面
                item.setListener(newAbImageDownloadListener() {
                     
                    @Override
                    publicvoidupdate(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);
            }
             
        }

    andbase 介绍:http://blog.csdn.net/menglele1314/article/details/46422409

                             下载:http://download.csdn.net/detail/menglele1314/8786989

  • 相关阅读:
    CSS Grid 布局
    sublime text 3配置c/c++编译环境
    [工具/PC]计算机中丢失libiconv-2.dll,丢失libintl-8.dll,无法定位程序输入点libiconv于动态链接库libiconv-2.dll上问题解决方法
    操作系统Unix、Windows、Mac OS、Linux的故事
    编译型语言与解释型语言的区别及各自的优缺点
    node版本控制之nvm
    Webpack devServer中的 proxy 实现跨域
    webpack-dev-server配置指南(使用webpack3.0)
    [bzoj3295][Cqoi2011]动态逆序对_主席树
    [bzoj2989]数列_KD-Tree_旋转坐标系
  • 原文地址:https://www.cnblogs.com/blfshiye/p/5038221.html
Copyright © 2020-2023  润新知