Day3.4--Android简单UI控件之ImageView以及ScaleType的使用

ImageView，图像视图，主要功能就是用来显示图片的，下面列举出ImageView几个比较常用的属性：

android:adjustViewBounds : 设置ImageView是否调整自己的边界来保持所显示图片的宽高

android:maxHeight : 设置ImageView的最大高度

android:maxWidth ：设置ImageView的最大宽度

android:src : 设置ImageView所要显示的图片ID

android:scaleType : 设置ImageView所显示的图片如何缩放或者移动以适应到ImageView的大小

注意：

如果ImageView的android:layout_width和android_height的属性都设置为wrap_content值，则不需要使用android:scaleType属性来调节图片，但是如果宽高指定的是固定值，比如60dp，但是当图片实际的大小大于或者小于60dp时，图片就要进行一定比例的缩放来匹配ImageView的大小，而android:scaleType属性见就是用来规定图片缩放的规则

首先我选择了两张图片对android:scaleType属性一一做对比介绍，如下：

large.png 尺寸为700*800

small.png 尺寸为64*64

接下来就看一下，对于scaleType的不同取值，图片会如何进行缩放：

matrix :

表示图片会从ImageView的左上角开始绘制，如果图片的尺寸大于ImageView的宽高，则多余的部分会被裁减，如果图片尺寸小于ImageView的宽高，则图片不作处理

代码如下：

<ImageView         android:layout_width="150dp"        android:layout_height="150dp"        android:src="@drawable/large"        android:background="@android:color/holo_purple"        android:scaleType="matrix" />        <ImageView         android:layout_width="150dp"        android:layout_height="150dp"        android:src="@drawable/small"        android:background="@android:color/holo_red_light"        android:scaleType="matrix" />

效果如下：

Day3.4--Android简单UI控件之ImageView以及ScaleType的使用_第1张图片

可以看到，将scaleType＝matrix后，两张图都是从左上角开始显示，但是大的图片会被裁减，小的图片反而显示不全

fitXY :

表示图片内容会填满整个ImageView(注意是ImageView，并不是整个屏幕)，因此图片会尽量的进行拉伸或者缩小来匹配ImageView，但是在缩放过程中并不会按照原图的比例进行缩放(比如一张图片原先是一个圆形，但是经过fitXY缩放之后，变成了椭圆)

代码如下：

<ImageView         android:layout_width="150dp"        android:layout_height="200dp"        android:src="@drawable/large"        android:background="@android:color/holo_purple"        android:scaleType="fitXY" />        <ImageView         android:layout_width="150dp"        android:layout_height="80dp"        android:src="@drawable/small"        android:background="@android:color/holo_red_light"        android:scaleType="fitXY" />

效果如下：

Day3.4--Android简单UI控件之ImageView以及ScaleType的使用_第2张图片

可以看到，图片会将ImageView的宽高全部填满，但是如果ImageView的宽高不一致，图片也会发生变形，比如苏菲的脸被拉长，圆形变味椭圆形

fitCenter :

将图片进行拉伸或者缩放到ImageView的宽度或者高度(注意时按照原图的比例进行缩放)，然后图片在ImageView的中心位置显示

代码如下：

<ImageView         android:layout_width="100dp"        android:layout_height="200dp"        android:src="@drawable/large"        android:background="@android:color/holo_purple"        android:scaleType="fitCenter" />        <ImageView         android:layout_width="150dp"        android:layout_height="80dp"        android:src="@drawable/small"        android:background="@android:color/holo_red_light"        android:scaleType="fitCenter" />

效果如下：

苏菲的ImageView的宽是100dp，高是200dp，因此图片会压缩到100dp，然后显示在ImageView的中心位置，small的图片相反会被放大到80dp，然后显示到ImageView的中心位置

fitStart :

同fitCenter类似，区别在于缩放完之后，fitStart的图片在ImageView的左方或者上方显示

代码如下

<ImageView         android:layout_width="100dp"        android:layout_height="200dp"        android:src="@drawable/large"        android:background="@android:color/holo_purple"        android:scaleType="fitStart" />        <ImageView         android:layout_width="150dp"        android:layout_height="80dp"        android:src="@drawable/small"        android:background="@android:color/holo_red_light"        android:scaleType="fitStart" />

效果如下：

Day3.4--Android简单UI控件之ImageView以及ScaleType的使用_第3张图片

可以看到，两张图片分别进行压缩和放大之后，显示在ImageView的上方和左方

fitEnd ：

同fitCenter类似，区别在于缩放完之后，fitEnd的图片在ImageView的右方或者下方显示

代码如下:

<ImageView         android:layout_width="100dp"        android:layout_height="200dp"        android:src="@drawable/large"        android:background="@android:color/holo_purple"        android:scaleType="fitEnd" />        <ImageView         android:layout_width="150dp"        android:layout_height="80dp"        android:src="@drawable/small"        android:background="@android:color/holo_red_light"        android:scaleType="fitEnd" />

效果如下：

Day3.4--Android简单UI控件之ImageView以及ScaleType的使用_第4张图片

可以看到两张图片分别进行压缩和放大之后，显示在ImageView的下方和右方

center :

顾名思义，center就是将整张图片覆盖到ImageView上，并且是居中显示，如果图片宽高超过了ImageView 的宽高，则多余部分被裁减

代码如下：

<ImageView         android:layout_width="100dp"        android:layout_height="200dp"        android:src="@drawable/large"        android:background="@android:color/holo_purple"        android:scaleType="center" />        <ImageView         android:layout_width="150dp"        android:layout_height="80dp"        android:src="@drawable/small"        android:background="@android:color/holo_red_light"        android:scaleType="center" />

效果如下：

Day3.4--Android简单UI控件之ImageView以及ScaleType的使用_第5张图片

可以看出，苏菲图片类似于从中心位置抠出100*200的区域，然后显示到ImageView上，而small图片大小小于ImageView的宽高，因此直接显示在ImageView中心位置

centerCrop :

centerCrop的原则是尽量将图片按照原图的比例填充到ImageView上，因此指定这个scaleType的图片会先按照原图比例进行缩放，然后查看如果宽高有超出部分就会被裁减掉

代码如下：

<ImageView         android:layout_width="100dp"        android:layout_height="200dp"        android:src="@drawable/large"        android:background="@android:color/holo_purple"        android:scaleType="centerCrop" />        <ImageView         android:layout_width="150dp"        android:layout_height="80dp"        android:src="@drawable/small"        android:background="@android:color/holo_red_light"        android:scaleType="centerCrop" />

效果如下：

Day3.4--Android简单UI控件之ImageView以及ScaleType的使用_第6张图片

可以看出，centerCrop会将图片按照原图的比例尽量的缩放来填充ImageView，但是如果宽或者高有超出部分，则会被裁减掉，这是它与fitXY不同的两点，需要注意

centerInside :

centerInside实现的效果跟fitCenter基本一致，不再做赘述了

更多相关文章

随机推荐