带有 GridLayoutManager 和 Picasso 的 RecyclerView 显示错误的图像

Posted 2023-02-21

【中文标题】带有 GridLayoutManager 和 Picasso 的 RecyclerView 显示错误的图像

【英文标题】：RecyclerView with GridLayoutManager and Picasso showing wrong image

【发布时间】：2015-06-01 09:58:11

【问题描述】：

更新 #1

添加了 hasStableIds(true) 并将 Picasso 更新到 2.5.2 版本。 它不能解决问题。

复制：

带有 GridLayoutManager (spanCount = 3) 的 RecyclerView。 列表项是 CardViews，里面有 ImageView。

当所有项目都不适合屏幕时，对一项调用 notifyItemChanged 会导致多次调用 onBindViewHolder()。 一个调用是从 notifyItemChanged 其他位置调用屏幕上不可见的项目。

问题：

有时，传递给 notifyItemChanged 位置的项目会加载属于不在屏幕上的项目的图像（很可能是由于视图持有者的回收 - 尽管我会假设如果项目保持原位，那么传递的查看器将是相同的）。

我在这里找到了 Jake 关于调用 load() 的其他问题的评论，即使文件/uri 为空。此处的每个 onBindViewHolder 上都加载了图像。

简单示例应用：

git clone https://github.com/gswierczynski/recycler-view-grid-layout-with-picasso.git

点击一个项目调用 notifyItemChanged 参数等于该项目的位置。

代码：

public class MainActivity extends ActionBarActivity 

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        if (savedInstanceState == null) 
            getSupportFragmentManager().beginTransaction()
                    .add(R.id.container, new PlaceholderFragment())
                    .commit();
        
    

    public static class PlaceholderFragment extends Fragment 

        public PlaceholderFragment() 
        

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) 
            View rootView = inflater.inflate(R.layout.fragment_main, container, false);

            RecyclerView rv = (RecyclerView) rootView.findViewById(R.id.rv);

            rv.setLayoutManager(new GridLayoutManager(getActivity(), 3));
            rv.setItemAnimator(new DefaultItemAnimator());
            rv.setAdapter(new ImageAdapter());

            return rootView;
        
    

    private static class ImageAdapter extends RecyclerView.Adapter<ImageViewHolder> implements ClickableViewHolder.OnClickListener 

        public static final String TAG = "ImageAdapter";
        List<Integer> resourceIds = Arrays.asList(
                R.drawable.a0,
                R.drawable.a1,
                R.drawable.a2,
                R.drawable.a3,
                R.drawable.a4,
                R.drawable.a5,
                R.drawable.a6,
                R.drawable.a7,
                R.drawable.a8,
                R.drawable.a9,
                R.drawable.a10,
                R.drawable.a11,
                R.drawable.a12,
                R.drawable.a13,
                R.drawable.a14,
                R.drawable.a15,
                R.drawable.a16,
                R.drawable.a17,
                R.drawable.a18,
                R.drawable.a19,
                R.drawable.a20);

        @Override
        public ImageViewHolder onCreateViewHolder(ViewGroup parent, int viewType) 
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);
            return new ImageViewHolder(v, this);
        

        @Override
        public void onBindViewHolder(ImageViewHolder holder, int position) 
            Log.d(TAG, "onBindViewHolder position: " + position + " | holder obj:" + holder.toString());
            Picasso.with(holder.iv.getContext())
                    .load(resourceIds.get(position))
                    .fit()
                    .centerInside()
                    .into(holder.iv);
        

        @Override
        public int getItemCount() 
            return resourceIds.size();
        

        @Override
        public void onClick(View view, int position) 
            Log.d(TAG, "onClick position: " + position);
            notifyItemChanged(position);
        

        @Override
        public boolean onLongClick(View view, int position) 
            return false;
        
    

    private static class ImageViewHolder extends ClickableViewHolder 

        public ImageView iv;

        public ImageViewHolder(View itemView, OnClickListener onClickListener) 
            super(itemView, onClickListener);
            iv = (ImageView) itemView.findViewById(R.id.iv);
        
    


public class ClickableViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener, View.OnLongClickListener 
    OnClickListener onClickListener;


    public ClickableViewHolder(View itemView, OnClickListener onClickListener) 
        super(itemView);
        this.onClickListener = onClickListener;
        itemView.setOnClickListener(this);
        itemView.setOnLongClickListener(this);
    

    @Override
    public void onClick(View view) 
        onClickListener.onClick(view, getPosition());
    

    @Override
    public boolean onLongClick(View view) 
        return onClickListener.onLongClick(view, getPosition());
    

    public static interface OnClickListener 
        void onClick(View view, int position);
        boolean onLongClick(View view, int position);
    

【问题讨论】：

您找到解决方案了吗？我有同样的问题。这只发生在 RecyclerView 上吗？您尝试过 ListView 吗？

还没有。由于我不确定这是否是 Picasso 或 GridLayoutManager 的问题，所以我已在 PIcasso github 项目页面 (github.com/square/picasso/issues/954) 和 AOSP Google 代码 (code.google.com/p/android/issues/detail?id=162699) 上发布了问题。我认为 ListView 上不存在此问题。

你解决了这个问题吗，我仍然看到这个问题存在于 com.squareup.picasso:picasso:2.5.2 setSupportsChangeAnimations(false) 和 setHasStableIds(true) 似乎阻止了这种情况的发生跨度>

【参考方案1】：

我花了更多的时间来解决 RecyclerView 和它附带的新适配器的奇怪问题。在正确更新和确保 notifyDataSetChanges 及其所有其他兄弟姐妹不会导致奇怪行为方面，唯一最终对我有用的是：

在我的适配器上，我设置

setHasStableIds(true);

在构造函数中。然后我覆盖了这个方法：

@Override
public long getItemId(int position) 
    // return a unique id here

并确保我的所有商品都返回了唯一 ID。

如何实现这一点取决于您。对我来说，数据是从我的 Web 服务以 UUID 的形式提供的，我通过使用以下方式将 UUID 的部分转换为 long 来作弊：

SomeContent content = _data.get(position);
Long code = Math.abs(content.getContentId().getLeastSignificantBits());

显然，这不是一种非常安全的方法，但它可能适用于包含

我建议尝试这种方法，看看它是否适合你。由于您有一个数组，因此为您获取一个唯一编号应该很简单。也许尝试返回实际项目的位置（而不是在 getItemId() 中传递的位置）或为您的每条记录创建一个唯一的 long 并将其传递。

【讨论】：

提供的代码只是为了说明问题。我的实际实现要复杂得多（使用不同的排序和过滤方式）。我确实有 UUID（也许哈希码可以完成这项工作）。我看到了那个优化，但还没有尝试过。

对我来说也一样。我的适配器代码要复杂得多，但我在让图像在回收器视图中表现时遇到了很多问题（通过 UniversalImageLoader 异步加载）。唯一对我有用的是我写的东西。

感谢您的意见@kha。不幸的是，这并不能解决问题。我已提交您提出的更改。

使用url.hashCode()作为itemid

【参考方案2】：

您是否尝试过在 Drawable 上调用 mutate() 方法？例如，请参阅here。

【参考方案3】：

这是一个可行的解决方案，但在调用 notifyDataSetChanged() 时出现图形故障

holder.iv.post(new Runnable() 
            @Override
            public void run() 
                     Picasso.with(holder.iv.getContext())
                              .load(resourceIds.get(position))
                              .resize(holder.iv.getWidth(), 0)
                              .into(holder.iv);
            );

之所以有效，是因为此时图像有一个宽度，不幸的是，当我需要更新视图中的所有复选框（如全选操作）时，我调用notifyDataSetChanged()，效果非常难看

仍在寻找更好的解决方案

编辑： 这个解决方案对我有用：

    holder.iv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() 
        @Override
        public void onGlobalLayout() 
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN)
                holder.iv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            else
                holder.iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);

                Picasso.with(holder.iv.getContext())
                         .load(resourceIds.get(position))
                         .resize(holder.iv.getMeasuredWidth(), 0)
                         .into(holder.iv);
        
    );

【讨论】：

解决方案有效，但它带来了新的错误，所以我不推荐这个。