Android Studio中如何用Picasso将图片加载到ImageView的src属性

问题背景 #

使用Picasso从Firebase Storage加载图片到ImageView：

Picasso.get().load(obj.P_URI).into(profile);

但加载后图片丢失圆形轮廓，视觉上像是被设置到了background中，期望图片加载到ImageView的src属性并呈现圆形效果，对应的布局如下：

<androidx.cardview.widget.CardView
    android:id="@+id/cardView_profile_id"
    android:layout_width="@dimen/_45sdp"
    android:layout_height="@dimen/_45sdp"
    android:layout_marginStart="@dimen/_10sdp"
    android:layout_marginTop="@dimen/_10sdp"
    android:elevation="5dp"
    app:cardCornerRadius="360dp"
    app:layout_constraintEnd_toStartOf="@+id/home_name_id"
    app:layout_constraintBottom_toTopOf="@+id/home_HorizontalScrollView_id"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/home_profile_id"
        android:layout_width="@dimen/_43sdp"
        android:layout_height="@dimen/_43sdp"
        android:layout_gravity="center"
        android:background="@drawable/bg_circle"
        android:clipToOutline="true"
        android:outlineProvider="background"/>

</androidx.cardview.widget.CardView>

解决方案 #

方案1：调整ImageView属性实现裁剪 #

Picasso默认就是将图片设置到ImageView的src属性（通过setImageDrawable），当前问题是图片未被正确裁剪为圆形，只需补充以下设置：

• 给ImageView添加缩放类型，确保图片填满控件：

  android:scaleType="centerCrop"
  

• 确认bg_circle是正确的圆形shape drawable（示例如下）：

  <!-- res/drawable/bg_circle.xml -->
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="oval">
      <!-- 可选：添加边框 -->
      <stroke android:width="1dp" android:color="#CCCCCC"/>
      <solid android:color="#FFFFFF"/>
  </shape>
  

• 保持原有Picasso加载代码不变即可，图片会被clipToOutline裁剪为背景的圆形轮廓。

方案2：使用Picasso圆形转换直接加载圆形图片 #

如果不想依赖背景裁剪，可以让Picasso直接将图片处理为圆形：

1. 自定义圆形转换类：

   public class CircleTransformation implements Transformation {
       @Override
       public Bitmap transform(Bitmap source) {
           int size = Math.min(source.getWidth(), source.getHeight());
           int x = (source.getWidth() - size) / 2;
           int y = (source.getHeight() - size) / 2;
           Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
           if (squaredBitmap != source) {
               source.recycle();
           }
           Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());
           Canvas canvas = new Canvas(bitmap);
           Paint paint = new Paint();
           BitmapShader shader = new BitmapShader(squaredBitmap,
               Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
           paint.setShader(shader);
           paint.setAntiAlias(true);
           float r = size / 2f;
           canvas.drawCircle(r, r, r, paint);
           squaredBitmap.recycle();
           return bitmap;
       }
   
       @Override
       public String key() {
           return "circle";
       }
   }
   

2. 修改Picasso加载代码，应用转换：

   Picasso.get()
       .load(obj.P_URI)
       .transform(new CircleTransformation())
       .into(profile);
   

3. 此时可以移除ImageView的以下属性，因为图片本身已被处理为圆形：

   android:background="@drawable/bg_circle"
   android:clipToOutline="true"
   android:outlineProvider="background"
   

注意事项 #

• 确保Firebase Storage中对应的图片文件权限设置正确，允许应用访问该资源；
• 若使用方案1，CardView的app:cardCornerRadius="360dp"已实现圆形容器，ImageView的尺寸略小于CardView，可保留该层级实现阴影效果。

内容的提问来源于stack exchange，提问作者user2975634