android-UI组件实例大全(六)------ImageView图像视图

图像视图:ImageView

继承view类,用于在屏幕上显示任何Drawable对象,通常用来显示图片:

这里的话我们介绍一些比较常用的属性:

Path 1:

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

！！！下面的这两个属性需要adjustViewBounds为ture,不然是不起作用的哦!

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

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

实例:

代码:

[html]   view plain copy print ?

1. <!-- 正常的图片 -->  
2.     <ImageView  
3.         android:src="@drawable/meinv9"  
4.         android:id="@+id/imageView1"  
5.         android:layout_margin="5px"  
6.         android:layout_height="wrap_content"  
7.         android:layout_width="wrap_content"   
8.     />  
9.     <!-- 限制了最大宽度与高度,并且设置了调整边界来保持所显示图像的长宽比-->  
10.     <ImageView  
11.         android:src="@drawable/meinv9"  
12.         android:id="@+id/imageView2"  
13.         android:maxWidth="200px"  
14.         android:maxHeight="200px"  
15.         android:adjustViewBounds="true"  
16.         android:layout_margin="5px"  
17.         android:layout_height="wrap_content"  
18.         android:layout_width="wrap_content"   
19.     />  

运行截图:

代码解释:

大的那个图片是没有任何处理的图片,下面的那个的话我们通过maxWidth和maxHeight限制ImageView最大宽度与高度为200px

就是最多只能显示200*200的图片,我们又设置了一个adjustViewBounds = "true"调整我们的边界来保持图片的长宽比,此时的ImageView宽搞为是87*133

Path 2:

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

属性:

fitXY:对图像的横向与纵向进行独立缩放,使得该图片完全适应ImageView,但是图片的横纵比可能会发生改变

fitStart:保持纵横比缩放图片,知道较长的边与Image的编程相等,缩放完成后将图片放在ImageView的左上角

fitCenter:同上,缩放后放于中间;

fitEnd:同上,缩放后放于右下角;

center:不做任何处理直接让图片在ImageView中居中

centerCrop:保持横纵比缩放图片,知道完全覆盖ImageView,可能会出现图片的显示不完全

centerInside:保持横纵比缩放图片,直到ImageView能够完全地显示图片

matrix:使用matrix方式进行缩放,这个有点复杂,占时不介绍...

实例:

1.fitEnd,fitStart,fitCenter使用,这里以fitEnd作为示范

代码:

[html]   view plain copy print ?

1. <!-- 保持图片的横纵比缩放,知道该图片能够显示在ImageView组件上,并将缩放好的图片显示在imageView的右下角 -->  
2.     <ImageView  
3.         android:src="@drawable/meinv9"  
4.         android:id="@+id/imageView3"  
5.         android:layout_margin="5px"  
6.         android:layout_width="180px"  
7.         android:layout_height="180px"  
8.         android:scaleType="fitEnd"   
9.     />  

运行截图:

代码解释:保持横纵比缩放,直到最长边与imageview边相等,缩放完成,将图片放于右下角

其余两个类似

2.centerGroup与centerInside

代码:

[html]   view plain copy print ?

1. <ImageView  
2.         android:src="@drawable/meinv9"  
3.         android:id="@+id/imageView3"  
4.         android:layout_margin="5px"  
5.         android:layout_width="180px"  
6.         android:layout_height="180px"  
7.         android:scaleType="centerCrop"   
8.     />  
9.     <ImageView  
10.         android:src="@drawable/meinv9"  
11.         android:id="@+id/imageView3"  
12.         android:layout_margin="5px"  
13.         android:layout_width="180px"  
14.         android:layout_height="180px"  
15.         android:scaleType="centerInside"   
16.     />  

运行截图:

代码解释:centerCrop:按横纵比缩放,直接完全覆盖整个ImageView

centerInside:按横纵比缩放,使得ImageView能够完全显示这个图片

path 3:

android:tint:为图片着色,填颜色值

代码:

[html]   view plain copy print ?

1. <ImageView  
2.         android:src="@drawable/meinv9"  
3.         android:id="@+id/imageView3"  
4.         android:layout_margin="5px"  
5.         android:layout_width="180px"  
6.         android:layout_height="180px"  
7.         android:scaleType="centerInside"  
8.         android:tint="#77ff0000"   
9.     />  

运行截图:

代码解释:和上面的差不多,只是多了一句tint:...,对这个图片进行了着色