Android ImageView和ImageButton：图片视图和图片按钮

待我称王封你为后i 2021-12-09 23:21 564阅读 0赞

ImageView 是用于显示图片的组件，在很多场合都有比较普遍的使用。  
  
ImageView 可以显示任意图像，加载各种来源的图片（如资源或图片库）。它还可以负责计算图片的尺寸，以便在任意的布局中使用，并且可以提供缩放或者着色等选项供开发者使用。  
  
ImageButton 是 ImageView 的子类，相当于一个表明是图片而不是文字的 Button。其使用方法和 Button 完全相同。  
  
下面通过一个实例来了解一下这两个组件的使用方法。在工程 WidgetDemo 的布局文件 main.xml 中添加一个名为 ImageButtonDemo 的 Button，用以启动 ImageButtonActivity。  
  
在 main.xml 中添加代码如下：

1.  <Button
2.  android:id="@+id/button10"
3.  android:layout\_width="wrap\_content"
4.  android:layout\_height="wrap\_content"
5.  android:text="ImageButtonDemo" />

单击Button并启动RatingBarActivity的代码如下：

1.  Button imgbtn = (Button)this.findViewById(R.id.button10);
2.  mgbtn.setOnClickListener(new View.OnClickListener()\{
3.  @Override
4.  public void onClick(View v)\{
5.  Intent intent;
6.  intent = new Intent(MainActivity.this, ImageButtonActivity.class);
7.  startActivity(intent);
8.  \}
9.  \});

同时在 [Android][]Manifest.xml 文件中声明该 Activity：

ImageButtonActivity 的运行效果如图 1 所示。

![ImageButtonActivity的运行效果][ImageButtonActivity]  
图 1 ImageButtonActivity 的运行效果

ImageButtonActivity 的布局文件 imgbtn.xml 内容如下：

1.  <?xml version="1.0" encoding="utf-8"?>
2.  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.  android:layout\_width="match\_parent"
4.  android:layout\_height="match\_parent"
5.  android:orientation="vertical">
6.  
7.  <ImageView
8.  android:id="@+id/imageView1"
9.  android:layout\_width="250dp"
10. android:layout\_height="250dp"
11. android:src="@drawable/girl"/>
12. <ImageButton
13. android:id="@+id/imageButton1"
14. android:layout\_width="wrap\_content"
15. android:layout\_height="wrap\_content"
16. android:src="@drawable/ic\_launcher"/>
17. </LinearLayout>

该文件使用 LinearLayout 布局，其中放入了一个 ImageView 组件和一个 ImageButton 组件。两个组件都通过 android:src 属性指定了显示的图片。  
  
该实例用到了两个图片资源，一个为 girl，另一个为 ic\_launcher，如图 2 所示。  
  
由于 Android 会根据手机设备的配置高低选择不同的资源，因此为了应用程序的通用性，在三个 drawable 文件夹下都放置了 girl.gif 图像。ic\_launcher.png 是系统自带的资源文件。

![工程中的图片资源][5-1Z4041J553596.jpg]  
图 2 工程中的图片资源

ImageButtonActivity.java 的代码如下：

1.  package introduction.android.widgetdemo;
2.  
3.  
4.  import android.app.Activity;
5.  import android.os.Bundle;
6.  import android.view.View;
7.  
8.  import android.view.ViewGroup.LayoutParams;
9.  import android.widget.ImageButton;
10. import android.widget.ImageView;
11. 
12. public class ImageButtonActivity extends Activity \{
13. private ImageButton imgbtn;
14. private ImageView imgview;
15. 
16. @Override
17. protected void onCreate(Bundle savedInstanceState) \{
18. // TODO Auto-generated method stub
19. super.onCreate(savedInstanceState);
20. setContentView(R.layout.imgbtn);
21. imgbtn = (ImageButton) this.findViewById(R.id.imageButton1);
22. imgview = (ImageView) this.findViewById(R.id.imageView1);
23. imgbtn.setOnClickListener(new View.OnClickListener() \{
24. @Override
25. public void onClick(View v) \{
26. // TODO Auto-generated method stub
27. LayoutParams params = imgview.getLayoutParams();
28. params.height += 3;
29. params.width += 3;
30. imgview.setLayoutParams(params);
31. \}
32. \});
33. \}
34. \}

ImageButtonActivity 为 ImageButton 添加了单击监听器，对用户单击 imgbtn 的事件进行了处理。用户每次单击图片按钮，都把 ImageView 组件的宽和高增大 3。随着用户的不断单击，ImageView 中显示的图片越来越大，显示了 ImageView 组件对图片的缩放功能。

[Android]: http://c.biancheng.net/android/
[ImageButtonActivity]: /images/20211209/a50343f8bb18475288e2566fc1634404.png
[5-1Z4041J553596.jpg]: /images/20211209/7437d2b3ecf145d3a7259cfa9bf34c78.png