通过前面几期的学习,TextView控件及其子控件基本学习完成,可以在Android屏幕上显示一些文字或者按钮,那么从本期开始来学习如何进行图片展示,这就是涉及到另外一个非常重要的控件家族,那就是ImageView。
一、认识ImageView
ImageView继承自View组件,主要功能是用于显示图片,可以显示任意图像。ImageView与其子类的类图如下图所示。
从上图可以看到,ImageView 还派生出了 ImageButton、ZoomButton等组件,因此ImageView支持的XML属性、方法,基本上也可应用于ImageButton、 ZoomButton 等组件。ImageView 还QuickContactBadge,显示关联到特定联系人的图片。
下表显示了ImageView支持的XML属性及相关方法。
XML属性 | 相关方法 | 说明 |
---|---|---|
android:adjustViewBounds | setAdjustViewBounds(boolean) | 设置 ImageView是否调整自己的边界来保持所显示的图片长宽比 |
android:cropToPadding | setCropToPadding(boolean) | 如果属性设置为true,组件将会被裁剪到保留ImageView的padding |
android:maxHeight | setMaxHeight(int) | 设置 ImageView最大高度 |
android:maxWidth | setMaxWidth(int) | 设置 ImageView最大宽度 |
android:scaleType | setScaleType(ImageView.ScaleType) | 设置所显示的图片如何适应ImageView的大小 |
android:src | setImageResource(int) | 设置ImageView所显示的Drawable对象的ID |
ImageView有两个可以设置图片的属性,分别是:android:src和android:background,其中background通常指的是背景,而src指的是内容。另外当使用src填入图片时,是按照图片大小直接填充,并不会进行拉伸,而使用background填入图片,则是会根据ImageView给定的宽度来进行拉伸。
ImageView所支持的android:scaleType属性可指定如下属性值。
matrix ( ImageView.ScaleType.MATRIX):使用 matrix 方式进行缩放。
fitXY ( lmageView.ScaleType.FIT_XY):对图片横向、纵向独立缩放,使得该图片完全适应于该ImageView,图片的纵横比可能会改变。
fitStart (ImageView.ScaleType.FIT_START ):保持纵横比缩放图片,直到该图片能完全显示在ImageView中(图片较长的边长与ImageView相应的边长相等),缩放完成后将该图片放在ImageView的左上角。
fitCenter (ImageView.ScaleType.FIT_CENTER ):保持纵横比缩放图片,直到该图片能完全显示在ImageView中(图片较长的边长与ImageView相应的边长相等), 缩放完成后将该图片放在ImageView的中央。
fitEnd (ImageView.ScaleType.FIT_END ):保持纵横比缩放图片,直到该图片能完全显示在ImageView中(图片较长的边长与ImageView相应的边长相等),缩放完成后将该图片放在ImageView的右下角。
center ( ImageView.ScaleType.CENTER):把图片放在 ImageView 的中间,但不进行任何缩放。
centerCrop ( ImageView.ScaleType.CENTER_CROP):保持纵横比缩放图片,以使得图片能完全覆盖ImageView。只要图片的最短边能显示出来即可。
centerlnside (ImageView.ScaleType.CENTER_INSIDE ):保持纵横比缩放图片,以使得ImageView能完全显示该图片。
为了控制ImageView显示的图片,ImageView提供了如下方法。
setlmageBitmap(Bitmap bm):使用 Bitmap 位图设置该 ImageView 显示的图片。
setlmageDrawable(Drawable drawable):使用 Drawable 对象设置该 ImageView 显示的图片。
setlmageResource(int resld):使用图片资源ID设置该ImageView显示的图片。
setlmageURI(Uri uri):使用图片的URI设置该ImageView显示的图片。
二、ImageView示例
接下来通过一个简单的示例程序来学习ImageView的使用用法。
首先从网上下载一张图片素材,然后放到res/drawable/目录下,在到res/layout/目录下创建一个image_layout.xml文件,然后在其中填充如下代码片段:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/girl"/>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:scaleType="fitXY"
android:src="@drawable/girl"/>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="center"
android:src="@drawable/girl"/>
</LinearLayout>
上面的界面布局文件中定义了三个ImageView,其中第一个ImageView为默认属性和自动宽高,第二个ImageView指定了 android:scaleType="fitXY",第三个ImageView指定了 android:scaleType="center"。
然后修改一下app/src/java/MainActivity.java文件中加载的布局文件为新建的image_layout.xml文件。运行程序,可以看到下图所示界面效果。
到此,ImageView的示例结束,关于ImageView的更多用法可以参照上面的XML属性和方法参照表,建议多动手练习。