ImageView中不同 ScaleType 的对比介绍

最新推荐文章于 2024-03-30 19:23:22 发布

weixin_34014277

最新推荐文章于 2024-03-30 19:23:22 发布

阅读量107

点赞数

文章标签：移动开发

原文链接：https://juejin.im/post/5a3e8238518825128654c719

版权

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

个人主页: 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 的区域。

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"/>
复制代码