Glide - 如何将圆形裁剪应用于错误图像？

Question

我可以使用 glide 成功地将图像加载到图像视图中，并使用 .circularCrop() 方法对其进行裁剪。

Glide.with(this)
     .load("https://i.imgur.com/QjQGiPj.jpeg")
     .circleCrop()
     .into(imageView);

我正在尝试添加错误占位符Drawable，如果加载的网址失败并显示.error(R.drawable.placeholder)。

这样做的问题是错误占位符没有使用圆形裁剪来裁剪错误图像。

加载成功：

加载失败：

如何将.circleCrop() 也应用于错误占位符图像？

我尝试将圆形可绘制背景添加到ImageView，但这不起作用

bgr_circular

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/white"/>
    <stroke android:width="1dp" android:color="@color/defaultHintColor"/>
</shape>

<ImageView
        android:id="@+id/image_view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/bgr_circular"/>

测试代码：

implementation 'com.github.bumptech.glide:glide:4.10.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.10.0'

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "MainActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView imageView = findViewById(R.id.image_view);
        Button button = findViewById(R.id.btn_test);
        button.setOnClickListener(v -> {
            Glide.with(this)
                    .load("https://i.imgur.com/QjQGiPj.jpe") //Test with incorrect url
                    .circleCrop()
                    .error(R.drawable.placeholder)
                    .into(imageView);
        });
    }

}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Load Image"/>

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/bgr_circular"/>

</LinearLayout>

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/white"/>
    <stroke android:width="1dp" android:color="@color/defaultHintColor"/>
</shape>

编辑 1：_________________________________________________________

我尝试使用 Glide 的 github 中的一种较旧的解决方案

https://github.com/bumptech/glide/issues/1212#issuecomment-221751860

但这并不完全奏效。

Bitmap placeholder = BitmapFactory.decodeResource(this.getResources(), R.drawable.placeholder);
RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(this.getResources(), placeholder);
        circularBitmapDrawable.setCircular(true);

        
Glide.with(this)
     .load("https://i.imgur.com/QjQGiPj.jpe")
     .circleCrop()
     .error(circularBitmapDrawable)
     .into(imageView);

Answer 1

您可以将 RoundedBitmapDrawable 用于带有 Glide 的圆形图像。无需自定义 ImageView

 Glide.with(context).load(url).asBitmap().centerCrop().into(new BitmapImageViewTarget(imageView) {
    @Override
    protected void setResource(Bitmap resource) {
        RoundedBitmapDrawable circularBitmapDrawable =
                RoundedBitmapDrawableFactory.create(context.getResources(), resource);
        circularBitmapDrawable.setCircular(true);
        imageView.setImageDrawable(circularBitmapDrawable);
    }
});