ImageView的功能和使用

以你之姓@ 2023-10-10 04:59 25阅读 0赞

ImageView继承自View类,它的功能用于显示图片, 或者显示Drawable对象

xml属性:

src和background区别 参考:[http://hi.baidu.com/sunboy\_2050/item/843aaed77256fc1620e250f9][http_hi.baidu.com_sunboy_2050_item_843aaed77256fc1620e250f9]

**区别一：**图片透明度

两者都可以设置ImageView的背景

android:src：在设置ImageView的setAlpha()时有效果

android:background：在设置ImageView的setAlpha()时无效果

**区别二：**图片拉伸

background会根据ImageView的长宽进行拉伸，按照组件的大小来放大或者缩小图片。

src就存放的是原图的大小，不会进行拉伸，原图显示，不该变图片的大小

例如：ImageView的长宽都设置为：100px

1  background 引用图片

![cf1b9d16fdfaaf51e5a6ce2a8c5494eef11f7ad9.jpg][]

2  src 引用图片

![cc11728b4710b9128660b96bc3fdfc0393452285.jpg][]

其他属性参考文章:[http://407827531.iteye.com/blog/1117199][http_407827531.iteye.com_blog_1117199]

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

下面给出一个实例代码: 实现图片透明度变化,以及缩放

public class ImageViewTest extends Activity
 {
 //定义一个访问图片的数组
 int[] images = new int[]{
 R.drawable.lijiang,
 R.drawable.qiao,
 R.drawable.shuangta,
 R.drawable.shui,
 R.drawable.xiangbi,
 };
 //定义默认显示的图片
 int currentImg = 2;
 //定义图片的初始透明度
 private int alpha = 255;
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 final Button plus = (Button)findViewById(R.id.plus);
 final Button minus = (Button)findViewById(R.id.minus);
 final ImageView image1 = (ImageView)findViewById(R.id.image1);
 final ImageView image2 = (ImageView)findViewById(R.id.image2);
 final Button next = (Button)findViewById(R.id.next);
 //定义查看下一张图片的监听器
 next.setOnClickListener(new OnClickListener()
 {
 @Override
 public void onClick(View v)
 {
 if (currentImg >= 4)
 {
 currentImg = -1;
 }
 BitmapDrawable bitmapDrawable = (BitmapDrawable) image1
 .getDrawable();
 //如果图片还未回收，先强制回收该图片,避免OutOfMemoryError异常
 if (!bitmapDrawable.getBitmap().isRecycled())
 {
 bitmapDrawable.getBitmap().recycle();
 }
 //改变ImageView显示的图片
 image1.setImageBitmap(BitmapFactory.decodeResource(getResources()
 , images[++currentImg]));
 }
 });
 //定义改变图片透明度的方法
 OnClickListener listener = new OnClickListener()
 {
 @Override
 public void onClick(View v)
 {
 if(v == plus)
 {
 alpha += 20;
 }
 if(v == minus)
 {
 alpha -= 20;
 }
 if(alpha >= 255)
 {
 alpha = 255;
 }
 if(alpha <= 0)
 {
 alpha = 0;
 }
 //改变图片的透明度
 image1.setAlpha(alpha); 
 }
 };
 //为两个按钮添加监听器
 plus.setOnClickListener(listener);
 minus.setOnClickListener(listener);
 //当点击image1图片某个部分,他就会显示在image2中
 image1.setOnTouchListener(new OnTouchListener()
 {
 @Override
 public boolean onTouch(View view, MotionEvent event)
 {
 BitmapDrawable bitmapDrawable = (BitmapDrawable) image1
 .getDrawable();
 //获取第一个图片显示框中的位图
 Bitmap bitmap = bitmapDrawable.getBitmap();
 //bitmap图片实际大小与第一个ImageView的缩放比例
 double scale = bitmap.getWidth() / 320.0;
 //获取需要显示的图片的开始点
 int x = (int) (event.getX() * scale);
 int y = (int) (event.getY() * scale);
 if (x + 120 > bitmap.getWidth())
 {
 x = bitmap.getWidth() - 120;
 }
 if (y + 120 > bitmap.getHeight())
 {
 y = bitmap.getHeight() - 120;
 }
 //显示图片的指定区域
 image2.setImageBitmap(Bitmap.createBitmap(bitmap, x, y, 120, 120));
 image2.setAlpha(alpha);
 return false;
 }
 });
 }
 }

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >
 
 <LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:gravity="center"
 android:orientation="horizontal" >
 
 <Button
 android:id="@+id/plus"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="增大透明度" />
 
 <Button
 android:id="@+id/minus"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="降低透明度" />
 
 <Button
 android:id="@+id/next"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="下一张" />
 </LinearLayout>
 
 
 <ImageView
 android:id="@+id/image1"
 android:layout_width="fill_parent"
 android:layout_height="240px"
 android:background="#0000ff"
 android:scaleType="fitCenter"
 android:src="@drawable/shuangta" />
 
 
 <ImageView
 android:id="@+id/image2"
 android:layout_width="120dp"
 android:layout_height="120dp"
 android:layout_marginTop="10dp"
 android:background="#0000ff" />
 
 </LinearLayout>

转载于:https://www.cnblogs.com/android-zcq/p/3139566.html

[http_hi.baidu.com_sunboy_2050_item_843aaed77256fc1620e250f9]: http://hi.baidu.com/sunboy_2050/item/843aaed77256fc1620e250f9
[cf1b9d16fdfaaf51e5a6ce2a8c5494eef11f7ad9.jpg]: http://g.hiphotos.baidu.com/space/pic/item/cf1b9d16fdfaaf51e5a6ce2a8c5494eef11f7ad9.jpg
[cc11728b4710b9128660b96bc3fdfc0393452285.jpg]: http://g.hiphotos.baidu.com/space/pic/item/cc11728b4710b9128660b96bc3fdfc0393452285.jpg
[http_407827531.iteye.com_blog_1117199]: http://407827531.iteye.com/blog/1117199