Android 学习之路 之 第3组UI组件：ImageView及其子类（十一）

ImageView 继承自 View 组件，它的主要功能是用于显示图片 —— 实际上这个说法不太严谨，因为它能显示的不仅仅是图片，任何 Drawable 对象都可使用 ImageView 来显示。

除此之外，ImageView 还派生了 ImageButton、ZoomButton 等组件，图 2.29 显示了 ImageView 及其子类的类图。

从图 2.29 可以看出，ImageView 派生了 ImageButton、ZoomButton 等组件，因此 ImageView 支持的 XML 属性、方法，基本上也可应用于 ImageButton、ZoomButton 等组件。

表 2.17 显示了 ImageView 支持的常用 XML 属性及相关方法的说明。

表 2.17 所支持的 android:scaleType 属性可指定如下属性值。

matrix(ImageView.ScaleType.MATRIX)：使用 matrix 方式进行缩放。

fitXY(ImageView.ScaleType.FIT_XY)：对图片横向、纵向独立缩放，使得该图片完全适应于该 ImageView，图片的纵横比可能会改变。

fitStart(ImageView.ScaleType.FIT_START)：保持纵横比缩放图片，直到该图片能完全显示在 ImageView 中（图片较长的边长与 ImageView 相应的边长相等），缩放完成后将该图片放在 ImageView 的左下角。

fitCenter(ImageView.ScaleType.FIT_END)：保持纵横比缩放图片，直到该图片能完全显示在 ImageView 中（图片较长的边长与 ImageView 相应的边长相等），缩放完成后将该图片放在 ImageView 的中央。

fitEnd(ImageView.ScaleType.FIT_END)：保持纵横比缩放图片，直到该图片能完全显示在 ImageView 中（图片较长的边长与 ImageView 相应的边长相等），缩放完成后该图片放在 ImageView 的右下角。

center(ImageView.ScaleType.CENTER)：把图片放在 ImageView 的中间，但不进行任何缩放。

centerCrop(ImageView.ScaleType.CENTER_CROP)：保持纵横比缩放图片，以使得图片能完全覆盖 ImageView。只要图片的最短变边能显示出来即可。

centerInside(ImageView.ScaleType.CENTER_INSIDE)：保持纵横比缩放图片，以使得 ImageView 能完全显示该图片。

为了控制 ImageView 显示的图片，ImageView 提供了如下方法。

setImageDrawable(Drawable drawable)：使用 Drawable 对象设置该 ImageView 显示的图片。

setImageResource(int resId)：使用图片资源 ID 设置该 ImageView 显示的图片。

setImageURI(Uri uri)：使用图片的 URI 设置该 ImageView 显示的图片。

ImageView 的功能比较简单，下面结合一个图片浏览器的实例来示范 ImageView 的功能和用法。

本例的图片浏览器可以改变所查看图片的透明度，可通过调用 ImageView 的 setAlpha 方法来实现。不仅如此，本图片浏览器还可以通过一个小区域来查看图片的原始大小，因此本例会定义两个 ImageView，一个用于查看图片整体，一个用于查看图片局部的细节。

下面是本例的界面布局文件。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" 
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
<LinearLayout
	android:orientation="horizontal" 
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:gravity="center">
<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 -->
<ImageView android:id="@+id/image1"
	android:layout_width="fill_parent"
	android:layout_height="240px"
	android:src="@drawable/shuangta"
	android:scaleType="fitCenter"/>
<!-- 定义显示图片局部细节的ImageView -->	
<ImageView android:id="@+id/image2" 
	android:layout_width="120dp"
	android:layout_height="120dp"
	android:background="#00f"
	android:layout_marginTop="10dp"/>
</LinearLayout>

上面的界面布局中定义了两个 ImageView，其中第一个 ImageView 指定了 android:sacleType="fitCenter" ，这表明 ImageView 显示图片时会进行保持纵横比的缩放，并将缩放后的图片放在该 ImageView 的中央。

为了能动态改变图片的透明度，接下来需要为按钮编写事件监听器，当用户单击按钮时动态改变图片的 Alpha 值。为了能动态显示图片的局部细节，程序为第一个 ImageView 添加 OnTouchListener 监听器，用户在第一个 ImageView 上发生触摸事件时，程序从原始图片中读取相应部分的图片，并将其显示在第二个 ImageView 中。下面是主程序的代码。

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)
			{
				// 控制ImageView显示下一张图片
				image1.setImageResource(
					images[++currentImg % images.length]);
			}
		});
		// 定义改变图片透明度的方法
		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.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;
			}
		});
	}
}

上面的程序中第 32,33 行代码调用了 ImageView 的 setImageResource() 方法动态修改该 ImageView 所显示的图片，当用户单击 “下一张” 按钮时，即可控制 ImageView 显示图片数组中的下一张图片。程序第 59 行代码会动态设置第一个 ImageView 的 Alpha 值，这就是动态改变该图片的透明度了。

程序中的第 73 行至第 89 行代码将会用于从源位图的触碰点 “截取” 源位图，并将截取的部分显示在第二个 ImageView 中。此时用到了 Bitmap  类，它是一个代表位图的类，调用它的 createBitmap() 静态方法即可截取位图的指定部分，该方法返回截取区域生成的新位图。

运行上面的程序，将看到如图 2.30 所示的界面。

ImageView 派生了如下两个子类。

ImageButton：图片按钮。

QuickContactBadge：显示关联到特定联系人的图片。

Button 与 ImageButton  的区别在于，Button 生成的按钮上显示文字，而 ImageButton 上则显示图片。需要指出的是：为 ImageButton 按钮指定 android:text 属性没用（ImageButton 的本质是 ImageView），即使指定了该属性，图片按钮上也不会显示任何文字。

如果考虑使用 ImageButton，图片按钮可以指定 android:src 属性，该属性即可使用静止的图片，也可使用自定义的 Drawable 对象，这样即可开发出随用户动作改变图片的按钮。

ImageButton 派生了一个 ZoomButton，ZoomButton 可以代表 “放大”、“缩小” 两个按钮。ZoomButton 的行为基本类似于 ImageButton，只是 Android 默认提供了 btn_minus、btn_plus 两个 Drawable 资源，只要为 ZoomButton 的 android:src 属性分别指定 btn_minus、btn_plus，即可实现 “放大”、“缩小” 按钮。

实际上 Android 还提供了一个 ZoomControls 组件，该组件相当于同时组合了 “放大”、“缩小” 两个按钮，并允许分别为两个按钮绑定不同的事件监听器。

下面的实例顶一个了多个图片按钮，并定义了两个 ZoomButton。两个 ZoomButton 的 android:src 属性分别指定为 @android:drawable/btn_minus、@android:drawable/btn_plus，这样即可定义 “缩小” 和 “放大” 两个按钮。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
<!-- 普通图片按钮 -->
<ImageButton
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:src="@drawable/blue"
/>
<!-- 按下时显示不同图片的按钮 -->
<ImageButton
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:src="@drawable/button_selector"
/>
<LinearLayout
	android:orientation="horizontal"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_margin="10sp"
	android:layout_gravity="center_horizontal">
	<!-- 分别定义2个ZoomButton，并分别似乎用btn_minus和btn_plus图片 -->
	<ZoomButton
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:id="@+id/btn_zoom_down"
		android:src="@android:drawable/btn_minus" />
	<ZoomButton
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:id="@+id/btn_zoom_up"
		android:src="@android:drawable/btn_plus" />
</LinearLayout>
<!-- 定义ZoomControls组件 -->
<ZoomControls android:id="@+id/zoomControls1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"/>
</LinearLayout>

上面布局文件的开头定义了两个 ImageButton，第一个 ImageButton 的 android:src 指定为一张静态图片，这样无论用户有怎样的行为，该 ImageButton 总显示这张静态图片。第二个 ImageButton 的 android:src 指定为 @drawable/button_selector，该 Drawable 组合了两张图片，可以保证用户单击该按钮时切换图片。

该布局文件中间定义了两个 ZoomButton，并分别指定了放大、缩小 Drawable，该布局文件的结尾处定义了一个 ZoomControls 组件。使用 Activity 显示该布局文件。

对于第二个图片按钮，当用户按下第二个图片按钮时，将会看到按钮的图片被切换成红色图片。

QuickContactBadge 继承了 ImageView，因此它的本质也是图片，也可以通过 android:src 属性指定它显示的图片。QuickContactBadge 额外增加的功能是：该图片可以关联手机中指定联系人，当用户单击该图片时，系统将会打开相应联系人的联系方式界面。

为了让 QuickContactBadge 与特定联系人关联，可以调用如下方法进行关联。

assignContactFromEmail(String emailAddress, boolean lazyLookup)：将该图片关联到指定 E-mail 地址对应的联系人。

assignContactFromPhone(String phoneNumber, boolean lazyLookup)：将该图片关联到指定电话号码对应的联系人。

assignContactUri(Uri contactUri)：将该图片关联到特定 Uri 对应的联系人。

该实例的界面布局文件如下。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent">
<QuickContactBadge
	android:id="@+id/badge"
	android:layout_height="wrap_content"
	android:layout_width="wrap_content"
	android:src="@drawable/ic_launcher"/>
<TextView
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:textSize="16dp"
	android:text="我的偶像"/>
</LinearLayout>

上面的布局文件非常简单，它只是包含了一个 QuickContactBadge 组件与 TextView 组件。接下来在 Activity 代码中可以让 QuickContactBadge 与特定联系人建立关联。下面是该 Activity 的代码。

public class QuickContactBadgeTest extends Activity 
{
	QuickContactBadge badge;
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        // 获取QuickContactBadge组件
        badge = (QuickContactBadge) findViewById(R.id.badge);
        // 将QuickContactBadge组件与特定电话号码对应的联系人建立关联
        badge.assignContactFromPhone("020-88888888", false);
    }
}

上面倒数第 3 行代码将该 QuickContactBadge 组件与电话号码为 02088888888 的联系人建立了关联，当用户单击该图片，系统将会打开该联系人对应的联系方式界面。

运行该实例，可以看到如图 2.32 所示界面。

图 2.32 左边的图片就是 QuickContactBadge 组件，单击该组件，如果手机中存储有电话号码为 02088888888 的联系人，系统将会打开该联系人的联系方式界面，如图 2.33 所示。