ImageView中不一样 ScaleType 的对比介绍

版权声明：本文为 咕咚 原创文章，能够随意转载，但必须在明确位置注明出处。

我的主页: gudong.name

文章地址: gudong.name/2017/12/01/…

介绍

在使用 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 的区域。

一、scaleType="center"

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

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

二、scaleType="centerCrop"

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

这里由于原图尺寸没有 ImageView 尺寸大，因此图片会被放大，而后最终被裁剪后显示成以下图所示的样式。

三、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 的缘故吧。

四、scaleType="fitStart/fitEnd/fitCenter"

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

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

这里区分一下 fitCenter 和 centerInside

fitCenter 会放大图片自身，而后居中显示，如上图所示。可是 centerInside 不会放大图片，仍是根据图片尺寸居中显示在 ImageView 中。

五、scaleType="matrix"

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

• ImageView 尺寸大于图片尺寸

  

• ImageView 尺寸小于图片尺寸

  

六、scaleType="fitXY

这中类型最好理解，无论原图的宽高比例，直接把原图按照 ImageView 的大小尺寸进行拉伸，使原图填满 ImageView，很是暴力，实际开发中用到的很少，由于很容易形成图片变形的问题。

总结

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

关注我

• 微博 - 大侠咕咚
• 知乎 - 咕咚
• Github - 咕咚