ImageView 中不同 scaleType 的对比介绍

版权声明:本文为 咕咚 原创文章,可以随意转载,但必须在明确位置注明出处。

个人主页: http://gudong.name

文章地址: http://gudong.name/2017/12/01/imageview-scaletype.html

介绍

在使用 ImageView 的时候,经常需要设置它的 scaleType,但是一些时候对他们的区别总是很难把握,这次通过示例完整的了解一下不同的 scaleType 对一个 ImageView 的展示到底会有什么样的区别。

这是原图片

可以看到,其实他有一个内部 padding 的距离。

ImageView 布局

下面使用 ImageView 用来显示这个图片资源,然后分别使用不同的 scaleType 进行展示,布局代码如下

<ImageView
    android:layout_width="300dp"
    android:layout_height="500dp"
    android:layout_centerInParent="true"
    android:scaleType="center"
    android:src="@mipmap/ic_launcher"/>

这是一个宽 300dp 高 500dp 的 ImageView,现在设置 scaleType 为 center

说明:为了显示方便,这里设置 ImageView 的背景为灰色,下面所有截图中看到的灰色区域就是 ImageView 的区域。

1、scaleType=”center”

scaleType 为 center 表示按照图片尺寸在给定的 ImageView 上居中显示图片,如下所示,当 ImageView 尺寸很大足够容纳图片时,图片会居中显示在 ImageView 中。

但是当 ImageView 的 size 被设置的较小,如下 ImageView 的宽高被设置为 20-50 时,此时 ImageView 的 size 小于图片的大小,会发现图片依旧居中显示,但是为了居中显示,图片会被按 ImageView 的宽高比例进行缩小然后裁剪如下所示:

2、scaleType=”centerCrop”

它会根据 ImageView 的尺寸,把目标图片按照 ImageView 的尺寸进行等比例放大或缩小然后裁剪,最终显示。

这里因为原图尺寸没有 ImageView 尺寸大,所以图片会被放大,然后最终被裁剪后显示成如下图所示的样式。

3、scaleType=”centerInside”

目前跟 center 一致 ,看不出有什么区别,

但是如果 ImageView 的尺寸小于图片自己的尺寸,它就会跟 center 的效果不一样了,它会自适应 ImageView 进行自适应,比如,我们将 ImageView 的尺寸特意设的特别小。

<Image
    android:layout_width="20dp"
    android:layout_height="50dp"
    android:layout_centerInParent="true"
    android:scaleType="fitCenter"
    android:src="@mipmap/ic_launcher"/>

然后效果如下。

对比 scaleType = center 在 ImageView size 小于图片 size 的情况下, center 会把图片进行裁剪,但是 centerInside 就不会,这也是为什么叫 inside 的缘故吧。

4、scaleType=”fitStart/fitEnd/fitCenter”

fit 表示图片自己会根据 ImageView 的尺寸进行自适应。

start 表示在图片靠上面,end 表示靠下边,center 表示居中

这里区分一下 fitCentercenterInside

fitCenter 会放大图片自身,然后居中显示,如上图所示。但是 centerInside 不会放大图片,还是根据图片尺寸居中显示在 ImageView 中。

5、scaleType=”matrix”

matrix 是 ImageView 默认的 scaleType, 他不改变原图的大小,从ImageView的左上角开始绘制原图,原图超过ImageView的部分作裁剪处理。 同样对比下 ImageView 在不同尺寸下的样式

6、scaleType=”fitXY

这中类型最好理解,不管原图的宽高比例,直接把原图按照 ImageView 的大小尺寸进行拉伸,使原图填满 ImageView,非常暴力,实际开发中用到的不多,因为很容易造成图片变形的问题。

总结

结合平时的开发经验,一般主要用的 scaleType 就几种,比较多的是 center 、centerInside 以及 fitCenter, 主要掌握这几个类型的区别。

咕咚

咕喱咕咚
扫码关注公众号
comments powered by Disqus
rss facebook jianshu juejin weibo twitter github gitlab youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora