我们知道,ImageView有一个属性叫做scaleType,它的取值一共同拥有八种,各自是:matrix,fitXY。fitStart,fitCenter。fitEnd,center,centerCrop。centerInside。
那我们以下一起来看看这八种取值分别代表什么意思。
我用两张图片来做demo,这两张图片的分辨率一大一小,图片分别叫做big和small。原图例如以下:
big:
small:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
OK,准备工作已经完毕。
matrix
matrix表示原图从ImageView的左上角開始绘制。假设原图大于ImageView,那么多余的部分则剪裁掉,假设原图小于ImageView,那么对原图不做不论什么处理。比方我的两张大小不同的图片。分别显示在96dp×96dp的ImageView上,会有不同的效果,代码例如以下:
<ImageView android:layout_width="96dp" android:layout_height="96dp" android:adjustViewBounds="false" android:background="#ffaa77" android:scaleType="matrix" android:src="@drawable/big" /> <ImageView android:layout_width="96dp" android:layout_height="96dp" android:adjustViewBounds="false" android:background="#aa99cc" android:scaleType="matrix" android:src="@drawable/small" />
显示效果例如以下:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
我们看到,big图片因为比較大,因此仅仅有左上角显示出来了。其它部分则被剪裁掉了。而small图片因为分辨率比較小。因此完整的显示在ImageView的左上角。
fitXY
fitXY的目标是填充整个ImageView。为了完毕这个目标,它须要对图片进行一些缩放操作,在缩放的过程中。它不会依照原图的比例来缩放。比方以下一个栗子:
<ImageView android:layout_width="96dp" android:layout_height="96dp" android:background="#ffaa77" android:scaleType="fitXY" android:src="@drawable/big" /> <ImageView android:layout_width="96dp" android:layout_height="128dp" android:background="#aa99cc" android:scaleType="fitXY" android:src="@drawable/small" />
显示效果例如以下:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
两张图片都被显示出来了,可是都有一定程度的变形。因为在这里系统仅仅考虑将ImageView填充满,而不会依照原图比例去缩放。
fitStart
将图片按比例缩放至View的宽度或者高度(取宽和高的最小值),然后居上或者居左显示(与前面缩放至宽还是高有关),我们来看以下一个样例:
<ImageView android:layout_width="48dp" android:layout_height="256dp" android:background="#ffaa77" android:scaleType="fitStart" android:src="@drawable/big" /> <ImageView android:layout_width="256dp" android:layout_height="36dp" android:background="#aa99cc" android:scaleType="fitStart" android:src="@drawable/small" />
显示效果:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
big图片是缩放至ImageView的宽度,然后居上显示。small图片是缩放至ImageView的高度,然后居左显示。
fitCenter
fitCenter和fitStart基本一样,唯一不同的是fitCenter将图片按比例缩放之后是居中显示。看以下一个样例:
<ImageView android:layout_width="48dp" android:layout_height="256dp" android:background="#ffaa77" android:scaleType="fitCenter" android:src="@drawable/big" /> <ImageView android:layout_width="256dp" android:layout_height="48dp" android:background="#aa99cc" android:scaleType="fitCenter" android:src="@drawable/small" />
显示效果例如以下:
fitEnd
fitEnd和fitStart也基本一样。唯一不同的是fitEnd将图片按比例缩放之后是居右或者居下显示,比方以下一个Demo:
<ImageView android:layout_width="48dp" android:layout_height="256dp" android:background="#ffaa77" android:scaleType="fitEnd" android:src="@drawable/big" /> <ImageView android:layout_width="256dp" android:layout_height="48dp" android:background="#aa99cc" android:scaleType="fitEnd" android:src="@drawable/small" />
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
center
center表示将原图依照原来的大小居中显示,假设原图的大小超过了ImageView的大小,那么剪裁掉多余部分,仅仅显示中间一部分图像,比方以下一个Demo:
<ImageView android:layout_width="48dp" android:layout_height="256dp" android:background="#ffaa77" android:scaleType="center" android:src="@drawable/big" /> <ImageView android:layout_width="256dp" android:layout_height="24dp" android:background="#aa99cc" android:scaleType="center" android:src="@drawable/small" />
显示效果例如以下:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
centerCrop
centerCrop的目标是将ImageView填充满,故按比例缩放原图,使得能够将ImageView填充满。同一时候将多余的宽或者高剪裁掉,比方以下一个Demo :
<ImageView android:layout_width="48dp" android:layout_height="256dp" android:background="#ffaa77" android:scaleType="centerCrop" android:src="@drawable/big" /> <ImageView android:layout_width="256dp" android:layout_height="48dp" android:background="#aa99cc" android:scaleType="centerCrop" android:src="@drawable/small" />
显示效果例如以下:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
centerInsid
centerInside的目标是将原图完整的显示出来。故按比例缩放原图。使得ImageView能够将原图完整显示,比方以下一个Demo:
<ImageView android:layout_width="48dp" android:layout_height="256dp" android:background="#ffaa77" android:scaleType="centerInside" android:src="@drawable/big" /> <ImageView android:layout_width="256dp" android:layout_height="48dp" android:background="#aa99cc" android:scaleType="centerInside" android:src="@drawable/small" />
显示效果例如以下:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />
OK。关于scaleType属性我们就说这么多。普通情况下,当我们给ImageView的宽高都为固定值的时候我们才有可能用到这些属性。