如果你像我一样很容易健忘,那么你也应该像我一样有一个好习惯——“好记性不如赖笔头”。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详解
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