如何避免列表视图中的图像闪烁

Question

我有一个显示一堆图像的列表。我正在使用 Universal Image Loader 将此图像从文件加载到 imageviews。

这些图像具有不同的尺寸，我希望它们都具有相同的宽度但相对于每个图像的纵横比具有不同的高度。

为此，我尝试将以下内容设置为我的图像视图

<ImageView
   android:layout_width = "400dp"
   android:layout_height="wrap_content"
   android:scaleType="centerCrop"
   android:adjustViewBounds="true"/>

这种方法的问题是滚动列表视图时会有很多闪烁，因为事先不知道图像视图的高度，并且必须先使用我的宽度来缩放图像以计算每个图像的高度这是纵横比。

如何提前计算每个图像的高度，而不是让 imageview 处理它？

如果我有一个 400 X 700 的图像，并且我希望图像视图为 300 像素宽，我如何使用我的图像尺寸计算图像视图的高度并保持图像纵横比？这可以帮助避免在滚动列表视图时闪烁。

Answer 1

这种闪烁的原因是，在列表视图中，列表项被重复使用。重新使用时，列表项中的图像视图会保留最先显示的旧图像引用。稍后，一旦下载了新图像，它就会开始显示。这会导致闪烁行为。 为避免此闪烁问题，请在重用时始终从 imageview 中清除旧的图像引用。

在您的情况下，在 holder = (ViewHolder) convertView.getTag();

之后添加 holder.image.setImageBitmap(null);

因此，您的 getView() 方法将如下所示：

@Override
public View getView(final int position, View convertView, ViewGroup parent) {

    ...

    if (convertView == null) {
        LayoutInflater inflater = getLayoutInflater();
        convertView = inflater.inflate(viewResourceId, null);

        holder = new ViewHolder(convertView);
        convertView.setTag(holder);
    } else {
        holder = (ViewHolder) convertView.getTag();
        holder.image.setImageBitmap(null)
    }

    ...

    return convertView;
}

Answer 2

你可以这样做：

BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = true;

//Returns null, sizes are in the options variable
BitmapFactory.decodeFile("/sdcard/image.png", options);
int width = options.outWidth;
int height = options.outHeight;
//If you want, the MIME type will also be decoded (if possible)
String type = options.outMimeType;

Answer 3

经过数小时的研究，我知道了在保持图像纵横比的情况下可以用来计算新图像视图高度的方法。

    BitmapFactory.Options options = new BitmapFactory.Options();
    options.inJustDecodeBounds = true;

//Returns null, sizes are in the options variable
BitmapFactory.decodeFile("/sdcard/image.png", options);
int width = options.outWidth;
int height = options.outHeight;

//calculating image aspect ratio
float ratio =(float) height/(float) width;

//calculating my image height since i want it to be 360px wide
int newHeight = Math.round(ratio*360);

//setting the new dimentions
 imageview.getLayoutParams().width = 360;
 imageview.getLayoutParams().height = newHeight;

 //i'm using universal image loader to display image
 imaheview.post(new Runnable(){
  ImageLoader.getInstance().displayImage(imageuri,imageview,displayoptions);
 });

Answer 4

我的解决方法是创建一个Bitmap[] 数组变量来存储图像，然后在适配器的getView() 中，我使用位置来检查Bitmap[] 数组中的图像是null 还是具有值。如果它有值，那么我使用该值而不是再次调用new DownloadImageTask() 构造。

例如：

YourCustomArrayAdapter.java

public class MyCustomArrayAdapter extends ArrayAdapter {
   private static Bitmap[] myListViewImageViewsArray = new Bitmap[listViewItemsArray.length];
   private String[] myListViewImageURLsArray = new String[listViewItemsArray.length]{
      "image_url_1",
      "image_url_2",
      ...
      ...
   };


   @Override
   public View getView(int position, View view, ViewGroup parent){
       CustomViewHolder vHolder;
        if(view == null){
            view = inflater.inflate(R.layout.movies_coming_soon_content_template, null, true);
            vHolder = new CustomViewHolder();
            vHolder.imageView = (AppCompatImageView) view.findViewById(R.id.my_cutom_image);
            vHolder.imageUrl = "";
            view.setTag(vHolder);
        }
        else{
            vHolder = (CustomViewHolder)view.getTag();
            // -- Set imageview src to null or some predefined placeholder (this is not really necessary but it might help just to flush any conflicting data hanging around)
            vHolder.imageView.setImageResource(null);
        }

       // ... 


       // -- THIS IS THE MAIN PART THAT STOPPED THE FLICKERING FOR ME
       if(myListViewImageViewsArray[position] != null){
          vHolder.imageView.setImageBitmap(myListViewImageViewsArray[position]);
       }else{
          new DownloadImageTask(position, vHolder.imageView).execute(vHolder.imageUrl);
       }
       // -- END OF THE FLICKERING CONTROL    
   }
}

然后，在您的图像下载器结构中，下载图像后，将插入到该位置的Bitmap[] 图像数组中。例如：

YourImageDownloaderClass.java

public class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
   AppCompatImageView imageView;
   int position;

   public DownloadImageTask(int position, AppCompatImageView imageView){
       this.imageView = imageView;
       this.position = position;
   }

   @Override
   protected Bitmap doInBackground(String...urls) {

       String urlOfImage = urls[0];
       Bitmap logo = null;
       try{            
           logo = BitmapFactory.decodeStream((InputStream) new URL(urlOfImage).getContent());
       }catch(Exception e){
           e.printStackTrace();            
       }
       return logo;
   }

   @Override
   protected void onPostExecute(Bitmap result){
       if(result != null) {
          YourCustomArrayAdapter.myListViewImageViewsArray [position] = result;
          imageView.setImageBitmap(result);                    
       }else{
          YourCustomArrayAdapter.myListViewImageViewsArray [position] = null;
          imageView.setImageResource(null);                  
       }
    }
}

Answer 5

我的建议是使用网格视图来避免第一次加载的图像闪烁，如果它是相同的 url，它将从缓存中加载

 Glide.with(mContext)
            .load(item.getImageUrl())
            .into(holder.mIVGridPic);