Как показать изображение с размытым фоном через Glide в Android? - PullRequest
Новая
       9

Как показать изображение с размытым фоном через Glide в Android?

1 голос
/ 14 февраля 2020

Цель - эффективное отображение изображения в центре с размытым фоном в ImageView через GLide. Максимальная высота изображения 200dp.

Goal

Temp. Решение: у меня есть два перекрывающихся ImageView (первый нижний ImageView имеет: android:scaleType="fitXY"): 

//Blurred background
<ImageView
    android:id="@+id/previewBackground"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="200dp"
    android:scaleType="fitXY"
    android:adjustViewBounds="true"/>

//Center image
<ImageView
    android:id="@+id/preview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="200dp"
    android:adjustViewBounds="true"/>

Два Glide:

Создать и Показать размытый фон: 

Glide.with(mCtx)
    .load(Uri.fromFile(file))
    .transition(DrawableTransitionOptions.withCrossFade())
    .placeholder(new ColorDrawable(Color.TRANSPARENT))
    .transform(new BlurTransformation(25, 3))
    .into(previewBackground);

Показать центральное изображение: 

Glide.with(mCtx)
    .load(Uri.fromFile(file))
    .transition(DrawableTransitionOptions.withCrossFade())
    .placeholder(new ColorDrawable(Color.TRANSPARENT))
    .into(preview);

Gradle: 

implementation 'com.github.bumptech.glide:glide:4.11.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
implementation 'jp.wasabeef:glide-transformations:4.1.0' //to use BlurTransformation

Проблемы :
Фон и центральное изображение загружается в разное время, потому что используется два GLides.
Возможно, плохая эффективность.

Я пробовал решение с одним Glide и одним ImageView:
.into(new CustomTarget<Drawable>() {...}, но есть проблема с GLide не знает ImageView размер, а placeholder и transition не работает.

следующая попытка ImageViewTarget: 

.into(new ImageViewTarget<Drawable>(preview) { //Have to be ImageViewTarget for placeholder and transition working
    @Override
      protected void setResource(@Nullable Drawable resource) {
        //preview.setScaleType(ImageView.ScaleType.FIT_XY);
        preview.setBackground(resource);
      }
})

placeholder и transition работают хорошо, но размытый фон не отображается, поскольку ширина размытого фона такая же, как и у центрального изображения. Когда я использую preview.setScaleType(ImageView.ScaleType.FIT_XY); центр изображения заполняет всю возможную ширину. Мне нужно показать изображение в центр с шириной и maxHeight 200dp, а размытый фон растянуть до максимальной ширины и maxHeight 200dp.

...