ImageView的src与background的区别分析

1、概述

在日常开发中， 我们经常用到ImageView的src和background属性。从名称上，可以看出background是作为背景展示的，而src是作为内容源，个人理解为前景展示的。所以，二者都可以用来展示某个drawable。但是，对于不同大小的ImageView二者的表现却有很大的区别。

2、android:background属性

该属性即为ImageView设置相应的背景，可以为图片也可以为颜色值。

若background设置的是图片，同时宽或高设置为match_parent或者固定值，那么该图片会被拉伸以填满整个ImageView区域。如果宽或高设置为wrap_content，那么图片按照自身大小显示，不会被拉伸。

若background设置为颜色值，那么ImageView整个区域都会被该颜色值填充。当ImageView仅仅设置了背景颜色而没有设置src，且宽或者高被设置为wrap_content时，则该View将不会显示。

3、android:src属性

该属性为ImageView设置显示内容，可以为图片也可以为颜色值。

设置为颜色值时其表现同background。但是设置为图片时，src属性的表现形式会受到ImageView大小和scaleType属性的共同影响，所以其使用更加灵活。通过查看ImageView的setScaleType方法，可以了解scaleType的取值有如下8种枚举值：

MATRIX，FIT_XY，FIT_START，FIT_CENTER，FIT_END，CENTER，CENTER_CROP，CENTER_INSIDE

当ImageView没有指定scaleType时，则默认的scaleType类型为CENTER。如下图：



图1 initImageView代码

3.1、Matrix

对应的android:scaleType属性值为 “matrix”。即可以通过Matrix矩阵来控制图片的表现形式。

如果设置为matrix，那么该图片将会按照图片大小进行显示，如果ImageView过小则会进行截取图片相应部分显示。



图2 matrix示例1



图3 matrix示例2

利用Matrix提供的方法可以灵活的控制ImageView进行图像的变换操作。如移动，缩放，倾斜，镜像等，如下图：



图4 matrix控制图像

从上图可以看出， Matrix操作的对象是其中的内容。 如通过matrix使ImageView平移时移动的是其内容而不是整个ImageView。这与TranslateAnimation动画是不同的。

3.2、FIT_XY

对应的android:scaleType属性为“fitXY”，该属性值会在x和y方向上单独缩放图片使图片完全填充ImageView。与设置background相似。

源码中解释如下：

Compute a scale that will maintain the original src aspect ratio,but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. START aligns the result to the left and top edges of dst.

3.3、FIT_START

对应的android:scaleType属性为“fitStart”。该属性会在保持宽高比的情况下，完全填充x方向或者y方向。同时与ImageView的左边和上边对齐。



图5 fitStart示例

3.4、FIT_CENTER

对应的android:scaleType属性为”fitCenter“。该属性与FIT_START类似，也会保持宽高比，完全填充x方向或者y方向。但是图片居中与ImageView对齐。在未设置scaleType的情况下，默认即是FIT_CENTER方式进行缩放的。



图6 fitCenter示例

3.5、FIT_END

对应的android:scaleType属性为”fitEnd”。该属性与FIT_START类似， 也会保持宽高比，完全填充x方向或者y方向。但是图片与ImageView的右边和下边对齐。



图7 fitEnd

3.6、CENTER

对应的android:scaleType属性为“center”。该属性不会缩放图片，按照原图展示。 且与ImageView居中对齐。

3.7、CENTER_CROP

对应的android:scaleType属性为”centerCrop”。该属性会按照图片的宽高比进行缩放，使其宽或高都大于或等于ImageView的宽或高（即宽或者高其中之一要等于ImageView的宽或者高其中之一，而另一则要大于ImageView对应的另一）然后从居中部分截取图片填充ImageView。如下图示例：



图8 centerCrop示意图

3.8、CENTER_INSIDE

对应的android:scaleType属性为“centerInside”。该属性会按照图片的宽高比进行缩放，但CENTER_INSIDE会使其宽或高都小于或等于ImageView的宽或高（若图片宽高均小于ImageView

宽高，则按原图居中显示）然后从居中部分截取图片填充ImageView。如下图示例：



图9 centerInside示意图

4、说明

以上实验均设置ImageView的宽高度为match_parent。如果将宽或者高设置为warp_content，则对于FIT_START，FIT_CENTER，FIT_END均不会进行缩放，只是显示位置不同而已。CENTER_CROP和CNTER_INSIDE也类似，设置了wrap_content则相当于在该方向上已经完全填充了ImageView。

5、总结

（1）、android:background 即为View设置背景。

（2）、android:src 为ImageView设置内容。设置了src属性时，其内容的填充方式可以通过android:scaleType方式设置。默认为FIT_CENTER，即保持宽高比缩放且居中显示。

（3）、将scaleType设置为Matrix时可以利用Matrix实现一些图像变换。