基础储备
在 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 的右（下）
总结
本片文章中并没有列举例子取验证我们的结果.如果想要很好的了解,需要用户自己动手根据结论去验证,根据源码自己理解一下,当自己亲身试验一遍后，相信肯定会有所收获.
网友评论