Android ImageView 之 ScaleType 详解

2016-08-23 本文已影响329人 Lstone

基础储备

在 ImageView 中有一个成员变量mDrawMatrix,这个变量是Matrix（矩阵）类型,我们了解一下这个Matrix类，Matrix 常见的方法有setScale(sx,sy) ,setTranslate(float dx, float dy)等方法. 在设置了mDrawMatrix的一系列方法后, 当ImageView方法里的 onDraw（canvas）执行时候，canvas 会根据mDrawMatrix设置的值对图片资源(bitmap)的绘制进行相应的变换.
例如:

当mDrawMatrix.setTranslate(10,10)时,在执行 ImageView 的 onDraw(canvas)方法时候,canvas 在对图片(bitmap)进行绘制的时候，会将图片资源在在 x,y 轴两个方向上分别偏移10px.
当mDrawMatrix.setScale(1.5f,1.5f)时,canvas 在对图片(bitmap)进行绘制的时候，会将图片资源放大1.5f 倍

基础储备部分一定要理解,也是下面文章的核心部分

Tips

在我们实验的时候我们要考虑图片与 ImageView的以下几种关系：

图片的宽高大于 ImageView 的宽高
图片的宽高小于 ImageView 的宽高
图片的宽大于 ImageView 的宽,图片的高小于 ImageView 的高
图片的高大于 ImageView 的高,图片的宽小于 ImageView 的宽
不同的情况得到的结果也可能会不一样.

setScaleType()是什么？

在平常开发中我们加载得到图片有可能与 ImageView 的大小不一样（如果 ImageView 大小是固定的）,图片在 ImageView中应该怎么显示？这就需要我们使用setScaleType（ScaleType scaleType）去设置,该方法主要用于调整图片大小来适应 ImageView 的大小,ScaleType 是 ImageView 的一个内部枚举类型，通过源码该枚举类有如下八个类型：

public enum ScaleType {    
      MATRIX      (0),
      FIT_XY      (1),
      FIT_START   (2), 
      FIT_CENTER  (3),    
      FIT_END     (4),    
      CENTER      (5),  
      CENTER_CROP (6),   
      CENTER_INSIDE (7);
      ScaleType(int ni) {        
           nativeInt = ni;    
      }    
      final int nativeInt;
}

ImageView的默认的ScaleType 是什么？

在 ImageView 的构造方法中调用了initImageView()方法，在该方法中我们看到 ImageView 的 mScaleType 的默认值是 FIT_CENTER

private void initImageView() {    
            mMatrix     = new Matrix();   
            mScaleType  = ScaleType.FIT_CENTER;    
            ........
 }

setImageDrawable()执行过程

setScaleType（）方法设置的ScaleType值不同, 可以得到图片在 ImageView 中不同的显示结果.当为 ImageView设置一个图片资源的时候使用setImageDrawable(drawable)

    public void setImageDrawable(@Nullable Drawable drawable) {
            ...... 
            updateDrawable(drawable);
            ......
            //调用 onDraw()方法，重新绘制
            invalidate();
    }

setImageDrawable()方法调用了updateDrawable(drawable)方法,保存了 drawable 的宽和高.

    private void updateDrawable(Drawable d) {    
        ....
        mDrawable = d;
        if (d != null) {        
            ......
            //mDrawable 的宽度
            mDrawableWidth = d.getIntrinsicWidth();            
           //mDrawable 的高度
            mDrawableHeight = d.getIntrinsicHeight();          
            ......
            configureBounds();
        } else {
            mDrawableWidth = mDrawableHeight = -1;          
        }
    }

接下来进入configureBounds()方法

    private void configureBounds() {
            ......
        //mDrawable 宽度
        int dwidth = mDrawableWidth;
        //mDrawable 高度
        int dheight = mDrawableHeight;
        //当前控件的宽度
        int vwidth = getWidth() - mPaddingLeft - mPaddingRight;
        //当前控件的高度
        int vheight = getHeight() - mPaddingTop - mPaddingBottom;
        boolean fits = (dwidth < 0 || vwidth == dwidth)&&(dheight < 0 || vheight == dheight);
        if (dwidth <= 0 || dheight <= 0 || ScaleType.FIT_XY == mScaleType) {
            /* If the drawable has no intrinsic size, or we're told to scaletofit, then we just fill our entire view.    */
            mDrawable.setBounds(0, 0, vwidth, vheight);
            mDrawMatrix = null;
        } else {
            // We need to do the scaling ourself, so have the drawable
            // use its native size.
            //根据不同的类型对mDrawMatrix做不同的处理
            mDrawable.setBounds(0, 0, dwidth, dheight);
            if (ScaleType.MATRIX == mScaleType) {
                ......
            } else if (fits) {
                ......
            } else if (ScaleType.CENTER == mScaleType) {
                ......
            }else if (ScaleType.CENTER_CROP == mScaleType) {   
                ......
            }else if (ScaleType.CENTER_INSIDE == mScaleType) {
                ......
            }else{
                ......
            }
    }

在configureBounds（）方法中我们看了一系列的对mScaleType值的判断,根据mScaleType值得不同对mDrawMatrix做一些处理.

setImageDrawable()方法中有这么一行代码invalidate();我们知道调用invalidate()方法会重新执行onDraw()方法.在前面我们已经说过,在 onDraw()方法里会根据mDrawMatrix对图片的绘制进行一系列的转换.

ScaleType.CENTER
else if (ScaleType.CENTER == mScaleType) {
// Center bitmap in view, no scaling.
mDrawMatrix = mMatrix;
mDrawMatrix.setTranslate(Math.round((vwidth - dwidth) * 0.5f), Math.round((vheight - dheight) * 0.5f));
}

根据mScaleType == ScaleType.CENTER部分的代码,我们可以知道canvas 在绘制图片的时候会对图(bitmap)片进行偏移

Untitled.png

结论：当为 ImageView 的 mScaleType == ScaleType.CENTER 时候,图片不放大也不缩小,图片在控件中居中显示,超出ImageView 部分不显示

ScaleType.CENTER_CROP
else if (ScaleType.CENTER_CROP == mScaleType) {
mDrawMatrix = mMatrix;
float scale;
float dx = 0, dy = 0;
if (dwidth/vwidth > dheight/vheight) {
scale = (float) vheight / (float) dheight;
dx = (vwidth - dwidth * scale) * 0.5f;
} else {
scale = (float) vwidth / (float) dwidth;
dy = (vheight - dheight * scale) * 0.5f;
}
mDrawMatrix.setScale(scale, scale);
mDrawMatrix.postTranslate(Math.round(dx), Math.round(dy));
}

从代码我们可以看到当绘制 bitmap 的时候，会对图片先进性缩放，缩放比例为 scale，再对图片进行偏移，偏移量为 dx,dy.
结论：图片的宽高一定会大于或者等于 ImageView 的宽高.居中显示,超出 ImageView 部分不显示. 图片的宽(高)至少有一个等于 ImageView 的宽（高）

CENTER_CROP.png

ScaleType.CENTER_INSIDE
else if (ScaleType.CENTER_INSIDE == mScaleType) {
mDrawMatrix = mMatrix;
float scale;
float dx;
float dy;
if (dwidth <= vwidth && dheight <= vheight) {
scale = 1.0f;
} else {
scale = Math.min((float) vwidth / (float) dwidth,(float) vheight / (float) dheight);
}
dx = Math.round((vwidth - dwidth * scale) * 0.5f);
dy = Math.round((vheight - dheight * scale) * 0.5f);
mDrawMatrix.setScale(scale, scale);
mDrawMatrix.postTranslate(dx, dy);
}

从代码上述代码中，根据mDrawMatrix 我们可以判断,当 ImageView 的onDraw(canvas)方法对图片(bitmap)进行绘制的时候,会对图片先进性缩放，在进行位移操作.if (dwidth <= vwidth && dheight <= vheight),当图片的宽高<ImageView的宽高时,图片不进行缩放,图片只居中显示.
结论: 当mScaleType的值为ScaleType.CENTER_INSIDE时,图片的宽高一定小于或者等于 ImageView 控件的宽高,图片居中显示.

ScaleType.MATRIX
if (ScaleType.MATRIX == mScaleType) {
// Use the specified matrix as-is.
if (mMatrix.isIdentity()) {
mDrawMatrix = null;
} else {
mDrawMatrix = mMatrix;
}
}
从mScaleType == ScaleType.MATRIX的代码中,将mMatrix赋值给了mDrawMatrix.可以通过调用 ImageView 的setImageMatrix(matrix)方法对mMatrix进行赋值.因此我们对 mMatrix做了什么操作,ImageView在 onDraw()方法在对图片进行绘制的时候就会对图片进行什么操作.

Other (一般值为ScaleType.FIT....)

  else {
     // Generate the required transform. 
     mTempSrc.set(0, 0, dwidth, dheight);    
     mTempDst.set(0, 0, vwidth, vheight);        
     mDrawMatrix = mMatrix;    
     mDrawMatrix.setRectToRect(mTempSrc, mTempDst, scaleTypeToScaleToFit(mScaleType));
  }

当mScaleType是ScaleType.FIT.... 类型的时候，系统并没有直接显式mDrawMatrix进行操作，而是调用了setRectToRect(RectF src, RectF dst, ScaleToFit stf)方法

  public boolean setRectToRect(RectF src, RectF dst, ScaleToFit stf) {      
      return native_setRectToRect(native_instance, src, dst, stf.nativeInt);
  }

在该方法中本地方法native_setRectToRect(native_instance, src, dst, stf.nativeInt);因此我们可以猜想可能是在本地方法中对mDrawMatrix做了一系列操作.下面给出ScaleType.FIT...结论

FIT_START
结论：图片的宽（高）一定小于或等于 ImageView 的宽高,图片的宽(高)至少有一个等于ImageView的宽(高),图片显示在 ImageView 的左（上）
FIT_CENTER
结论:图片的宽（高）一定小于或等于 ImageView 的宽高,图片的宽(高)至少有一个等于ImageView的宽(高),图片居中显示在 ImageView 中
FIT_END
结论:图片的宽（高）一定小于或等于 ImageView 的宽高,图片的宽(高)至少有一个等于ImageView的宽(高),图片显示在 ImageView 的右（下）

总结

本片文章中并没有列举例子取验证我们的结果.如果想要很好的了解,需要用户自己动手根据结论去验证,根据源码自己理解一下,当自己亲身试验一遍后，相信肯定会有所收获.