为什么 RecyclerView 中的交错网格布局的元素在加载图像时会自动交换其位置？答案

【问题标题】：Why element of a Staggered Grid Layout inside a RecyclerView is automatically Interchanging it's position when loading Images?为什么 RecyclerView 中的交错网格布局的元素在加载图像时会自动交换其位置？
【发布时间】：2016-01-20 00:06:49
【问题描述】：

我在我的应用程序中使用 RecyclerView 来显示来自服务器的图像，我使用交错网格布局以交错格式排列图像，并且我正在使用通用图像加载器加载图像。我的问题是，从服务器加载时图像正在交换，例如，第二列中显示的图像会自动更改为第一列，反之亦然。我不明白这是为什么，谁能帮忙？提前谢谢。

Recycler 视图和 StaggeredGridLayout

     RecyclerView rView = (RecyclerView)view.findViewById(R.id.recycler_view);
    rView.setHasFixedSize(true);
    rView.setItemAnimator(new DefaultItemAnimator());
    StaggeredGridLayoutManager stagGrid = new StaggeredGridLayoutManager(rowColumnValue,StaggeredGridLayoutManager.VERTICAL);
    rView.setLayoutManager(stagGrid);

RecyclerView Adapter.java

  public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewHolders> {

private ArrayList<String> itemList;
private ArrayList<String> imageStatusList;
private List<ItemObject> imageList;
private Context context;
String [] imageURLList=null;
FragmentActivity fragmentActivity;
ImageLoader imageLoader;

public RecyclerViewAdapter(FragmentActivity activity, ArrayList<String> itemList,ArrayList<String> imageStatusList,String [] imageURLs) {

    this.itemList = itemList;
    this.imageStatusList=imageStatusList;

    this.context = context;
    this.fragmentActivity=activity;
    imageLoader = ImageLoader.getInstance();
    this.imageURLList=imageURLs;

    DisplayImageOptions options = new DisplayImageOptions.Builder().cacheInMemory(true)
            .cacheOnDisc(true).resetViewBeforeLoading(true).build();

    // .showImageForEmptyUri(fallback)
    //  .showImageOnFail(fallback)
    // .showImageOnLoading(fallback).build();
    //imageList =  imageLoader.displayImage(itemList,);



}

@Override
public RecyclerViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {

    View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_view_list, null);
    RecyclerViewHolders rcv = new RecyclerViewHolders(layoutView,imageURLList,fragmentActivity);
    return rcv;
}

@Override
public void onBindViewHolder(RecyclerViewHolders holder, int position) {


    imageLoader.displayImage(itemList.get(position), holder.recipeImage);
    imageStatusList.toString();

    try {

        if (imageStatusList.get(position).equals("approved")) {
            holder.rimage.setImageDrawable(fragmentActivity.getResources().getDrawable(R.drawable.varified));
        } else if (imageStatusList.get(position).equals("pending")) {
            holder.rimage.setImageDrawable(fragmentActivity.getResources().getDrawable(R.drawable.pending));

        }

    }
    catch (Exception e){
        e.printStackTrace();
    }


}

@Override
public int getItemCount() {

    return this.itemList.size();

}
}

RecyclerViewHolder.java

public class RecyclerViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener{


public ImageView recipeImage,rimage;
int  likeButtonCount;
String [] imageUrls;
Context mContext;
public RecyclerViewHolders(View itemView,String [] urlList,Context mContext) {

    super(itemView);
    itemView.setOnClickListener(this);
    recipeImage = (ImageView)itemView.findViewById(R.id.recipe_image);
    rimage=(ImageView)itemView.findViewById(R.id.image_status_imageview);
    imageUrls=urlList;
    this.mContext=mContext;

}

@Override
public void onClick(View view) {
    int position = getPosition();

    ArrayList<String>  imageUrlArrayList = new ArrayList<>();
    imageUrlArrayList.add(imageUrls[position]);
    imagePopupWindow(imageUrlArrayList);
    Toast.makeText(view.getContext(), "Clicked = " + getPosition(), Toast.LENGTH_SHORT).show();
}

RecyclerViewAdapter（已编辑）

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewHolders> {

private ArrayList<String> itemList;
private ArrayList<String> imageStatusList;
private List<ItemObject> imageList;
private Context context;
String [] imageURLList=null;
FragmentActivity fragmentActivity;
ImageLoader imageLoader;
DisplayImageOptions options ;

public RecyclerViewAdapter(FragmentActivity activity, ArrayList<String> itemList,ArrayList<String> imageStatusList,String [] imageURLs) {

    this.itemList = itemList;
    this.imageStatusList=imageStatusList;

    this.context = context;
    this.fragmentActivity=activity;
    imageLoader = ImageLoader.getInstance();
    this.imageURLList=imageURLs;

    options  = new DisplayImageOptions.Builder().cacheInMemory(true)
            .cacheOnDisc(true).resetViewBeforeLoading(true)
            .showImageForEmptyUri(fragmentActivity.getResources().getDrawable(R.drawable.wedcake))
            .showImageOnFail(fragmentActivity.getResources().getDrawable(R.drawable.wedcake))
            .showImageOnLoading(fragmentActivity.getResources().getDrawable(R.drawable.wedcake)).build();


}

onBindViewHolder.java

 @Override
public void onBindViewHolder(RecyclerViewHolders holder, int position) {


 //   imageLoader.displayImage(itemList.get(position), holder.recipeImage,options);


    holder.bind(itemList.get(position));
    imageStatusList.toString();

    try {

        if (imageStatusList.get(position).equals("approved")) {
            holder.rimage.setImageDrawable(fragmentActivity.getResources().getDrawable(R.drawable.varified));
        } else if (imageStatusList.get(position).equals("pending")) {
            holder.rimage.setImageDrawable(fragmentActivity.getResources().getDrawable(R.drawable.pending));

        }

    }
    catch (Exception e){
        e.printStackTrace();
    }


}

RecyclerViewHolder.java

public class RecyclerViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener{


public ImageView recipeImage,rimage;
int  likeButtonCount;
String [] imageUrls;
Context mContext;
ImageLoader imageLoader;
DisplayImageOptions options ;
public RecyclerViewHolders(View itemView,String [] urlList,Context mContext) {

    super(itemView);
    itemView.setOnClickListener(this);
    recipeImage = (ImageView)itemView.findViewById(R.id.recipe_image);
    rimage=(ImageView)itemView.findViewById(R.id.image_status_imageview);
    imageUrls=urlList;
    this.mContext=mContext;
    imageLoader = ImageLoader.getInstance();
    options  = new DisplayImageOptions.Builder().cacheInMemory(true)
            .cacheOnDisc(true).resetViewBeforeLoading(true)
            .showImageForEmptyUri(mContext.getResources().getDrawable(R.drawable.wedcake))
            .showImageOnFail(mContext.getResources().getDrawable(R.drawable.wedcake))
            .showImageOnLoading(mContext.getResources().getDrawable(R.drawable.wedcake)).build();



}
 @Override
public void onClick(View view) {
    int position = getPosition();

    ArrayList<String>  imageUrlArrayList = new ArrayList<>();
    imageUrlArrayList.add(imageUrls[position]);
    imagePopupWindow(imageUrlArrayList);
    Toast.makeText(view.getContext(), "Clicked = " + getPosition(), Toast.LENGTH_SHORT).show();
}


public void bind(String items){

    imageLoader.displayImage(items, recipeImage, options);
}

【问题讨论】：

你可以试试这个，在你的onBindViewHolder()方法中设置原始图像之前尝试holder.setImageBitmap(null)然后设置原始图像，目前发生的事情与View Recycling
@Satyen Udeshi：感谢您的回复；上面的sn-p我试过了，还是没有解决我的问题。你能帮忙吗？

标签： android android-layout android-recyclerview android-cardview android-gridlayout

【解决方案1】：

正如我在这里怀疑的那样，这件事与View Recycling 有关，您可以在 SO 本身中找到很多关于此的帖子，我正在发布一些代码，您可以尝试看看是否有帮助

在类级别声明DisplayImageOptions options，并在RecyclerViewAdapter()构造函数中初始化，目前您在加载图像时没有使用这个options，所以UIL不会加载缓存的图像。因此，在加载图像时，您应该这样做：

imageLoader.displayImage(item,recipeImage,options);

或者你也可以尝试下面的方法，以防上面的方法不起作用。

在 RecyclerViewHolder 类中添加一个方法，例如：

public void bind(String item){
    // Set your image  here
    imageLoader.displayImage(item,recipeImage,options);
}

并在您的onBindViewHolder() 中像这样调用此方法 ->

//  imageLoader.displayImage(itemList.get(position), holder.recipeImage);
holder.bind(itemList.get(position))

如果有帮助请告诉我

【讨论】：

@Satyan Udeshi : 再次感谢你的重播。我已经尝试了这两种方法，我已经更新了上面的代码，但我的问题仍然没有解决。你能帮忙吗？

【解决方案2】：

我在交错网格视图中遇到了相同的行为，它似乎与在布局阶段如何放置项目有关。默认策略是GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS，根据documentation，可以在布局内移动项目以隐藏由于项目大小不同而可能出现的间隙。

您可以通过使用setGapStrategy (GAP_HANDLING_NONE) 更改间隙策略来禁用此行为。这将阻止项目更改列，但您最终可能会在列的开头或结尾出现更大的间隙。

【讨论】：