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 所示。