ImageView属性详解

柔光的暖阳◎ 2022-05-16 08:57 204阅读 0赞

**正文**

一、结构

java.lang.Object

[android.view.View][]

android.widget.ImageView

已知直接子类：

ImageButton, QuickContactBadge

已知间接子类：

ZoomButton

二、类概述

显示任意图像，例如图标。ImageView类可以加载各种来源的图片（如资源或图片库），需要计算图像的尺寸，比便它可以在其他布局中使用，并提供例如缩放和着色（渲染）各种显示选项。

三、XML属性

<table style="color:rgb(0,0,0); font-family:Helvetica,Tahoma,Arial,sans-serif; font-size:14px; line-height:25.200000762939453px; text-align:left; border-collapse:collapse; margin-left:5.4pt; border:medium none"> 
 <tbody> 
 <tr> 
 <td style="font-size:1em; padding:0cm 5.4pt; width:134.7pt; background-color:rgb(222,232,241); border:1pt solid black"> 属性名称 </td> 
 <td style="font-size:1em; border-bottom-color:black; border-width:1pt 1pt 1pt medium; border-style:solid solid solid none; padding:0cm 5.4pt; width:262.2pt; background-color:rgb(222,232,241); border-top-color:black; border-right-color:black"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="font-size:1em; border-width:medium 1pt 1pt; border-style:none solid solid; padding:0cm 5.4pt; width:134.7pt"> android:adjustViewBounds </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:262.2pt"> 是否保持宽高比。需要与maxWidth、MaxHeight一起使用，否则单独使用没有效果。 </td> 
 </tr> 
 <tr> 
 <td style="font-size:1em; border-width:medium 1pt 1pt; border-style:none solid solid; padding:0cm 5.4pt; width:134.7pt"> android:cropToPadding </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:262.2pt"> 是否截取指定区域用空白代替。单独设置无效果，需要与scrollY一起使用，效果如下，实现代码见代码部分： <img width="153" alt="" src="http://images.cnblogs.com/cnblogs_com/over140/2010/9/2010-9-17_2.jpg" height="80" style="border:0px">&nbsp; &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="font-size:1em; border-width:medium 1pt 1pt; border-style:none solid solid; padding:0cm 5.4pt; width:134.7pt"> android:maxHeight </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:262.2pt"> 设置View的最大高度，单独使用无效，需要与setAdjustViewBounds一起使用。如果想设置图片固定大小，又想保持图片宽高比，需要如下设置： 1）&nbsp;设置setAdjustViewBounds为true； 2）&nbsp;设置maxWidth、MaxHeight； 3）&nbsp;设置设置layout_width和layout_height为wrap_content。 </td> 
 </tr> 
 <tr> 
 <td style="font-size:1em; border-width:medium 1pt 1pt; border-style:none solid solid; padding:0cm 5.4pt; width:134.7pt"> android:maxWidth </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:262.2pt"> 设置View的最大宽度。同上。 </td> 
 </tr> 
 <tr> 
 <td style="font-size:1em; border-width:medium 1pt 1pt; border-style:none solid solid; padding:0cm 5.4pt; width:134.7pt"> android:scaleType </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:262.2pt"> 设置图片的填充方式。 
 <table style="border-collapse:collapse; border:medium none"> 
 <tbody> 
 <tr> 
 <td style="font-size:1em; padding:0cm 5.4pt; width:72.3pt; border:1pt solid black"> matrix </td> 
 <td style="font-size:1em; border-bottom-color:black; border-bottom-width:1pt; border-bottom-style:solid; border-left-width:medium; border-left-style:none; padding:0cm 5.4pt; width:1cm; border-top-color:black; border-top-width:1pt; border-top-style:solid"> 0 </td> 
 <td style="font-size:1em; border-bottom-color:black; border-bottom-width:1pt; border-bottom-style:solid; border-left-width:medium; border-left-style:none; padding:0cm 5.4pt; width:106.3pt; border-top-color:black; border-top-width:1pt; border-top-style:solid"> 用矩阵来绘图 </td> 
 <td style="font-size:1em; border-bottom-color:black; border-width:1pt 1pt 1pt medium; border-style:solid solid solid none; padding:0cm 5.4pt; width:42.55pt; border-top-color:black; border-right-color:black"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="font-size:1em; border-width:medium 1pt 1pt; border-style:none solid solid; padding:0cm 5.4pt; width:72.3pt"> fitXY </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:1cm"> 1 </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:106.3pt"> 拉伸图片（不按比例）以填充View的宽高 <img alt="" src="http://images.cnblogs.com/cnblogs_com/over140/2010/9/scaleTypeFitXY.PNG" style="border:0px"> &nbsp; </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:42.55pt"> layout_ height :30px layout_ width :120px </td> 
 </tr> 
 <tr> 
 <td style="font-size:1em; border-width:medium 1pt 1pt; border-style:none solid solid; padding:0cm 5.4pt; width:72.3pt"> fitStart </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:1cm"> 2 </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:106.3pt"> 按比例拉伸图片，拉伸后图片的高度为View的高度，且显示在View的左边 <img alt="" src="http://images.cnblogs.com/cnblogs_com/over140/2010/9/scaleTypeFitStart.PNG" style="border:0px"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="font-size:1em; border-width:medium 1pt 1pt; border-style:none solid solid; padding:0cm 5.4pt; width:72.3pt"> fitCenter </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:1cm"> 3 </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:106.3pt"> 按比例拉伸图片，拉伸后图片的高度为View的高度，且显示在View的中间 <img alt="" src="http://images.cnblogs.com/cnblogs_com/over140/2010/9/scaleTypeFitCenter.PNG" style="border:0px"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="font-size:1em; border-width:medium 1pt 1pt; border-style:none solid solid; padding:0cm 5.4pt; width:72.3pt"> fitEnd </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:1cm"> 4 </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:106.3pt"> 按比例拉伸图片，拉伸后图片的高度为View的高度，且显示在View的右边 <img alt="" src="http://images.cnblogs.com/cnblogs_com/over140/2010/9/scaleTypeFitEnd.PNG" style="border:0px"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="font-size:1em; border-width:medium 1pt 1pt; border-style:none solid solid; padding:0cm 5.4pt; width:72.3pt"> center </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:1cm"> 5 </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:106.3pt"> 按原图大小显示图片，但图片宽高大于View的宽高时，截图图片中间部分显示<img alt="" src="http://images.cnblogs.com/cnblogs_com/over140/2010/9/scaleTypeCenter.PNG" style="border:0px"> &nbsp; </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:42.55pt"> &nbsp; layout_ height :60px layout_ width :80px padding :10px &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="font-size:1em; border-width:medium 1pt 1pt; border-style:none solid solid; padding:0cm 5.4pt; width:72.3pt"> centerCrop </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:1cm"> 6 </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:106.3pt"> 按比例放大原图直至等于某边View的宽高显示。<img alt="" src="http://images.cnblogs.com/cnblogs_com/over140/2010/9/scaleTypeCenterCrop.PNG" style="border:0px"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="font-size:1em; border-width:medium 1pt 1pt; border-style:none solid solid; padding:0cm 5.4pt; width:72.3pt"> centerInside </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:1cm"> 7 </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:106.3pt"> 当原图宽高或等于View的宽高时，按原图大小居中显示；反之将原图缩放至View的宽高居中显示。<img alt="" src="http://images.cnblogs.com/cnblogs_com/over140/2010/9/scaleTypeCenterInside.PNG" style="border:0px"> &nbsp; </td> 
 </tr> 
 </tbody> 
 </table> </td> 
 </tr> 
 <tr> 
 <td style="font-size:1em; border-width:medium 1pt 1pt; border-style:none solid solid; padding:0cm 5.4pt; width:134.7pt"> android:src </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:262.2pt"> 设置View的drawable(如图片，也可以是颜色，但是需要指定View的大小) </td> 
 </tr> 
 <tr> 
 <td style="font-size:1em; border-width:medium 1pt 1pt; border-style:none solid solid; padding:0cm 5.4pt; width:134.7pt"> android:tint </td> 
 <td style="font-size:1em; border-width:medium 1pt 1pt medium; border-style:none solid solid none; padding:0cm 5.4pt; width:262.2pt"> 将图片渲染成指定的颜色。见下图： <img alt="" src="http://images.cnblogs.com/cnblogs_com/over140/2010/9/2010-9-17_1.jpg" style="border:0px">左边为原图，右边为设置后的效果，见后面代码。 </td> 
 </tr> 
 </tbody> 
</table>

四、代码

4.1　　android:tint

Java代码   [![收藏代码][icon_star.png]][icon_star.png 1]

1. <ImageView android:background="@android:color/white" android:src="@drawable/btn\_mode\_switch\_bg"  
2.         android:layout\_width="wrap\_content" android:layout\_height="wrap\_content"></ImageView>  
3.     <ImageView android:layout\_marginLeft="5dp" android:background="@android:color/white" android:tint="\#ffff00" android:src="@drawable/btn\_mode\_switch\_bg"  
4.         android:layout\_width="wrap\_content" android:layout\_height="wrap\_content"></ImageView>

4.2　　android:cropToPadding

Java代码   [![收藏代码][icon_star.png]][icon_star.png 1]

1. <ImageView android:background="@android:color/white" android:scrollY="-10px" android:cropToPadding="true" android:src="@drawable/btn\_mode\_switch\_bg"  
2.         android:layout\_width="wrap\_content" android:layout\_height="wrap\_content"></ImageView>  
3.     <ImageView android:background="@android:color/white" android:scrollY="10px" android:cropToPadding="true" android:src="@drawable/btn\_mode\_switch\_bg"  
4.         android:layout\_width="wrap\_content" android:layout\_height="wrap\_content"></ImageView>  
5.     <ImageView android:paddingTop="10px"  android:background="@android:color/white" android:scrollY="10px" android:cropToPadding="true" android:src="@drawable/btn\_mode\_switch\_bg"  
6.         android:layout\_width="wrap\_content" android:layout\_height="wrap\_content"></ImageView>  
7.     <ImageView android:paddingTop="10px" android:background="@android:color/white" android:scrollY="10px" android:cropToPadding="false" android:src="@drawable/btn\_mode\_switch\_bg"  
8.         android:layout\_width="wrap\_content" android:layout\_height="wrap\_content"></ImageView>   
9.

[android.view.View]: http://www.cnblogs.com/over140/archive/2010/09/11/1823806.html
[icon_star.png]: http://407827531.iteye.com/images/icon_star.png
[icon_star.png 1]: /images/20220516/536f95d8832044d89afa152526cc1fd8.png