![Android从入门到精通(微视频精编版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/217/44510217/b_44510217.jpg)
5.3 图像类组件
Android提供了比较丰富的图像类组件。用于显示图像的组件称为图像视图组件,用ImageView表示;用于按照行、列的方式来显示多个元素(如图片、文字等)的组件称为网格视图,用GridView表示,它们的继承关系如图5.13所示。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P95_10441.jpg?sign=1739201961-WGuDPb8gD9MV39oPoNKeJCCqHsPiHZph-0-ba20de83271f3316d5c02e53340c8466)
图5.13 图像类组件继承关系图
从图5.13中可以看出,ImageView组件继承自View,它主要用于呈现图像;GridView组件间接继承自AdapterView组件,可以包括多个列表项,并且可以通过合适的方式显示。下面将对这3个组件分别进行介绍。
说明
AdapterView是一个抽象基类,它继承自ViewGroup,属于容器,可以包括多个列表项,并且可以通过合适的方式显示。在指定多个列表项时,使用Adapter对象提供。
5.3.1 图像视图
图像视图(ImageView)用于在屏幕中显示任何Drawable对象,通常用来显示图片。例如,美图秀秀的美化图片界面中显示的图片,以及有道词典的主界面中的图片。
说明
在使用ImageView组件显示图像时,通常需要将要显示的图片放置在res\drawable或者res\mipmap目录中。
在布局文件中添加图像视图,可以使用<ImageView>标记来实现,具体的语法格式如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P96_45742.jpg?sign=1739201961-465s66491X4bbYqFKCO4T8hp08wVUZMX-0-6b89da27962c0a9dcc7ebd81fc3d6b30)
ImageView组件支持的常用XML属性如表5.3所示。
表5.3 ImageView组件支持的XML属性
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-T96_45744.jpg?sign=1739201961-12AqDGHdmtT485WqXvfqr1HAW0WqJfzz-0-1d74585c478e67b54511eaa6c51f6e37)
说明
在表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组件并设置默认显示的图片与单击事件的方法,修改后的代码如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P97_45747.jpg?sign=1739201961-vyc8KZOZQwfnzlxiwfMIfqekonUBVzHp-0-e9f508eb3e5e1a698feb051fcc0a61f1)
(2)打开MainActivity类,首先定义图像视图控件与图像标记,然后在onCreate()方法中获取图像视图控件,最后创建onImageView()方法,用于实现更换图像,代码如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P97_45748.jpg?sign=1739201961-4oxjgeJpntm8Db9XemnkFE2MAvqSmP9U-0-bf49abc44a0e4542133bbbac0919b55b)
(3)运行本实例,将显示如图5.14和图5.15所示的界面效果。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P98_10784.jpg?sign=1739201961-i6659yFyvS4EZn0JHH6ixp6Ba9C22s4b-0-b92e428fcc77a203e63b330c14b7645e)
图5.14 默认显示的图像
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P98_10785.jpg?sign=1739201961-NkghYkivTscuzOk3gCjaXLTleV8meyQh-0-fdd2ee6cc1da3799066608cd6485f517)
图5.15 更换显示的图像
5.3.2 网格视图
网格视图(GridView)是按照行、列分布的方式来显示多个组件,通常用于显示图片或图标等。例如,QQ相册相片预览界面,以及口袋购物浏览商品界面,都应用了网格视图。
在使用网格视图时,需要在屏幕上添加GridView组件,通常在XML布局文件中使用<GridView>标记实现,其基本语法如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P98_45751.jpg?sign=1739201961-5AAr65DlE1ClCRO6gO5GIpzTwVmnxXb2-0-2d527d55565d88f686c1012b68c9d80d)
GridView组件支持的XML属性如表5.4所示。
表5.4 GridView组件支持的XML属性
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-T99_45753.jpg?sign=1739201961-h9da1vyOEry3hdUnzN7LSHtqIRE5umcG-0-b220064c243fec105c3f554001ce56f5)
在使用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组件,并设置其列数为自动排列,修改后的代码如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P99_45754.jpg?sign=1739201961-UD0V8dJGj9Z5WTiRUX3r4Wv8rsxn46Od-0-98fc6372de2c563f73aac26849efaf73)
(2)打开主活动MainActivity,修改默认生成的代码,让MainActivity直接继承Activity,并导入android.app.Activity类,然后在该类中创建一个用于保存图片资源ID的数组,修改后的关键代码如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P100_45757.jpg?sign=1739201961-lANpZ0EQdGM0eQH7NIfwPv10eMHQWq11-0-7e3054b4a0f50dec7ee8e41182853b28)
(3)在MainActivity中,创建一个ImageAdapter图片适配器,在该适配器中,首先创建一个新的ImageView,然后将图片通过适配器加载到新的ImageView中,具体代码如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P100_45758.jpg?sign=1739201961-Yb4ebF3F1Vtij11s2MZoYCuxwSVCO1Ol-0-c5d2fce2b377ba6d735d17ae282c8835)
(4)在主活动的onCreate()方法中,获取布局文件中添加的GridView组件,并且为其设置适配器,关键代码如下。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P101_45760.jpg?sign=1739201961-KXhUHJmC1QoOS3FqTKDNvlRDxn61FBwA-0-ccf8753f8582afde2ca00d0b51c14eb9)
(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所示的界面。
![](https://epubservercos.yuewen.com/202D84/23721671201056006/epubprivate/OEBPS/Images/Figure-P101_11310.jpg?sign=1739201961-ZndSG59ynU64g1dAsvyicjXFCKcyaFWj-0-3d700e617477b61c7053fade3011da07)
图5.16 通过GridView实现手机QQ相册页面