Giter Site home page Giter Site logo

jt0521 / glideplaceholderdrawable Goto Github PK

View Code? Open in Web Editor NEW

This project forked from wenhuayu/glideplaceholderdrawable

0.0 0.0 0.0 132 KB

解决Glide启用过渡时Placeholder变形问题

Home Page: https://www.jianshu.com/p/54bf089d0b04

Java 100.00%

glideplaceholderdrawable's Introduction

快捷使用帮助:

Step 1. Add the JitPack repository to your build file

    allprojects {
      repositories {
		...
		maven { url 'https://jitpack.io' }
      }
    }

Step 2. Add the dependency

dependencies {
        implementation 'com.github.WenHuayu:GlidePlaceholderDrawable:1.0.0'
}

Step 3. set placeholder

placeholder(new GlidePlaceholderDrawable(getResources(), R.drawable.placeholder)))

在项目中使用到了Glide图片加载库,但是在使用中遇到一些奇葩的现象,这里记录一下,如果大家也遇到相同的问题可以参考一下。

#####问题:当一次图片加载同时应用了placeholder占位符和crossFade过渡动画时,placeholder与图片的过渡非常不自然,有时候placeholder突变,有时候placeholder变形,十分影响视觉效果。

例如:

center.gif

center_crop.gif

center_inside.gif

fit_center.gif

  1. 图片加载成功之前placeholder样式不一,原因在于Glide是在成功加载图片之前,将placeholder作为普通图片设置到ImageView中的,所以placeholder会受ImageView的ScaleCrop属性影响,详见com.bumptech.glide.request.target.Target#onLoadStarted。
  2. 图片加载成功后开始过渡时placeholder有一次突变,原因在于placeholder与我们请求的图片过渡的时候,会将placeholder缩放至与请求的图片相同的尺寸。

######解决的思路比较简单,既然placeholder会受到神秘力量的缩放,并且这种缩放是必然的,我们可以将其反向缩放相应大小,则最终的图片结果还是原来的配方,还是原来的味道。

自定义Drawable包装一下placeholder,重写draw()方法实现我们的目的,核心代码

public GlidePlaceholderDrawable(Bitmap resource) {
    this.mHeight = resource.getHeight();
    this.mWidth = resource.getWidth();
    this.mResource = resource;
}

@Override
public void draw(@NonNull Canvas canvas) {
    //canvas.getMatrix()这个方法已经@Deprecated了,但是这里要实现功能不得不用,缩放,位移啊,数据都在matrix里了
    Matrix matrix = canvas.getMatrix();
    matrix.getValues(mMatrixValues);
    //由于缩放的中心是在左上角,而不是图片中心,故需要再平衡一下因为缩放造成的位移
    mMatrixValues[Matrix.MTRANS_X] = ((canvas.getWidth() - mWidth) / 2 - mMatrixValues[Matrix.MTRANS_X]) / mMatrixValues[Matrix.MSCALE_X];
    mMatrixValues[Matrix.MTRANS_Y] = ((canvas.getHeight() - mHeight) / 2 - mMatrixValues[Matrix.MTRANS_Y]) / mMatrixValues[Matrix.MSCALE_Y];
    //尺寸反向缩放
    mMatrixValues[Matrix.MSCALE_X] = 1 / mMatrixValues[Matrix.MSCALE_X];
    mMatrixValues[Matrix.MSCALE_Y] = 1 / mMatrixValues[Matrix.MSCALE_Y];
    matrix.setValues(mMatrixValues);
    canvas.drawBitmap(mResource, matrix, mPaint);
}

改进版:

new_center.gif

new_center_crop.gif

new_center_inside.gif

new_fit_center.gif

glideplaceholderdrawable's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.