使用Picasso库与圆形ImageView

Question

我打算使用Picasso库从URL下载图片并将其传递到圆形imageview中，但由于Picasso要求传递一个实际的imageView，我不知道该如何做。

我正在使用这里的Picasso库http://square.github.io/picasso/ 和这里的CircleImageView类https://github.com/hdodenhof/CircleImageView

以下是获取图片的代码开头：

private void getData() {

    userName.setText(prefs.getString("userName",""));
    jobTitle.setText(prefs.getString("profile",""));
    userLocation.setText(prefs.getString("location",""));




    // ??????    

    // Picasso.with(context).load(image link here).into(imageview here);

    //CircleImageView img = new CircleImageView(this);
    //img.setImageResource();
    //img.setImageBitmap();
    //img.setImageDrawable();
    //img.setImageURI();

}

编辑：

这里是圆形图像视图的 XML。

<michael.CircleImageView
 android:layout_width="100dp"
 android:layout_height="100dp"
 android:src="@drawable/shadow"
 android:layout_gravity="center"
 android:layout_marginTop="16dp"
 app:border_width="2dp"
 app:border_color="#274978"
 android:id="@+id/circleImageView"

- MichaelStoddart

Answer 1

我认为您不需要使用CircleImageView库。

您可以实现圆形转换，请查看下面的代码片段。

https://gist.github.com/julianshen/5829333

然后

Picasso.with(activity).load(image link here)
     .transform(new CircleTransform()).into(ImageView);

- Yogesh Narayanan

---

谢谢，这个方法可行，但是我选择了另一个答案，因为它允许我仍然保留circleImageView周围的边框。 - MichaelStoddart

没问题，您也可以使用转换来处理边框。请检查上述代码片段的注释或参考 https://gist.github.com/berkkaraoglu/ab4caa8b1fe48231dec2。 - Yogesh Narayanan

Answer 2

使用此功能

活动类

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String imageUrl = "https://www.baby-connect.com/images/baby2.gif";

        CircleImageView imageView = (CircleImageView) findViewById(R.id.image);

        Picasso.with(getApplicationContext()).load(imageUrl)
                .placeholder(R.drawable.images).error(R.drawable.ic_launcher)
                .into(imageView);
    }
}

布局文件

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/image"
    android:layout_width="160dp"
    android:layout_height="160dp"
    android:layout_centerInParent="true"
    android:src="@drawable/images"
    app:border_color="#ffffff"
    app:border_width="2dp" />

这个正常工作。

- Sandeep Singh

Answer 3

使用以下代码创建圆形ImageView....

public class RoundedImageView extends ImageView {

public RoundedImageView(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
}

public RoundedImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public RoundedImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

@Override
protected void onDraw(Canvas canvas) {

    Drawable drawable = getDrawable();

    if (drawable == null) {
        return;
    }

    if (getWidth() == 0 || getHeight() == 0) {
        return; 
    }
    Bitmap b =  ((BitmapDrawable)drawable).getBitmap() ;
    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

    int w = getWidth(), h = getHeight();


    Bitmap roundBitmap =  getCroppedBitmap(bitmap, w);
    canvas.drawBitmap(roundBitmap, 0,0, null);

}

public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
    Bitmap sbmp;
    if(bmp.getWidth() != radius || bmp.getHeight() != radius)
        sbmp = Bitmap.createScaledBitmap(bmp, radius, radius, false);
    else
        sbmp = bmp;
    Bitmap output = Bitmap.createBitmap(sbmp.getWidth(),
            sbmp.getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xffa19774;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());

    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.parseColor("#BAB399"));
    canvas.drawCircle(sbmp.getWidth() / 2+0.7f, sbmp.getHeight() / 2+0.7f,
            sbmp.getWidth() / 2+0.1f, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(sbmp, rect, rect, paint);


            return output;
}

}

- Quick learner

Answer 4

首先获取CircleImageView的ID：

CircleImageView mCircleImageView = (CircleImageView)findViewById(R.id.circleImageView);

将ID传递给Picasso库：

Picasso.with(mContext).load(Uri.parse(link)).placeholder(drawable).into(mCircleImageView);

这对我起作用了。

- madhuri H R

Answer 5

我创建了一个目标类，使用原生Android的RoundedBitmapDrawable类来制作圆形图片（无需添加圆形转换类到代码中），请参见下面的解决方案：

public class RoundedImageBitmapTarget implements Target {

    private final Context context;
    private final ImageView view;

    public RoundedImageBitmapTarget(Context context, ImageView view) {
        this.context = context;
        this.view = view;
    }

    @Override
    public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
        setBitmap(bitmap);
    }

    @Override
    public void onBitmapFailed(Drawable errorDrawable) {
        setBitmap(((BitmapDrawable) errorDrawable).getBitmap());
    }

    @Override
    public void onPrepareLoad(Drawable placeHolderDrawable) {
        setBitmap(((BitmapDrawable) placeHolderDrawable).getBitmap());
    }

    public void setBitmap(Bitmap bitmap) {
        view.setImageDrawable(getRoundBitmap(context, bitmap));
    }

    public static RoundedBitmapDrawable getRoundBitmap(Context context, Bitmap bitmap) {
        Resources res = context.getResources();
        RoundedBitmapDrawable round = RoundedBitmapDrawableFactory.create(res, bitmap);
        round.setCircular(true);
        round.setTargetDensity(context.getResources().getDisplayMetrics());
        return round;
    }

    public static void load(Context context, ImageView view, String url, int size, @DrawableRes int placeholder) {
        RoundedImageBitmapTarget target;
        Picasso.with(context).load(url)
                .resize(0, size)
                .placeholder(placeholder)
                .error(placeholder)
                .into(target = new RoundedImageBitmapTarget(context, view));
        view.setTag(target);
    }

}

- Kevin Crain