首页 文章

RecyclerView与GridLayoutManager和Picasso显示错误的图像

提问于
浏览
12

Update #1

添加了hasStableIds(true)并将Picasso更新到版本2.5.2 . 它没有解决问题 .

Reproduction:

RecyclerView with GridLayoutManager(spanCount = 3) . 列表项是带有ImageView的CardViews .

当所有项目都不适合时,在一个项目上调用notifyItemChanged的屏幕会导致对onBindViewHolder()的多次调用 . 一个调用是来自notifyItemChanged其他人的位置,用于屏幕上不可见的项目 .

Issue:

有时,传递给notifyItemChanged的位置的项目加载了属于不在屏幕上的项目的图像(很可能是由于视图持有者的回收 - 尽管我会假设如果项目保留在原位,那么传递的视图持有者会是一样的) .

我发现Jake在这里关于调用load()的其他问题的评论,即使文件/ uri为null . 图像加载到每个onBindViewHolder上 .

Simple sample app:

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

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

Code:

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);
    }
}

3 回答

  • 0

    这里是一个有效的解决方案,但在调用 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() 并且效果非常难看

    仍在寻找更好的解决方案

    edit: 此解决方案适合我:

    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);
            }
        });
    
  • 5

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

    在我的适配器上,我设置

    setHasStableIds(true);
    

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

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

    并确保我的所有项目都返回了唯一的ID .

    你如何实现这一目标取决于你 . 对我来说,数据是以UUID的形式从我的Web服务提供的,我通过将部分UUID转换为long来作弊:

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

    显然这不是一种非常安全的方法,但它很可能适用于我的列表,其中包含<1000项 . 到目前为止,我没有遇到任何麻烦 .

    我建议尝试这种方法,看看它是否适合你 . 由于你有一个数组,为你获得一个唯一的数字应该很简单 . 也许尝试返回实际项目的位置( and not the position that is passed in the getItemId() )或为每个记录创建一个唯一的长度并传入 .

  • 0

    你试过在Drawable上调用mutate()方法吗?例如,见here .

相关问题