android-tips(ScaleType)

android tips主要讲解平时在开发中的一些常用有比较容易让人忽略的问题或者是个人建议。知识比较杂,但是好多人可能看到过,但没有仔细想,研究..........。可以开始了。

tips-one: scaleType 

  我在设置ImageView图片的大小时,scaleType属性值经常被用到,比如:设定Imageview的固定大小为50dpx60dp,实际图片大小为30dpx40dp那么我就会使用这个属性:android:scaleType="fitXY"只知道会填充满imageview,但不知道具体啥意思,今天我们就来了解一下,这么做对不对,不对,应该怎么用?


6748497-13da31e8831d7ed2.png

ok,我们一个一个来:  我们先准备两张图片,对比参考,以往是xml设置,我们这次改为代码设置属性。先准备两张图片:一个高分辨率大图400x300,一个低分辨率的小兔70x70.


6748497-a1d60834c03aacbf.jpg
big


6748497-b9741ff672a9106b.png
small

(1)设置Imageview的宽高为90dp设置android:scaleType="matrix",代码:


6748497-9346a2b92b08b32f.png

效果:

6748497-38822c61c1ef3228.png

 总结:matrix表示原图从ImageView的左上角开始绘制,如果原图大于ImageView,那么多余的部分则剪裁掉,如果原图小于ImageView,那么对原图没有变化,但会有部分区域没有填充图片。

(2)ScaleType="fitXY",只需要更改   setScaleType(ImageView.ScaleType.FIT_XY);

效果如下:


6748497-c6057e8bb6783723.png

总结:

fitxy属性值:fitXY的目标是填充整个ImageView,,它需要对图片进行一些缩放操作,在缩放的过程中,它不会按照原图的比例来缩放,存在变形,无法适配。

(3)scaletype="fitStart",setScaleType(ImageView.ScaleType.FIT_START);

效果:


6748497-3e4b671f75bf4f63.png


总结:将图片按比例缩放至View的宽度或者高度取宽和高的大值后居上或者居左显示,那么效果图中的samll图片为什么没有有部分区域是背景色呢,因为宽和高值是一样的嘛


(4)scaletype="fitcenete".setScaleType(ImageView.ScaleType.FIT_CENTER);

效果如下:


6748497-9ca00c42945262be.png

 总结:和fitstart一样按比例进行缩放,fitsatart缩放后居上或者居左显示而fitcenter是缩放后居中显示。

(5)scaletype="fitend",setScaleType(ImageView.ScaleType.FIT_END);

效果如图:


6748497-12f68e4219029df0.png

总结:和fitstart都是按比例缩放,fitstart是缩放后居上或者居左而fitend的是缩放后居下或者居右。

(6)scaleTypt="center"  代码:.setScaleType(ImageView.ScaleType.CENTER);

效果如下:


6748497-f9993d5a42444322.png

总结:center表示将原图按照原来的大小居中显示,如果原图的大小超过了ImageView的大小,那么剪裁掉多余部分,只显示中间一部分图像,没有等比例缩放。

(7)scaletype="centerCrop",代码:setScaleType(ImageView.ScaleType.CENTER_CROP);

效果如图所示:


6748497-a4c60beec61847db.png

总结:centerCrop的目标是将ImageView填充满,故按比例缩放原图,使得可以将ImageView填充满,同时将多余的宽或者高剪裁掉。


(8)scaletype="centerInsid",代码:setScaleType(ImageView.ScaleType.CENTER_INSIDE);

效果如下:


6748497-661301ee72753ff6.png

总结:centerInside的目标是将原图完整的显示出来,故按比例缩放原图,使得ImageView可以将原图完整显示和fitcenter有点类似。


补充:Matrix还有别的重要用法:

该模式还可以与ImageView.setImageMatrix(Matrix matrix)配合使用,因为该模式需要用于指定一个变换矩阵用于指定图片如何展示。其实前面的7种模式都是通过ImageView在内部生成了相应的变换矩阵,等于是提供了该模式的一种特定值,使用这个模式只要传入相应矩阵,也就能实现上述七种显示效果。

代码:


6748497-fea2cd66af9d619e.png

效果:


6748497-1e7ee938c71d897f.png



完毕!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

薛之涛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值