android学习笔记之ImageView的scaleType属性

我们知道，ImageView有一个属性叫做scaleType，它的取值一共有八种，分别是：matrix，fitXY，fitStart，fitCenter，fitEnd，center，centerCrop，centerInside。那我们下面一起来看看这八种取值分别代表什么意思。

我用两张图片来做demo，这两张图片的分辨率一大一小，图片分别叫做big和small。原图如下：

big:

small:

OK，准备工作已经完成。

matrix

matrix表示原图从ImageView的左上角开始绘制，如果原图大于ImageView，那么多余的部分则剪裁掉，如果原图小于ImageView，那么对原图不做任何处理。比如我的两张大小不同的图片，分别显示在96dp×96dp的ImageView上，会有不同的效果，代码如下：

[java]  view plain  copy

 print ?

1. <ImageView  
2.     android:layout_width="96dp"  
3.     android:layout_height="96dp"  
4.     android:adjustViewBounds="false"  
5.     android:background="#ffaa77"  
6.     android:scaleType="matrix"  
7.     android:src="@drawable/big" />  
8.   
9. <ImageView  
10.     android:layout_width="96dp"  
11.     android:layout_height="96dp"  
12.     android:adjustViewBounds="false"  
13.     android:background="#aa99cc"  
14.     android:scaleType="matrix"  
15.     android:src="@drawable/small" />  

显示效果如下：

我们看到，big图片由于比较大，因此只有左上角显示出来了，其他部分则被剪裁掉了，而small图片由于分辨率比较小，因此完整的显示在ImageView的左上角。

fitXY

fitXY的目标是填充整个ImageView，为了完成这个目标，它需要对图片进行一些缩放操作，在缩放的过程中，它不会按照原图的比例来缩放。比如下面一个栗子：

[java]  view plain  copy

 print ?

1. <ImageView  
2.     android:layout_width="96dp"  
3.     android:layout_height="96dp"  
4.     android:background="#ffaa77"  
5.     android:scaleType="fitXY"  
6.     android:src="@drawable/big" />  
7.   
8. <ImageView  
9.     android:layout_width="96dp"  
10.     android:layout_height="128dp"  
11.     android:background="#aa99cc"  
12.     android:scaleType="fitXY"  
13.     android:src="@drawable/small" />  

显示效果如下：

两张图片都被显示出来了，但是都有一定程度的变形，因为在这里系统只考虑将ImageView填充满，而不会按照原图比例去缩放。

fitStart

将图片按比例缩放至View的宽度或者高度（取宽和高的最小值），然后居上或者居左显示（与前面缩放至宽还是高有关），我们来看下面一个例子：

[java]  view plain  copy

 print ?

1. <ImageView  
2.     android:layout_width="48dp"  
3.     android:layout_height="256dp"  
4.     android:background="#ffaa77"  
5.     android:scaleType="fitStart"  
6.     android:src="@drawable/big" />  
7.   
8. <ImageView  
9.     android:layout_width="256dp"  
10.     android:layout_height="36dp"  
11.     android:background="#aa99cc"  
12.     android:scaleType="fitStart"  
13.     android:src="@drawable/small" />  

显示效果：

big图片是缩放至ImageView的宽度，然后居上显示，small图片是缩放至ImageView的高度，然后居左显示。

fitCenter

fitCenter和fitStart基本一样，唯一不同的是fitCenter将图片按比例缩放之后是居中显示，看下面一个例子：

[java]  view plain  copy

 print ?

1. <ImageView  
2.     android:layout_width="48dp"  
3.     android:layout_height="256dp"  
4.     android:background="#ffaa77"  
5.     android:scaleType="fitCenter"  
6.     android:src="@drawable/big" />  
7.   
8. <ImageView  
9.     android:layout_width="256dp"  
10.     android:layout_height="48dp"  
11.     android:background="#aa99cc"  
12.     android:scaleType="fitCenter"  
13.     android:src="@drawable/small" />  

显示效果如下：

fitEnd

fitEnd和fitStart也基本一样，唯一不同的是fitEnd将图片按比例缩放之后是居右或者居下显示，比如下面一个Demo：

[java]  view plain  copy

 print ?

1. <ImageView  
2.     android:layout_width="48dp"  
3.     android:layout_height="256dp"  
4.     android:background="#ffaa77"  
5.     android:scaleType="fitEnd"  
6.     android:src="@drawable/big" />  
7.   
8. <ImageView  
9.     android:layout_width="256dp"  
10.     android:layout_height="48dp"  
11.     android:background="#aa99cc"  
12.     android:scaleType="fitEnd"  
13.     android:src="@drawable/small" />  

center

center表示将原图按照原来的大小居中显示，如果原图的大小超过了ImageView的大小，那么剪裁掉多余部分，只显示中间一部分图像，比如下面一个Demo：

[java]  view plain  copy

 print ?

1. <ImageView  
2.     android:layout_width="48dp"  
3.     android:layout_height="256dp"  
4.     android:background="#ffaa77"  
5.     android:scaleType="center"  
6.     android:src="@drawable/big" />  
7.   
8. <ImageView  
9.     android:layout_width="256dp"  
10.     android:layout_height="24dp"  
11.     android:background="#aa99cc"  
12.     android:scaleType="center"  
13.     android:src="@drawable/small" />  

显示效果如下：

centerCrop

centerCrop的目标是将ImageView填充满，故按比例缩放原图，使得可以将ImageView填充满，同时将多余的宽或者高剪裁掉,比如下面一个Demo :

[java]  view plain  copy

 print ?

1. <ImageView  
2.     android:layout_width="48dp"  
3.     android:layout_height="256dp"  
4.     android:background="#ffaa77"  
5.     android:scaleType="centerCrop"  
6.     android:src="@drawable/big" />  
7.   
8. <ImageView  
9.     android:layout_width="256dp"  
10.     android:layout_height="48dp"  
11.     android:background="#aa99cc"  
12.     android:scaleType="centerCrop"  
13.     android:src="@drawable/small" />  

显示效果如下：

centerInsid

centerInside的目标是将原图完整的显示出来，故按比例缩放原图，使得ImageView可以将原图完整显示，比如下面一个Demo：

[java]  view plain  copy

 print ?

1. <ImageView  
2.     android:layout_width="48dp"  
3.     android:layout_height="256dp"  
4.     android:background="#ffaa77"  
5.     android:scaleType="centerInside"  
6.     android:src="@drawable/big" />  
7.   
8. <ImageView  
9.     android:layout_width="256dp"  
10.     android:layout_height="48dp"  
11.     android:background="#aa99cc"  
12.     android:scaleType="centerInside"  
13.     android:src="@drawable/small" />  

显示效果如下：

OK，关于scaleType属性我们就说这么多，一般情况下，当我们给ImageView的宽高都为固定值的时候我们才有可能用到这些属性。

Demo下载