Picasso在列表适配器中将图片加载到错误的imageView中

Question

我正在使用Picasso从服务器加载图像到列表视图项，方法如下：

public View getView(int position, View convertView, ViewGroup parent) {
    LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View participantView;
    if(convertView == null) {
        participantView = inflater.inflate(R.layout.participant_item, parent, false);
    } else {
        participantView = convertView;
    }

    TextView textView = (TextView) participantView.findViewById(R.id.participantName);
    textView.setText(getItem(position).getName());
    ImageView imageView = (ImageView) participantView.findViewById(R.id.participantImage);
    String profilePic = getItem(position).getProfilePic();

    if(!profilePic.equals("None")) {
        Log.d("tom.debug", "creating picture for user: " + getItem(position).getName());
        Picasso.with(this.context)
            .load(urlToProfilePics + profilePic)
            .placeholder(R.drawable.sample_0)
            .resize(52, 52)
            .into(imageView);
    } else {
        //load the place holder into the image view
        Picasso.with(this.context).load(R.drawable.sample_0);
    }

    if(!getItem(position).isHere()) {
        imageView.setColorFilter(Color.DKGRAY, PorterDuff.Mode.MULTIPLY);
    }

    return participantView;
}

在if语句下的调试日志仅对确实拥有个人资料图片的用户触发。 （没有图片的用户将获得None值）。

然而，一些其他列表视图项目（没有个人资料图片的）也会加载该图片。

另一个有用的事实（我认为）：当上下滚动列表时，获得bug的项目会改变。

我不确定我错过了什么。

- Tom Klino

---

对于谷歌员工..我花了很多时间在一个类似的bug上，但是在RecyclerView中，后来才意识到我在更新数据集后不小心调用了myRecyclerView.smoothScrollToPosition(0)，但没有实现smoothScrollToPosition所需的必要方法/类。将其更改为scrollToPosition(0)解决了我的问题。请参见http://stackoverflow.com/questions/38391869/why-does-a-recyclerview-layoutmanagers-default-smoothscrolltoposition-method-lo - Anton

Answer 1

确保每次从Adapter中的getView()方法使用Picasso之前都调用cancelRequest方法。

// 1st: reset the imageView
Picasso.with(this.context).cancelRequest(holder.imageView); 

// 2nd start a new load for the imageView
Picasso.with(this.context).load(...).into(holder.imageView); 

原因是您从convertView参数中重用的视图属于可能已被Picasso加载了另一张图片的先前行。

仅在使用convertView时才真正需要这样做，如果您刚刚填充了一个新的布局，则不需要，但您可以随时调用它以使您的代码更加简便。

- Alécio Carvalho

---

我浪费了几个小时（现在是凌晨1:25），试图解决图像加载完成并设置单元格背景颜色以匹配我的图像主题颜色的问题。然后，我注意到它设置了错误的单元格...现在我恢复了理智，非常感谢你！ :D - Zhang

抱歉，对我来说没有起作用，我猜还有其他问题。当我调用位置0的图片时，它会显示位置0，但位置1中没有图片，但图片也会显示在位置1，然后再次在位置2中没有图片，但是位置0的图片也会在这里显示。但是，如果要求位置3的图片，则会在位置3中显示，但位置4中没有图片，但位置3的图片会显示在位置4中。 - Noor Hossain

Answer 2

请参考以下代码。首先是我的grid_row.xml文件。这是网格项布局文件。

<ProgressBar
    android:layout_height="70dp"
    android:layout_width="70dp"
    android:id="@+id/myprogress"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_below="@+id/title"       />

<View
    android:layout_width="2dp"
    android:layout_height="2dp"/>

<ImageView
    android:layout_height="165dp"
    android:id="@+id/imageView1"
    android:layout_width="125dp"
    android:scaleType="fitXY"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"/>

<View
    android:layout_width="2dp"
    android:layout_height="2dp"/>

<TextView
    android:text="TextView"
    android:layout_height="wrap_content"
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_below="@+id/imageView1"
    android:textStyle="bold"
    android:layout_marginTop="2dp"
    android:layout_centerHorizontal="true"
    android:textSize="20sp"
    android:ellipsize="marquee">
</TextView>

<View
    android:layout_width="2dp"
    android:layout_height="2dp"/>

<TextView
    android:text="TextView"
    android:layout_height="wrap_content"
    android:id="@+id/subTitle"
    android:layout_width="wrap_content"
    android:layout_below="@+id/title"
    android:layout_marginTop="2dp"
    android:layout_centerHorizontal="true"
    android:textSize="18sp"
    android:ellipsize="marquee">
</TextView>

 </RelativeLayout>

那么请继续使用适配器类作为参考。

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.drawable.Drawable;
import android.util.Log;
 import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;


import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.FailReason;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;
import    com.nostra13.universalimageloader.core.display.FadeInBitmapDisplayer;
import com.nostra13.universalimageloader.core.listener.ImageLoadingListener;
import com.nostra13.universalimageloader.core.listener.ImageLoadingProgressListener;
import com.nostra13.universalimageloader.core.listener.SimpleImageLoadingListener;
import com.squareup.picasso.Picasso;

import java.util.ArrayList;

/**
 * Created by mpatil on 28/05/15.
 */
public class GridViewAdapter extends BaseAdapter
{
private ArrayList<String> listTitle;
private ArrayList<String> listSubTitle;
private ArrayList<String> imgp;

private Context activity;
ViewHolder view;
Configuration_Parameter m_config=Configuration_Parameter.getInstance();

public GridViewAdapter(Context activity,ArrayList<String> listTitle, ArrayList<String> subTitle,ArrayList<String> img)
{
    super();
    this.listTitle = listTitle;
    this.imgp = img;
    this.listSubTitle=subTitle;
    this.activity = activity;


}

@Override
public int getCount()
{
    // TODO Auto-generated method stub
    return listTitle.size();
}

@Override
public String getItem(int position)
{
    // TODO Auto-generated method stub
    return (String) (String) view.imgViewFlag.getTag();
}


@Override
public long getItemId(int position)
{
    // TODO Auto-generated method stub
    return 0;
}

public static class ViewHolder
{
    public ImageView imgViewFlag;
    public TextView txtViewTitle;
    public TextView txtViewSubTitle;
    public ProgressBar pg;

    public ViewHolder(View v)
    {

    }
    public ViewHolder()
    {
    }
}

@Override
public View getView(final int position, View convertView, ViewGroup parent)
{
    // TODO Auto-generated method stub
    View participentView=convertView;

    if(participentView == null || participentView.getTag() == null)
    {
        LayoutInflater inflater = null;
        inflater=(LayoutInflater) parent.getContext().getSystemService(activity.LAYOUT_INFLATER_SERVICE);
        view = new ViewHolder();
        participentView = inflater.inflate(R.layout.grid_layout, null);
        view.txtViewTitle = (TextView) participentView.findViewById(R.id.title);
        view.txtViewSubTitle = (TextView) participentView.findViewById(R.id.subTitle);
        view.pg=(ProgressBar)participentView.findViewById(R.id.myprogress);
        view.imgViewFlag = (ImageView) participentView.findViewById(R.id.imageView1);


        participentView.setTag(view);
    }
    else
    {
        view = (ViewHolder) participentView.getTag();
    }

        //download and display image from url

    view.txtViewTitle.setText(listTitle.get(position));
    view.txtViewSubTitle.setText(listSubTitle.get(position) + " subitem");
    ImageLoader imageLoader = null;
    imageLoader= ImageLoader.getInstance();

    DisplayImageOptions options = new DisplayImageOptions.Builder()
            .showImageForEmptyUri(R.drawable.paceholder) // resource or drawable
            .showImageOnFail(R.drawable.error_page_logo) // resource or drawable
            .resetViewBeforeLoading(false)  // default
            .delayBeforeLoading(1000)
            .cacheInMemory(true) // default
            .cacheOnDisk(true) // default
        .build();


    m_config.imageLoader.displayImage(imgp.get(position), view.imgViewFlag,options,new SimpleImageLoadingListener()
    {
        @Override
        public void onLoadingStarted(String imageUri, View v)
        {
            Log.i("Inside onLoadingStarted " + position,"Yes");
            view.imgViewFlag.setVisibility(View.INVISIBLE);
            view.pg.setVisibility(View.VISIBLE);
            view.imgViewFlag.setVisibility(View.INVISIBLE);
        }
        @Override
        public void onLoadingFailed(String imageUri, View v, FailReason failReason)
        {
            Log.i("Inside onLoadingFailed " + position,"Yes");
            view.pg.setVisibility(View.GONE);

        }
        @Override
         public void onLoadingComplete(String imageUri, View v, Bitmap    loadedImage)
        {
            Log.i("Ins onLoadingComplete " + position, "Yes");
            view.pg.setVisibility(View.GONE);
            view.imgViewFlag.setVisibility(View.VISIBLE);
            view.imgViewFlag.invalidate();
        }

    });



    return participentView;
 }

 }

我相信这一定会有所帮助。感谢NOSTRA提供如此出色的库。点赞...!!! 开心编程... :)

- Meghana Patil

Answer 3

在您的getView()方法中，将您的Picasso代码更改为以下内容：

        try {
                Picasso.with(mActivity).
                        cancelRequest(holder.mImgCity);
                Picasso.with(mActivity).
                        load(getItem(position).getBackgroundImg()).
                        error(R.drawable.image_1).
                        into(holder.mImgCity);
            }
            catch (IllegalArgumentException e)
            {
                e.printStackTrace();
                holder.mImgCity.setImageResource(R.drawable.image_1); //<-- Important line
            }

更新

在您的getView()方法中使用Viewholder概念。只需使用此方法即可完成所有操作。

- Sagar Shah

Answer 4

我认为我曾经也遇到过同样的情况。我建议你在适配器中使用ViewHolder模式。

它会类似于这样。

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

    final ViewHolder holder;
    View participantView = convertView;
    if (participantView == null || participantView.getTag() == null) {
        LayoutInflater inflater = (LayoutInflater) mContext
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            // don't forget to inflate the same layout
        participantView = inflater.inflate(R.layout.participant_item, null);
        holder = getHolder(participantView);
        assert participantView != null;
        participantView.setTag(holder);
    } else {
        holder = (ViewHolder) participantView.getTag();
    }

    holder.textView.setText(getItem(position).getName());
    String profilePic = getItem(position).getProfilePic();

    if(!profilePic.equals("None")) {
        Log.d("tom.debug", "creating picture for user: " + getItem(position).getName());
        Picasso.with(this.context)
        .load(urlToProfilePics + profilePic)
        .placeholder(R.drawable.sample_0)
        .resize(52, 52)
        .into(holder.imageView);
    } else {
        //load the place holder into the image view
        Picasso.with(this.context).load(R.drawable.sample_0);
    }

    if(!getItem(position).isHere()) {
        holder.imageView.setColorFilter(Color.DKGRAY, PorterDuff.Mode.MULTIPLY);
    }

    resetViews(participantView);

    return participantView;
}

void resetViews(View v) {
    ViewHolder mHolder = new ViewHolder(v);
    mHolder.textView.invalidate();
    mHolder.imageView.invalidate();
}

static class ViewHolder { 
  TextView textView;
  ImageView imageView;
} 

- Ye Lin Aung

---

看起来是个好主意，但它没起作用。我可能实现方式与你想的略有不同。在resetViews中有一行new ViewHolder(v)，但ViewHolder中没有这样的构造函数，你的意思是什么？ - Tom Klino

另外，关于 resetViews(vi)。vi 应该是什么？我在你的代码中没有看到这样的对象定义... - Tom Klino

@Tom 是的，应该是 participantView。 - Ye Lin Aung