Android Glide库与共享元素转换不兼容。

Question

我想使用 Glide 库 代替 Universal Image Loader，但是在共享元素过渡方面遇到了问题。

我创建了一个简单的沙盒，并使用 UIL 创建了以下过渡效果：https://dl.dropboxusercontent.com/u/97787025/device-2015-06-18-113333.mp4

非常简单，而且运行良好。但当我使用 Glide 时，它看起来不太好：https://dl.dropboxusercontent.com/u/97787025/device-2015-06-18-114508.mp4

这是我正在使用的代码：

第一个活动：

public class MainActivity extends BaseActivity {

    @Override
    public void onCreate(Bundle bundle) {
        super.onCreate(bundle);
        setContentView(R.layout.main);

        final ImageView iv = (ImageView) findViewById(R.id.main_image);

        displayImageGlide(BaseActivity.IMAGE_URL, iv, true);

        Button button = (Button) findViewById(R.id.main_button);
        button.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                Intent intent = new Intent(getApplicationContext(), DifferentActivity.class);
                startActivity(intent, iv);
            }

        });
    }

}

还有第二个：

public class DifferentActivity extends BaseActivity {

    @Override
    public void onCreate(Bundle bundle) {
        super.onCreate(bundle);

        setContentView(R.layout.different);

        ImageView imageView = (ImageView) findViewById(R.id.diff_image);

        displayImageGlide(BaseActivity.IMAGE_URL, imageView, false);
    }

}

BaseActivity 只包含 displayImageGlide

public void displayImageGlide(String url, ImageView imageView) {
    Glide.with(this).load(url)
            .asBitmap().transform(new CustomTransformation(this))
            .skipMemoryCache(true)
            .diskCacheStrategy(DiskCacheStrategy.SOURCE)
            .into(imageView);
}

private static class CustomTransformation extends BitmapTransformation {

    public CustomTransformation(Context context) {
        super(context);
    }

    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return bitmapChanger(toTransform, outWidth, outHeight);
    }

    @Override
    public String getId() {
        return "some_id_1";
    }

}

private static Bitmap bitmapChanger(Bitmap bitmap, int desiredWidth, int desiredHeight) {
    float originalWidth = bitmap.getWidth();
    float originalHeight = bitmap.getHeight();

    float scaleX = desiredWidth / originalWidth;
    float scaleY = desiredHeight / originalHeight;

    //Use the larger of the two scales to maintain aspect ratio
    float scale = Math.max(scaleX, scaleY);

    Matrix matrix = new Matrix();

    matrix.setScale(scale, scale);

    //If the scaleY is greater, we need to center the image
    if(scaleX < scaleY) {
        float tx = (scale * originalWidth - desiredWidth) / 2f;
        matrix.postTranslate(-tx, 0f);
    }

    Bitmap result = Bitmap.createBitmap(desiredWidth, desiredHeight, bitmap.getConfig() != null ? bitmap.getConfig() : Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(result);
    canvas.drawBitmap(bitmap, matrix, new Paint());
    return result;
}

我试过从Glide Builder中删除缓存行（用于防止对我正在调整的内容进行缓存），但这并没有帮助。很想采用Glide，但如果这样行不通，那就有些破坏协议了。如果有人有一些建议，那我会非常感谢，谢谢！

- JMRboosties

---

我没有使用过Glide，但我猜测转换会在动画期间即时切换图像，这可能导致卡顿。在ImageView上设置android:scaleType="centerCrop"不就可以解决问题了吗？ - Markus Rubey

centerCrop并不是我想要的缩放类型，CustomTransformation方法应用自定义矩阵到位图上，可以产生一个适合边界的图像。 - JMRboosties

Answer 1

我尝试了你的代码并得到相同的结果，然后我尝试了另一种实现方式，参考了这个链接：https://github.com/codepath/android_guides/wiki/Shared-Element-Activity-Transition

我进行了一些更改，我认为这些更改是关键：

在ImageView上应该设置centerCrop属性，如果我们使用Glide设置它会导致相同的错误。 activity_main.xml

    <ImageView
      android:id="@+id/ImageView"
      android:layout_width="match_parent"
      android:layout_height="150dp"
      android:layout_centerInParent="true"
      android:transitionName="detail_image"
      android:scaleType="centerCrop"
    />

BaseActivity.java MainActivity中的dontTransform应该为true，在DifferentActivity中为false。

    public void displayImageGlide(String url, ImageView imageView, Boolean dontTransform) {
    if (dontTransform) {
        Glide.with(this).load(url)
                .skipMemoryCache(true)
                .diskCacheStrategy(DiskCacheStrategy.SOURCE)
                .dontTransform()
                .into(imageView);
        return;
    }

        Glide.with(this).load(url)
                .skipMemoryCache(true)
                .diskCacheStrategy(DiskCacheStrategy.SOURCE)
                .into(imageView);
   }

编辑，看看效果： https://www.dropbox.com/s/30s5l8awxogltls/device-2015-06-23-153153.mp4?dl=0

- Rodrigo Direito

---

这个回应的问题是它没有使用我想要我的图片使用的顶部居中矩阵。 - JMRboosties

我也遇到了同样的问题，你能提供完整的实现吗？谢谢！ - user1436497

这里的解决方案仅适用于从裁剪的缩略图到完整大小的图像。如果您的原始图像很高，则居中裁剪将导致其被拉伸，从而使背景动画看起来不好。 - user1325843

Answer 2

对于那些在使用Glide时遇到SharedElementTransition问题的人，我认为我有一个解决办法，或者至少它对我有效。在你的第二个Activity或Fragment中，使用以下代码：

postponeEnterTransition();
GlideApp.with(this)
        .load(imageToLoad)
        .listener(new RequestListener<Drawable>() {
            @Override
            public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                return false;
            }

            @Override
            public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                startPostponedEnterTransition();
                return false;
            }
        })
        .into(imageView);

如果你的目标API小于21，请使用以下代码：

supportPostponeEnterTransition();
supportStartPostponedEnterTransition();

希望这能有所帮助！

- Seven

---

谢谢，直到看到了你的回答之前我都找不到一个好的解决方案，现在很好用！ - Bruce