Android UI 设计(12):ListView 练习(制作水果选择菜单)

功能说明:

通过使用ListView制作一个水果选择菜单,菜单中有多种水果,菜单每种水果以水果选择框, 水果图片, 水果名称的形式展现在ListView中的每个Item中。

1. 通过水果多选框可以选择想要的水果。
2. 通过点击每条Item的任意地方也可以选择水果。
3. ListView最顶端设置有顶部全选按钮,通过点击按钮可以全部选中水果。
4. ListView最低端设置有底部反选按钮,通过点击按钮可以反选水果。

这只是一个简单的小练习,界面比较简单粗略,仅用来练习使用,大神们不要嫌弃……嘿嘿

Frist.显示列表的实现

做什么都是一步一步来的,首先我们要先构建显示列表,这就要用到我们在前一节所用到的自定义Adapter,通过自定义Adapter来构建显示列表。
回想一下自定义Adapter的步骤:

  • M,即Model。构建数据。首先我们要先创建显示在水果菜单上的水果数据。定义一个Fruit类。

  • V,即View。构建数据显示的视图。我们是以什么样的形式来显示Fruit的。然后自定义一个Adapter,通过自定义的Adapter将水果数据添加到View视图中。这里我们用下图方式来构建View视图,也就是水果显示的方式。布局文件就不在贴出,在最后会给出源代码。

    10-12-3

    自定义的Adapter:

– C,即Control。控制总体,首先初始化数据,然后将自己设置好的View添加到ListView中。

Activity中的布局:

Activity类:

结果:

10-12-4

Two.选择框选择水果功能的实现

第一步我们已经完成了基本的显示功能。让我们来添加第二个功能。通过点击水果图片前面的选择框来中水果。这就用到了CheckBox的点击事件。我们通过监听选择框的状态来断定选择的水果。

对自定义Adapter 修改如下(在getView()方法中添加店家事件。)

结果:
10-12-4

Three.点击Item任意处选择水果功能的实现

这个功能是很常见的,举例来说,我们逛淘宝,商品的展示就是用ListView控件来实现的,我们有时候想要进入某个商品的具体界面只需点击Item的任意一个位置就可以。我们现在就要实现这个功能。
实现这个功能前我们首先要了解一个知识点,当在一个Button上放置一个CheckBox,RadioButton或者其他按钮时,Button的点击就会被其上面的CheckBox,RadioButton或者其他按钮给“吃掉”。当我们点击屏幕时,是屏幕首先接收到这个点击事件,然后他会将这个点击事件通过硬件等一系列传送后报给View,然后View再将点击事件报给在顶端的CheckBox,RadioButton或者其他按钮,当顶端的CheckBox,RadioButton或者其他按钮接收到以后,一看不是自己的点击事件,就会将其给吃掉,不做任何反应,以至于点击底端的Button并没有反应。
解决此问题首先要让顶端的CheckBox,RadioButton或者其他按钮“不吃掉”底端按钮的点击,这是需要在CheckBox布局文件中添加如下语句:

在Activity添加ListView的点击事件,在onCreate中添加如下:

将ListView的点击与CheckBox相关联,在自定义Adapter中添加如下方法:

结果:

10-12-6

Four.顶部按钮全选的实现

这里用到了ListView的一个功能:添加Header,在ListView的顶端添加布局。这里我们实现的功能是添加顶部按钮,所以我们只需要在顶端布局中添加一个按钮即可。

顶部布局:

自定义Adapter中添加全选操作:

Activity中添加:

结果:
10-12-7

Four.底部按钮反选的实现

这个和顶部按钮全选是先是相同的,只是实现的功能不同,此处不再赘述,直接上代码。

底部布局:

自定义Adapter中添加全选操作:

Activity中添加:

结果:

10-12-8

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部