美文网首页
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 模式

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