⑴ 图文讲解Android ImageView的ScaleType,帮你彻底搞明白
一般来说,要把一张图片显示在ImageView上,有下面几个问题需要考虑:
在真实的产品环境中,一个ImageView的大小往往都是有限制的,至少长或宽有一条边是有限制的,所以,在ImageView上显示图片还需要考虑:
第二个问题,还可以细化成:
怎么样,简单的一个显示图片操作,就有这么多细节需要考虑。下面的章节,我们就抓住上面几点,通过实际的例子帮你理解ScaleType的各个属性值。
首先看下实际效果:
一句话总结FIT_XY:就是以不按原比例伸缩为代价,强制让图片充满ImageView ,同时图片所有的部分也会完整显示出来(虽然可能变形)。但是,因为其不按原比例伸缩的特点,真实的产品中不太常用,因为图片被拉伸变形往往是不可以接受的。(上面例子中的美女已经被拉伸的不成样子了)
还是先看下例子:
这个属性值的名称虽然是CENTER,但是和一般意义上的“居中”有很大不同。 这个属性值即不会保证填满ImageView,也不保证图片会完整显示。 当实际图片比ImageView小的时候,就是“居中显示”。当图片比ImageView大,就把图片中间的部分显示在ImageView里,其他的裁剪掉不显示。(上面第二组图尤其明显)
先看例子:
FIT_CENTER更接近于大家理解的“居中显示”,也是平时用的最多的一个值。 首先,这个属性会保证图片完整显示,不管图片和ImageView的大小关系。而且伸缩的时候是按照比例做的,所以图片质量也可以得到保证。 唯一的问题是,FIT_CENTER不保证会填满ImageView。对于大多数场景,这个也足够了。
FIT_START,FIT_END和FIT_CENTER差不多,就不详细介绍了。
先看例子:
CENTER_CROP,是个非常重要的值,但是很多同学对它并不是很了解。首先,这个属性值的名字很奇怪,很难猜出来其真实的含义;其次,它的官方介绍简直又臭又长,让人一头雾水:
其实,CENTER_CROP的特点总结起来很简单: 以可能裁切掉部分图片为代价,让图片充满ImageView。
可以和FIT_XY做下对比, CENTER_CROP和FIT_XY是唯二的可以保证填满ImageView的值 。所不同的是,FIT_XY是以不保持原始比例伸缩为代价(但是保证原图全部显示出来);而CENTER_CROP是以不能显示完整原图为代价(但是保证原图的原始比例)。
二者都会按原始比例伸缩图片,所不同的是, CENTER_CROP将图片伸缩到填满ImageView为止,FIT_CENTER伸缩到图片完整并居中显示为止。
下面两个动图可以让你看得更清楚:
先看例子:
CENTER_INSIDE又是一个奇怪的值,原文的解释也是让人看不懂:
其实总结起来很简单: 当原图大于ImageView的时候,相当于FIT_CENTER。当原图小于等于ImageView的时候,相当于CENTER。
看下例子
MATRIX的效果比较简单: 不改变原图的大小,从ImageView的左上角开始绘制,超出部分做剪切处理。 不保证填满ImageView,也不保证图片完全显示。和CENTER有点类似。反正我在项目中是没有用过这个值。
下面的表格总结了下各个属性值的特点,注意,表格中为“是”并不是说一定会发生,只是说明有这种可能。
最后再给大家出一道思考题,看看大家的掌握情况:
相信通过学习本文章,聪明的你很快就能找到答案。