大圆图片:200px*100px
小圆图片:100px*80px
1.1 ImageView的宽高都大于图片
大圆:ImageView:500px*300px
小圆:ImageView:200px*100px
此时大圆与原始图片的宽高比分别如下:
1.2 ImageView的宽高都小于图片
大圆:ImageView:190px*90px
小圆:ImageView:200px*100px
此时大圆与原始图片的宽高比分别如下:
宽比为19:20,高比为9:10
2.1 android:scaleType=”matrix”时
大圆:ImageView:match_parent*500px
小圆:ImageView:200px*100px
2.2 android:scaleType=”fitXY”时
大圆:ImageView:match_parent*500px
小圆:ImageView:200px*100px
2.3 android:scaleType=”fitStart”时
大圆:ImageView:300px*100px
小圆:ImageView:200px*100px
此时大圆与原始图片的宽高比分别如下:
宽比为3:2,高比为1:1
从上面的图片可以看出当大圆的宽比大于高比时,图片根据ImageView给定的宽进行缩放之后,将图片置于ImageView的左侧;当大圆的宽比小于高比时,图片根据ImageView给定的高进行缩放之后,将图片置于ImageView的顶部。
2.4 android:scaleType=”fitEnd”时
大圆:ImageView:300px*100px
小圆:ImageView:200px*100px
此时大圆与原始图片的宽高比分别如下:
宽比为3:2,高比为1:1
大圆:ImageView:300px*200px
小圆:ImageView:200px*100px
此时大圆与原始图片的宽高比分别如下:
宽比为3:2,高比为2:1
从上面的图片可以看出当大圆的宽比大于高比时,图片根据ImageView给定的宽进行缩放之后,将图片置于ImageView的右侧;当大圆的宽比小于高比时,图片根据ImageView给定的高进行缩放之后,将图片置于ImageView的低部。
2.5 android:scaleType=”fitCenter”时
大圆:ImageView:300px*100px
小圆:ImageView:200px*100px
此时大圆与原始图片的宽高比分别如下:
宽比为3:2,高比为1:1
大圆:ImageView:300px*200px
小圆:ImageView:200px*100px
此时大圆与原始图片的宽高比分别如下:
宽比为3:2,高比为2:1
从上面的图片可以看出当大圆的宽比大于高比时,图片根据ImageView给定的高进行缩放之后,将图片置于ImageView的中间位置,同时在ImageView宽的两侧留下相等的剩余空间;当大圆的宽比小于高比时,图片根据ImageView给定的宽进行缩放之后,将图片置于ImageView的中间位置,同时在ImageView高的两侧留下相等的剩余空间;
2.6 android:scaleType=”centerCrop”时
大圆:ImageView:300px*100px
小圆:ImageView:200px*100px
此时大圆与原始图片的宽高比分别如下:
宽比为3:2,高比为1:1
大圆:ImageView:50px*100px
小圆:ImageView:200px*100px
此时大圆与原始图片的宽高比分别如下:
宽比为3:2,高比为2:1
从上面的图片可以看出当大圆的宽比大于高比时,图片根据ImageView给定的宽进行缩放,同时裁掉高中多余的部分;当大圆的宽比小于高比时,图片根据ImageView给定的高进行缩放,同时裁掉宽中多余的部分。
2.7 android:scaleType=”center”时
大圆:ImageView:700px*100px
小圆:ImageView:200px*100px
此时大圆与原始图片的宽高比分别如下:
宽比为7:2,高比为1:1
大圆:ImageView:200px*400px
小圆:ImageView:200px*100px
此时大圆与原始图片的宽高比分别如下:
宽比为1:1,高比为4:1
大圆:ImageView:200px*100px
小圆:ImageView:200px*100px
此时大圆与原始图片的宽高比分别如下:
宽比为1:1,高比为1:1
由于每个设备的屏幕密度不一致,所以当设置ImageView的layout_width和layout_height的值都为wrap_content时发现大圆图片在当前设备展示的大小是大于200px*100px的。不过200px*100px的展示效果相对于原图来说它的宽比和高比都是一致的,所以不影响2.6节之前的探索。
从上面的图片可以看出当ImageView的宽大于原始图片的宽并且ImageView的高小于原始图片的高时,那么图片在宽的方向上将会按原始尺寸显示而在高的方向上将会裁掉多余的部分;反之,依然。当ImageView的宽高均小于图片的原始宽高时,ImageView只会显示原始图片的最中间的位置裁掉宽高的多余部分。
总而言之,当scaleType的值为center时,图片将会以自身大小展示不进行任何缩放。ImageView则会根据自身尺寸的大小从图片的中心位置来展示图片。
2.8 android:scaleType=”centerInside”时
大圆:ImageView:300px*100px
小圆:ImageView:200px*100px
此时大圆与原始图片的宽高比分别如下:
宽比为3:2,高比为1:1
大圆:ImageView:300px*200px
小圆:ImageView:200px*100px
此时大圆与原始图片的宽高比分别如下:
宽比为3:2,高比为2:1
从上面的图片可以看出当大圆的宽比大于高比时,图片根据ImageView给定的高进行缩放之后,将图片置于ImageView的中间位置,同时在ImageView宽的两侧留下相等的剩余空间;当大圆的宽比小于高比时,图片根据ImageView给定的宽进行缩放之后,将图片置于ImageView的中间位置,同时在ImageView高的两侧留下相等的剩余空间。跟2.5节的效果相比不难发现fitCenter和centerInside的作用是一致。
最后上两张图来帮助理解这八种类型的区别
参考文章:
android学习笔记之ImageView的scaleType属性
Demo源码