ImageView的ScaleType详解

转载 2015年11月18日 09:29:00

本文转载至:ifangler.com

一直对ImageView的ScaleType的几个选项有点陌生,网上的资料也没能让我清楚的知道在什么场景应该选择ScaleType的哪个选项,于是自己用例子来实验了一把。

开始之前:下面会有图来说明这几个选项的区别,每张图片会比较默认的ScaleType和相应的ScaleType选项。其中图片的黑色框框是ImageView的显示边界。

FIT_CENTER

将图片按比例扩大/缩放到ImageView的宽高,居中显示。
我的理解:将图片按比例缩放(扩大)直到图片的宽或高与ImageView的宽高相等,然后居中显示。
这是ImageView的默认处理方式

FIT_XY

不按比例缩放图片,目标是把图片塞满整个View。
我的理解:将图片缩放/扩大直到与ImageView的宽高相等,由于没有按比例缩放,所以会存在宽或高出现拉伸至相同高度。

有图有真相:
图片加载中...

FIT_START

FIT_START, FIT_END在图片缩放效果上与FIT_CENTER一样,只是显示的位置不同。

FIT_END

同上。

我的理解:上面两个属性与FIT_CENTER的缩放方式是一样的,只是最后显示的位置不一样,FIT_CENTER是居中显示,FIT_START是显示在START的位置,FIT_END是显示在END的位置。
关于START和END的位置:
1. 如果图片缩放到与ImageView等宽,那么START在顶部,END在底部。
2. 如果图片缩放到与ImageView等高,那么START在左边,END在右边。

图片如下:
FIT_START效果
图片加载中...
FIT_END效果
图片加载中...

CENTER

按图片的原来size居中显示,当图片宽/高超过ImageView的宽/高,则截取图片的居中部分显示。
我的理解:这个是不会改变图片大小的,将图片显示在ImageView中,如果图片宽高超过ImageView的宽高,则将超出的部分裁切到显示。如果图片未超过ImageView大小,则显示原图。

效果如下:
图片较小的情况
图片加载中...
图片超过ImageView大小的情况
图片加载中...

CENTER_CROP

按比例扩大图片的size居中显示,使得图片宽/高等于或大于ImageView的宽/高
我的理解:这个会按比例拉伸图片直到图片的宽高都大于或等于ImageView的宽高,多余的部分被裁切掉。

效果如下:
图片加载中...

CENTER_INSIDE

将图片的内容完整居中显示,通过按比例缩小或原来的size使得图片宽/高等于或小于ImageView的宽/高
我的理解:这个和CENTER_CROP的处理方式类似,只是它会按比例拉伸图片直到图片的宽高都小于或等于ImageView的宽高。
需要注意的是:如果图片的宽高都小于ImageView的宽高时,显示的是原图。

效果如下:
图片超过ImageView大小的情况
图片加载中...
图片较小的情况
图片加载中...

这下就清楚多了~~

最后附上源码地址:https://github.com/fangler/AndroidDemos/tree/master/ImageScaleDemo

ImageView的属性android:scaleType设置最佳比例图片显示

实现图片轮播,以前的大图片比例会在GuideGallery中自动缩放,后来编辑把图片大小修改了。在大屏不能适应屏幕。试了很多方法终于解决。先说Imageview的属性。可在java代码中实现,也可以在...
  • anlidengshiwei
  • anlidengshiwei
  • 2015年05月15日 13:47
  • 1699

ImageView的源码解读,以及几种ScaleType的分析

分析ImageView的源码,并实例讲解ScaleType的作用以及变换原理
  • yeah0126
  • yeah0126
  • 2016年06月02日 23:03
  • 4632

ImageView的属性android:scaleType设置最佳比例图片显示

实现图片轮播,以前的大图片比例会在GuideGallery中自动缩放,后来编辑把图片大小修改了。在大屏不能适应屏幕。试了很多方法终于解决。先说Imageview的属性。可在java代码中实现,也可以在...
  • jia635
  • jia635
  • 2014年07月23日 10:49
  • 5859

imageview的scaleType详解(附图)

mageView的scaleType的属性有好几种,分别是matrix(默认)、center、centerCrop、centerInside、fitCenter、fitEnd、fitStart、fit...
  • musk6
  • musk6
  • 2017年01月11日 16:22
  • 136

Android ImageView 的 scaleType属性详解(二)

接着上一篇文章说,如果你没有看上一篇的文章的话,先去看看吧,这章没有上一篇汇重要Android ImageView 的 scaleType属性详解(一) 1 就不扯别的了吧,说多了都是泪水啊。 5 s...
  • leilifengxingmw
  • leilifengxingmw
  • 2016年03月03日 16:50
  • 490

Android ImageView scaleType+adjustViewBounds两个属性详解 保证图片不变形

转自:http://www.2cto.com/kf/201411/348601.html 记得当初学习ImageView 的时候,觉得很简单,很基础。 直到两年后我才开始使用adjustViewBo...
  • u012553125
  • u012553125
  • 2016年08月24日 22:49
  • 3577

ImageView.ScaleType 属性详解

看图说话当图片比 ImageView 大时:当图片比 ImageView 小时:android:scaleType=”center” 当图片大于 ImageView 的宽高:以图片的中心点和 Imag...
  • heshiweij
  • heshiweij
  • 2016年02月16日 13:54
  • 419

ImageView的scaletype详解

第一次使用csdn记录 飞机票:http://blog.sina.com.cn/s/blog_618199e60100y537.html 很详细 2、XML属性 属性名...
  • qq_17160633
  • qq_17160633
  • 2015年06月19日 11:56
  • 253

Android中ImageView的scaleType属性详解

一直都对scaleType属性一知半解,今天有空网上找了些资料加上自己的demo演示终于算是了却了一直存在的疑问。ImageView中的scaleType属性用以表示显示图片的方式,下面开始详细的介绍...
  • wangyi891223
  • wangyi891223
  • 2015年04月15日 14:44
  • 148

ImageView中的ScaleType详解

官方介绍下面举个例子对以上几点属性逐条说明准备准备一张400x300的图片,命名为:test_400x300,写一个简单的布局,观察右边preview预览图的变化。 从图中我们可以看到,此控件的...
  • CPPAlien
  • CPPAlien
  • 2015年12月30日 01:38
  • 376
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ImageView的ScaleType详解
举报原因:
原因补充:

(最多只允许输入30个字)