在 android listview 中使用 picasso 加载自定义位图图像

Question

我需要在列表视图的每一行上创建和设置自定义位图图像。我正在使用毕加索来做到这一点。我在适配器的 getView 中的代码如下所示，

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


    ViewHolder viewHolder = null;
    View rowView = convertView;


    if (rowView == null){

        LayoutInflater inflater = context.getLayoutInflater();
        rowView = inflater.inflate(R.layout.horizontal_listview_list_sample, parent, false);

        viewHolder = new ViewHolder();

        viewHolder.imgDot = (ImageView) rowView.findViewById(R.id.rowIcon);
        viewHolder.rowIconBackround = (ImageView) rowView.findViewById(R.id.rowIconBackground);


        rowView.setTag(viewHolder);

    }else {

        viewHolder = (ViewHolder) rowView.getTag();

    }


    //Start Custom Image View///////

    String photoUrl1 = arrayList.get(position).getPhotoUrl();

    if (photoUrl1.length()<8){
        photoUrl1 = "SOME_URL";
    }

    final String photoUrl = photoUrl1;

    final ImageView imgDot = viewHolder.imgDot;

//        final viewHolder.imgDot = (ImageView) rowView.findViewById(R.id.rowIcon);


    final View finalRowView = rowView;
    final ViewHolder finalViewHolder = viewHolder;
    final Target target = new Target() {
        @Override
        public void onBitmapLoaded(Bitmap bitmap2, Picasso.LoadedFrom from) {

            Log.d("PICASO", " called: " + "onBitmapLoaded called");

            Bitmap original;


            original = new MyProfile().getResizedBitmap(bitmap2, (int) new MainActivity().dipToPixels(MainActivity.getInstance(), 63), (int) new MainActivity().dipToPixels(MainActivity.getInstance(), 63));

            BitmapDrawable bitmap = (BitmapDrawable) finalRowView.getResources().getDrawable(R.drawable.drawer_pro_pic_placeholder);
            int bitmapHeight= bitmap .getBitmap().getHeight();
            int bitmapWidth = bitmap .getBitmap().getWidth();


            Bitmap mask = BitmapFactory.decodeResource(finalRowView.getResources(), R.drawable.drawer_pro_pic_placeholder);
            Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888);
            Canvas mCanvas = new Canvas(result);
            Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
            paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));


            int width = mask.getWidth();
            int height = mask.getHeight();
            float centerX = (width  - original.getWidth()) * 0.5f;
            float centerY = (height- original.getHeight()) * 0.5f;


            mCanvas.drawBitmap(original, centerX, centerY, null);
            mCanvas.drawBitmap(mask, 0, 0, paint);
            paint.setXfermode(null);

            imgDot.getLayoutParams().height = bitmapHeight;
            imgDot.getLayoutParams().width = bitmapWidth;

            imgDot.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imgDot.setImageBitmap(result);

            imgDot.setAdjustViewBounds(true);


            Picasso.with(context).cancelRequest(finalViewHolder.imgDot);
            targets.remove(this);


        }

        @Override
        public void onBitmapFailed(Drawable errorDrawable) {
            Log.d("PICASO", " called: " + "onBitmapFailed called");
            Picasso.with(context).cancelRequest(finalViewHolder.imgDot);
            targets.remove(this);

        }

        @Override
        public void onPrepareLoad(Drawable placeHolderDrawable) {
            Log.d("PICASO", "responseForRegistration called: " + "onPrepareLoad called");

        }
    };

    targets.add(target);

//        imgDot.setTag(target);
    Picasso.with(context).load(photoUrl).into(target);

//End Custom Image View////////////



    return rowView;
}

假设有两行，因此将创建两个自定义位图。创建第一个时，它的显示很好，但是创建第二个时，最后一个图像显示在两行的图像视图中。 我需要在我的代码中进行哪些更改？

任何帮助将不胜感激。

Answer 1

您可以通过将处理程序创建为适配器的子类并传递您的视图持有者和位置的特定引用来尝试一些事情，这将有助于我们避免目标侦听器的覆盖问题

  // construct the handler inside your adapter's constructor so you know it is on the UI thread
Handler myHandler = new Handler(); 

 class LoadImage implements Runnable {
    ImageView iv;
    int position;

public LoadImage(ImageView iv, int position) {
    this.iv = iv;
    this.position = position;
}

@Override
public void run() {

   // keep your target listener stuffs here
    Target target = new Target() {
    @Override
    public void onBitmapLoaded(Bitmap bitmap2, Picasso.LoadedFrom from) {

        Log.d("PICASO", " called: " + "onBitmapLoaded called");

        Bitmap original;


        original = new MyProfile().getResizedBitmap(bitmap2, (int) new MainActivity().dipToPixels(MainActivity.getInstance(), 63), (int) new MainActivity().dipToPixels(MainActivity.getInstance(), 63));

        BitmapDrawable bitmap = (BitmapDrawable) finalRowView.getResources().getDrawable(R.drawable.drawer_pro_pic_placeholder);
        int bitmapHeight= bitmap .getBitmap().getHeight();
        int bitmapWidth = bitmap .getBitmap().getWidth();


        Bitmap mask = BitmapFactory.decodeResource(finalRowView.getResources(), R.drawable.drawer_pro_pic_placeholder);
        Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas mCanvas = new Canvas(result);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));


        int width = mask.getWidth();
        int height = mask.getHeight();
        float centerX = (width  - original.getWidth()) * 0.5f;
        float centerY = (height- original.getHeight()) * 0.5f;


        mCanvas.drawBitmap(original, centerX, centerY, null);
        mCanvas.drawBitmap(mask, 0, 0, paint);
        paint.setXfermode(null);

        iv.getLayoutParams().height = bitmapHeight;
        iv.getLayoutParams().width = bitmapWidth;

        iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
        iv.setImageBitmap(result);

        iv.setAdjustViewBounds(true);

        Picasso.with(context).cancelRequest(iv);


    }

    @Override
    public void onBitmapFailed(Drawable errorDrawable) {
        Log.d("PICASO", " called: " + "onBitmapFailed called");
        Picasso.with(context).cancelRequest(iv);

    }

    @Override
    public void onPrepareLoad(Drawable placeHolderDrawable) {
        Log.d("PICASO", "responseForRegistration called: " + "onPrepareLoad called");

    }
};

    Picasso.with(context).load(photoList.get(position)).into(target);
}
}

您将从您的 getView 中调用它：

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


ViewHolder viewHolder = null;
View rowView = convertView;


if (rowView == null){

    LayoutInflater inflater = context.getLayoutInflater();
    rowView = inflater.inflate(R.layout.horizontal_listview_list_sample, parent, false);

    viewHolder = new ViewHolder();

    viewHolder.imgDot = (ImageView) rowView.findViewById(R.id.rowIcon);
    viewHolder.rowIconBackround = (ImageView) rowView.findViewById(R.id.rowIconBackground);

    rowView.setTag(viewHolder);

  //Change is here
  viewHolder.mRunnable = new LoadImage(viewHolder.imgDot, position);

}else {

    viewHolder = (ViewHolder) rowView.getTag();

   //Change is here
   myHandler.removeCallbacks(viewHolder.mRunnable);

}

//Start Custom Image View///////

String photoUrl1 = arrayList.get(position).getPhotoUrl();

if (photoUrl1.length()<8){
    photoUrl1 = "SOME_URL";
}

final String photoUrl = photoUrl1;

final ImageView imgDot = viewHolder.imgDot;

  //        final viewHolder.imgDot = (ImageView) rowView.findViewById(R.id.rowIcon);

 final View finalRowView = rowView;
 final ViewHolder finalViewHolder = viewHolder;

 //Change is here
 myHandler.postDelayed(viewHolder.mRunnable, 3000);

 return rowView;
}