Loading listview images get mixed up on scrolling

Question

I am having a problem when I load images from my SD card and display them in my listview. They initially load fine but when I start scrolling up and down the images get all mized up and are not the images that go with the corresponding list item

here is my adapter where I do everything

@Override
    public void bindView(final View view,final Context context,final Cursor cursor){
        final int id = cursor.getInt(0);;
        final QuickContactBadge image = (QuickContactBadge)view.findViewById(R.id.quickContactBadge1);
        image.setOnClickListener(new View.OnClickListener(){

            @Override
            public void onClick(View v) {
                if(!fromGame){
                    bowlerID = id;
                    Intent i = new Intent(Intent.ACTION_PICK,android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
                    startActivityForResult(i,1);
                }
            }

        });
        String uri = cursor.getString(3);
        if(uri != null){
            image.setImageResource(R.drawable.ic_contact_picture);
            new LoadImage().execute(new Object[]{uri,image});
        }else{

        }

        TextView first = (TextView)view.findViewById(R.id.bListTextView);
        TextView last = (TextView)view.findViewById(R.id.bListTextView2);
        first.setText(cursor.getString(1));
        last.setText(cursor.getString(2));
    }

and my AsyncTask that I give the view that the image will show in and the uri of the image

public class LoadImage extends AsyncTask<Object,Void,Object[]>{

    @Override
    protected Object[] doInBackground(Object... params) {
        String u = (String) params[0];

        InputStream input=null;
        try {
            input = getActivity().getContentResolver().openInputStream(Uri.parse(u));
            BitmapFactory.Options options = new BitmapFactory.Options();
            options.inJustDecodeBounds = false;
            Bitmap og = BitmapFactory.decodeStream(input,null,options);
            int height = options.outHeight;
            int width = options.outWidth;
            BitmapFactory.decodeResource(getResources(), R.drawable.ic_contact_picture, options);

            int imageHeight = options.outHeight;
            int imageWidth = options.outWidth;
            try {
                input.close();
            } catch (IOException e) {
                e.printStackTrace();
            }

            float scaledHeight = ((float)imageHeight)/height;
            float scaledWidth = ((float)imageWidth)/width;

            Matrix matrix = new Matrix();
            matrix.postScale(scaledWidth, scaledHeight);

            Bitmap resize = Bitmap.createBitmap(og, 0, 0, width, height, matrix, true);
            try {
                input.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
            return new Object[] {resize,params[1]};    
        } catch (FileNotFoundException e) {
            e.printStackTrace();
            return null;
        }
    }

    @Override
    public void onPostExecute(Object[] params){ 
        Bitmap resizedImage = (Bitmap)params[0];
        QuickContactBadge image = (QuickContactBadge) params[1];
        image.setImageBitmap(resizedImage);
    }

}

I am guessing it has something to do with handeling the image in the AsyncTask but how do I fix it?

Answer 1

我忘记了将默认图像设置回

image.setImageResource(R.drawable.ic_contact_picture);

Answer 2

I think that there is problem with ListView recycler. When you scroll with ListView, ListView adapter always loads only displayed rows (n) and when you move down, the the first position is recycleded to be n+1 position. So the problem is that you start loading image for first position and then scroll down, the first position now is the second position in scrolled ListView.
The way out is to check if loaded image should be placed in row using some sort of ID of row. You can also use ImageLoader libraries like Aquery which do this work for you.