美文网首页
ImageView ScaleType 模式

ImageView ScaleType 模式

作者: gczxbb | 来源:发表于2019-05-29 23:25 被阅读0次

ImageView 的 ScaleType 属性 有8种类型。

fitXY
fitCenter 默认
fitEnd
fitStart
center
centerCrop
centerInside
matrix

每种类型代表图片在 ImageView 的一种展示方式。

原图

原图,宽300px,高200px。
ImageView,设置三组固定大小,宽x高:60dp和30dp,200dp和150dp,200dp和30dp。

一、fitXY

ImageView 大小固定,图片适配 ImageView,图片占满视图,当 ImageView 和图片宽高比不同时,导致图片拉伸。

fitXY

不关心图片大小,图片完全在 ImageView 内部,不裁剪,拉伸。

二、fitCenter

ImageView 大小固定,图片适配 ImageView,图片按照 ImageView 大小缩放或扩大,直到有一者或全和 ImageView 宽高相等,图片完全在 ImageView 控件内部,居中。

fitCenter

图片宽300px,高200px,比例是1.5:1。
第一种,ImageView 宽高比 2:1,缩放,直到宽高都<= ImageView 宽高,缩放过程中,有一个先相等,另一个仍然大于,(按照最大比例缩放)。图片高相等时,宽并不能占满60dp,然后居中显示,(和centerInside一致)。
第二种,ImageView 宽高比 4:3,扩大。直到宽高有一项等于 ImageView 宽高,(按照最接近的比例扩大值)。图片的宽相等时,高并不能占满150dp,然后居中显示。
第三种,ImageView 宽高比 20:3。图片高> ImageView 高,宽高缩放。图片高缩放至==ImageView时,图片宽并不能占满200dp,然后居中显示,(centerInside一致)。

图片按照 ImageView 的宽高 scale 操作,完全在ImageView内部,有一项紧贴ImageView,不裁剪,不会拉伸。

三、fitEnd和fitStart

和 fitCenter 一样,区别是,图片 scale 操作到紧贴 ImageView 内部后,显示位置不居中。

fitStart和fitEnd

四、center

ImageView 大小固定,按照图片的宽高像素显示,不需要适配,如果 ImageView 显示不下,截取,将图片和 ImageView 区域的交集显示出来。

center

图片宽300px,高200px,比例是1.5:1。
第一种,图片宽高> ImageView宽高,显示截取后的图片。
第二种,图片宽高< ImageView宽高,完全显示,居中显示。
第三种,图片宽< ImageView宽,图片宽> ImageView宽,截取,居中显示。

图片和 ImageView 区域进行 intersect 操作,显示他们的交集,居中显示。可能会裁剪,不拉伸。

五、centerCrop

ImageView 大小固定,图片适配 ImageView,图片进行 scale 操作,直到宽高一方或全和 ImageView 宽高相等,图片宽高需要全部大于等于 ImageView 宽高。

centerCrop

图片宽300px,高200px,比例是1.5:1。
第一种,ImageView 宽高比2:1。图片宽高> ImageView 宽高。缩放,直到有一项==ImageView对应项。缩放过程中必然有一个先相等,另一个仍然大于,(按照最小比例缩放)。图片宽==ImageView宽时,图片高仍> ImageView 高,缩放后,2:4/3,然后,裁剪高,显示。
第二种,ImageView 宽高比4:3。图片宽高< ImageView 宽高。扩大。直到宽高都>=ImageView宽高,(按照最大的比例扩大值)。
当图片高扩大至==ImageView高时,图片宽> ImageView宽,放大后,比例是9/2:3,宽超出,裁剪宽度。显示。
第三种,ImageView 宽高比20:3。图片高> ImageView 高,图片宽< ImageView 宽,放大宽,同比例放大高。不管怎样图片宽高最后都要>= ImageView 宽高,且有一个相等,扩大后,20:40/3,高度远超过30dp,裁剪高,显示。

根据图片宽高适配 ImageView,scale 的倍数要保证图片宽高大于 ImageView 宽高,并且有一项紧贴 ImageView,裁剪,不拉伸。

六、centerInside

ImageView 大小固定,图片适配 ImageView,图片按照 ImageView 大小进行 scale 缩放操作,无扩大操作。图片完全在 ImageView 内部。位于 ImageView 中间。

centerInside

图片宽300px,高200px,比例是1.5:1。
第一种,ImageView 宽高比2:1。图片宽高> ImageView 宽高。缩放,直到全部在 ImageView 内部。缩放过程中必然有一个先相等,另一个仍然大于,继续缩放,(按照最大比例缩放)。图片高== ImageView 高时,图片宽已经<ImageView宽,缩放后,1.5:1,然后,居中显示。
第二种,图片宽高< ImageView 宽高。直接居中显示。
第三种,ImageView 宽高比20:3。图片高> ImageView 高,图片宽< ImageView 宽,图片缩放高,直到图片的高== ImageView 高,宽缩放同等比例,然后居中显示

根据图片宽高适配 ImageView,scale操作要保证图片宽高都不比 ImageView 宽高大,图片宽高小于 ImageView 保持不变,缩放时有一项紧贴 ImageView,不裁剪,不拉伸。

七、matrix

从 ImageView 左上角开始直接显示,显示不全时,裁剪。

matrix

任重而道远

相关文章

  • ImageView ScaleType 模式

    ImageView 的 ScaleType 属性 有8种类型。 fitXYfitCenter 默认fitEndfi...

  • ImageView

    ImageView scaleType属性 ImageView的scaleType属性决定了图片在ImageVie...

  • ImageView的scaleType模式

    scaleType有如下几种centerCrop以原图填满ImageView为目的,如果原图size大于Image...

  • ImageView的ScaleType模式

    作者:郑捡书转载请注明作者和原文链接,如有行文存在不当请留言说明,谢谢。 xml示例图 xml示例代码 注意:以下...

  • scaleType / ScaleType

    整理旧笔记 ** android:scaleType / ImageView.ScaleType:**控制图片如何...

  • Android ImageView

    ImageView 的 scaleType参考1

  • ImageView的缩放

    android中ImageView的ScaleType属性 ScaleType的值分别代表的意义: ImageVi...

  • ImageView的ScaleType原理及效果分析

    ImageView的ScaleType决定了图片在ImageView中的缩放形式。本文从ImageView的源码角...

  • ImageView ScaleType

    CENTER不缩放,位置中间,超出屏幕部分不要 CENTER_CROP位置中间,按比例扩大图片或保持原状,使得图片...

  • ImageView scaleType

    ref:http://abhiandroid.com/ui/scaletype-imageview-example...

网友评论

      本文标题:ImageView ScaleType 模式

      本文链接:https://www.haomeiwen.com/subject/rmpjtctx.html