
5.3 图像类组件
Android提供了比较丰富的图像类组件。用于显示图像的组件称为图像视图组件,用ImageView表示;用于按照行、列的方式来显示多个元素(如图片、文字等)的组件称为网格视图,用GridView表示,它们的继承关系如图5.13所示。

图5.13 图像类组件继承关系图
从图5.13中可以看出,ImageView组件继承自View,它主要用于呈现图像;GridView组件间接继承自AdapterView组件,可以包括多个列表项,并且可以通过合适的方式显示。下面将对这3个组件分别进行介绍。
说明
AdapterView是一个抽象基类,它继承自ViewGroup,属于容器,可以包括多个列表项,并且可以通过合适的方式显示。在指定多个列表项时,使用Adapter对象提供。
5.3.1 图像视图
图像视图(ImageView)用于在屏幕中显示任何Drawable对象,通常用来显示图片。例如,美图秀秀的美化图片界面中显示的图片,以及有道词典的主界面中的图片。
说明
在使用ImageView组件显示图像时,通常需要将要显示的图片放置在res\drawable或者res\mipmap目录中。
在布局文件中添加图像视图,可以使用<ImageView>标记来实现,具体的语法格式如下。

ImageView组件支持的常用XML属性如表5.3所示。
表5.3 ImageView组件支持的XML属性

说明
在表5.3中,只给出了ImageView组件常用的部分属性,关于该组件的其他属性,可以参阅Android官方提供的API文档。
下面编写一个关于ImageView组件的实例。
【例5.05】 单击ImageView更换显示的图像(实例位置:资源包\源码\05\5.05)
在Android Studio中创建Module,名称为ImageView。在该Module中实现本实例,具体步骤如下。
(1)修改新建Module的res/layout目录下的布局文件activity_main.xml,将默认添加的布局管理器修改为相对布局管理器,并将默认添加的TextView组件删除,然后在布局管理器中添加一个ImageView组件并设置默认显示的图片与单击事件的方法,修改后的代码如下。

(2)打开MainActivity类,首先定义图像视图控件与图像标记,然后在onCreate()方法中获取图像视图控件,最后创建onImageView()方法,用于实现更换图像,代码如下。

(3)运行本实例,将显示如图5.14和图5.15所示的界面效果。

图5.14 默认显示的图像

图5.15 更换显示的图像
5.3.2 网格视图
网格视图(GridView)是按照行、列分布的方式来显示多个组件,通常用于显示图片或图标等。例如,QQ相册相片预览界面,以及口袋购物浏览商品界面,都应用了网格视图。
在使用网格视图时,需要在屏幕上添加GridView组件,通常在XML布局文件中使用<GridView>标记实现,其基本语法如下。

GridView组件支持的XML属性如表5.4所示。
表5.4 GridView组件支持的XML属性

在使用GridView组件时,通常使用Adapter类为GridView组件提供数据。
Apapter类是一个接口,代表适配器对象。它是组件与数据之间的桥梁,通过它可以处理数据并将其绑定到相应的组件上,它的常用实现类包括以下几个。
ArrayAdapter:数组适配器,通常用于将数组的多个值包装成多个列表项,只能显示一行文字。
SmipleAdapter:简单适配器,通常用于将List集合的多个值包装成多个列表项。可以自定义各种效果,功能强大。
SmipleCursorAdapter:与SmipleAdapter类似,只不过它须将Cursor(数据库的游标对象)的字段与组件ID对应,从而实现将数据库的内容以列表形式展示出来。
BaseAdapter:是一个抽象类,继承它需要实现较多的方法,通常它可以对各列表项进行最大限度的定制,也具有很高的灵活性。
下面通过一个具体的实例演示如何通过BaseAdapter适配器指定内容的方式创建GridView。
【例5.06】 手机QQ相册界面(实例位置:资源包\源码\05\5.06)
在Android Studio中创建Module,名称为QQ Album。在该Module中实现本实例,具体步骤如下。
(1)修改新建Module的res/layout目录下的布局文件activity_main.xml,将默认添加的布局管理器修改为垂直线性布局管理器,然后在TextView组件上面添加一个ImageView,最后在ImageView下面添加id为gridView的GridView组件,并设置其列数为自动排列,修改后的代码如下。

(2)打开主活动MainActivity,修改默认生成的代码,让MainActivity直接继承Activity,并导入android.app.Activity类,然后在该类中创建一个用于保存图片资源ID的数组,修改后的关键代码如下。

(3)在MainActivity中,创建一个ImageAdapter图片适配器,在该适配器中,首先创建一个新的ImageView,然后将图片通过适配器加载到新的ImageView中,具体代码如下。

(4)在主活动的onCreate()方法中,获取布局文件中添加的GridView组件,并且为其设置适配器,关键代码如下。

(5)打开AndroidManifest.xml文件,将其中的<application>标记的android:theme属性值@style/AppTheme修改为@style/Theme.AppCompat.Light.DarkActionBar,修改后的android:theme属性的代码如下。
android:theme="@style/Theme.AppCompat.Light.DarkActionBar"
(6)运行本实例,将显示如图5.16所示的界面。

图5.16 通过GridView实现手机QQ相册页面