ImageView的ScaleType这么简单你都不会!

如果你像我一样很容易健忘,那么你也应该像我一样有一个好习惯——“好记性不如赖笔头”。Android开发中ImageView的ScaleType属性就有很多选择,说实话我是真的记不住这么多类型的用法,所以只有用笔记下来咯,用的时候直接翻看一下,2分钟搞定。你知道ImageView的ScaleType怎么用吗?

ScaleType概述

ImageView 的 ScaleType 一共八种类型,分别是:

  • CENTER
  • CENTER_CROP
  • CENTER_INSIDE
  • FIT_CENTER
  • FIT_END
  • FIT_START
  • FIT_XY
  • MATRIX

由于不同类型的 ScaleType 最终展示的 ImageView 不一样,再加上 ImageView 的使用频率非常高,因此,了解不同类型的 ScaleType 的作用是十分有必要的。

下面是ScaleType并排放置的所有不同屏幕截图,来自thoughtbot:

ScaleType八种类型图示

ScaleType详解

1. CENTER

Center the image in the view, but perform no scaling.

在不缩放的前提下,将 Image 的中间显示在 ImageView 的中间。

  • Image 尺寸比 ImageView 尺寸大
    只显示 Image 中间与 ImageView 尺寸相等的部分
  • Image 尺寸与 ImageView 尺寸相等
    完整显示
  • Image 尺寸比 ImageView 尺寸小
    Image 完整地显示在 ImageView 中间

2. CENTER_CROP

Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

Image Width Height 等比例缩放至至少一个方向上 Image 与 ImageView 尺寸一样(Image 短边缩放至与 ImageView 对应边相等(Width 对应 Width,Height 对应 Height)),之后将缩放后的 Image 的中间显示在 ImageView 的中间。

  • Image 尺寸比 ImageView 尺寸大
    Image 短边缩小至与 ImageView 对应边相等,Image 长边根据相应的缩放系数进行缩放,之后将 Image 中间显示在 ImageView 中间。
  • Image 尺寸与 ImageView 尺寸相等
    完整显示
  • Image 尺寸比 ImageView 尺寸小
    Image 短边放大至与 ImageView 对应边相等,Image 长边根据相应的缩放系数进行缩放,之后将 Image 中间显示在 ImageView 中间。

3. CENTER_INSIDE

Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

完整地将 Image 显示在 ImageView 中间。如果 Image 比 ImageView 尺寸大,则将长边缩放至与 ImageView 对应边相等,同时,短边根据缩放系数缩放。之后,将缩放后的 Image 完整地显示在 ImageView 上;如果 Image 比 ImageView 尺寸小,直接将 Image 显示在 ImageView 中间。

  • Image 尺寸比 ImageView 尺寸大
    Image 长边缩小至与 ImageView 对应边相等,Image 短边根据相应的缩放系数进行缩放,之后将 Image 显示在 ImageView 中间。
  • Image 尺寸与 Image View 尺寸相等
    完整显示
  • Image 尺寸比 ImageView 尺寸小
    Image 不进行任何处理,直接显示在 ImageView 中间。

4. FIT_CENTER

Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. The result is centered inside dst.

完整地将 Image 显示在 ImageView 中间。如果 Image 比 ImageView 尺寸大,则将长边缩放至与 ImageView 对应边相等,同时,短边根据缩放系数缩放,之后将缩放后的 Image 完整地显示在 ImageView 上;如果 Image 比 ImageView 尺寸小,则将长边放大至与 ImageView 对应边相等,之后将缩放后的 Image 完整地显示在 ImageView 上。总之,在保证 Image 完整显示在 ImageView 里面的前提下,保证在一个方向上,Image 与 ImageView 是相等的。

  • Image 尺寸比 ImageView 尺寸大
    Image 长边缩小至与 ImageView 对应边相等,Image 短边根据相应的缩放系数进行缩放,之后将 Image 显示在 ImageView 中间。
  • Image 尺寸与 ImageView 尺寸相等
    完整显示
  • Image 尺寸比 ImageView 尺寸小
    Image 长边放大至与 ImageView 对应边相等,Image 短边根据相应的缩放系数进行缩放,之后将 Image 显示在 ImageView 中间。

5. FIT_END

Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. END aligns the result to the right and bottom edges of dst.

完整地将 Image 显示在 ImageView 右边或下边。如果 Image 比 ImageView 尺寸大,则将长边缩放至与 ImageView 对应边相等,同时,短边根据缩放系数缩放,之后将缩放后的 Image 完整地显示在 ImageView 右边或下边;如果 Image 比 ImageView 尺寸小,则将长边放大至与 ImageView 对应边相等,之后将缩放后的 Image 完整地显示在 ImageView 右边或下边。总之,在保证 Image 完整显示在 ImageView 里面的前提下,保证在一个方向上,Image 与 ImageView 是相等的。

  • Image 尺寸比 ImageView 尺寸大
    Image 长边缩小至与 ImageView 对应边相等,Image 短边根据相应的缩放系数进行缩放,之后将 Image 显示在 ImageView 右边或下边。
  • Image 尺寸与 ImageView 尺寸相等
    完整显示
  • Image 尺寸比 ImageView 尺寸小
    Image 长边放大至与 ImageView 对应边相等,Image 短边根据相应的缩放系数进行缩放,之后将 Image 显示在 ImageView 右边或下边。

6. FIT_START

Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. START aligns the result to the left and top edges of dst.

完整地将 Image 显示在 ImageView 左边或上边。如果 Image 比 ImageView 尺寸大,则将长边缩放至与 ImageView 对应边相等,同时,短边根据缩放系数缩放,之后将缩放后的 Image 完整地显示在 ImageView 左边或上;如果 Image 比 ImageView 尺寸小,则将长边放大至与 ImageView 对应边相等,之后将缩放后的 Image 完整地显示在 ImageView 左边或上边。总之,在保证 Image 完整显示在 ImageView 里面的前提下,保证在一个方向上,Image 与 ImageView 是相等的。

  • Image 尺寸比 ImageView 尺寸大
    Image 长边缩小至与 ImageView 对应边相等,Image 短边根据相应的缩放系数进行缩放,之后将 Image 显示在 ImageView 左边或上边。
  • Image 尺寸与 ImageView 尺寸相等
    完整显示
  • Image 尺寸比 ImageView 尺寸小
    Image 长边放大至与 ImageView 对应边相等,Image 短边根据相应的缩放系数进行缩放,之后将 Image 显示在 ImageView 左边或上边。

7. FIT_XY

Scale in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src.

完整地将 Image 显示在 ImageView 里面。Image X、Y 方向上分别缩放至与 ImageView 对应边相等,Image 的 Width 和 Height 缩放系数可以不一致。

  • Image 尺寸比 ImageView 尺寸大
    Image 的 Width、Height 分别缩放至与 ImageView 对应边相等,之后将 Image 完整地显示在 ImageView 里面。
  • Image 尺寸与 ImageView 尺寸相等
    完整显示
  • Image 尺寸比 ImageView 尺寸小
    Image 的 Width、Height 分别缩放至与 ImageView 对应边相等,之后将 Image 完整地显示在 ImageView 里面。

8. MATRIX

Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. START aligns the result to the left and top edges of dst.

将 Image 从 ImageView 左上角开始显示。

  • Image 尺寸比 ImageView 尺寸大
    ImageView 只显示 Image 中从左上角开始与 ImageView 尺寸相等的部分,多余的地方不显示。
  • Image 尺寸与 ImageView 尺寸相等
    完整显示
  • Image 尺寸比 ImageView 尺寸小
    Image 显示在 ImageView 的左上角。

最后

我是i猩人,总结不易,转载注明出处,喜欢本篇文章的童鞋欢迎点赞、关注哦。

参考

  • https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
  • https://thoughtbot.com/blog/android-imageview-scaletype-a-visual-guide
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值