服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - Android仿QQ好友列表实现列表收缩与展开

Android仿QQ好友列表实现列表收缩与展开

2021-04-28 15:09林炳文Evankaka Android

这篇文章主要介绍了Android仿QQ好友列表实现列表收缩与展开,感兴趣的小伙伴们可以参考一下

expandablelistview是一个垂直滚动显示两级列表项的视图,与listview不同的是,它可以有两层:每一层都能够被独立的展开并显示其子项。
好友qq列表,可以展开,可以收起,在android中,以往用的比较多的是listview,虽然可以实现列表的展示,但在某些情况下,我们还是希望用到可以分组并实现收缩的列表,那就要用到android的expandablelistview,今天研究了一下这个的用法,也参考了很多资料动手写了一个小demo,实现了基本的功能,下面直接上效果图以及源代码~!
本文效果:

Android仿QQ好友列表实现列表收缩与展开

Android仿QQ好友列表实现列表收缩与展开

一、实现原理
1、首先必须在布局文件中定义一个expandablelistview
2、其次创建一级条目对应的布局文件group
3、创建二级条目对应的布局文件child
4、加载expandablelistview组件的activity必须继承自expandablelistactivity
二、布局与代码
1、首先在主布局中activity_main.xml

?
1
2
3
4
5
6
7
8
9
10
11
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >
 
  <expandablelistview
    android:id="@id/android:list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />
 
</linearlayout>

2、其次在drawable文件夹定义布局一级列表groups.xml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<linearlayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
>
  <textview
    android:id="@+id/textgroup"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingleft="40px"
    android:paddingtop="6px"
    android:paddingbottom="6px"
    android:textsize="25sp"
    android:text="no data"
  />
 
</linearlayout>

3、接着在drawable文件夹定义布局二级列表childs.xml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<linearlayout
  xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
>
   <textview 
    android:id="@+id/textchild"
  android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingleft="60px"
    android:paddingtop="10px"
    android:paddingbottom="10px"
    android:textsize="20sp"
  android:text="no data"
/>
 
</linearlayout>

4、然后就是初始化和使用了

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
package com.example.expandablelistview;
 
import java.util.arraylist;
import java.util.hashmap;
import java.util.list;
import java.util.map;
import android.os.bundle;
import android.app.expandablelistactivity;
import android.util.displaymetrics;
import android.view.view;
import android.widget.expandablelistview;
import android.widget.simpleexpandablelistadapter;
import android.widget.toast;
 
public class mainactivity extends expandablelistactivity {
  /**
   * 创建一级条目容器
   */
  list<map<string, string>> gruops = new arraylist<map<string, string>>();
  /**
   * 存放内容, 以便显示在列表中
   */
  list<list<map<string, string>>> childs = new arraylist<list<map<string, string>>>();
 
  @override
  public void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
    setlistdata();
  }
 
  /**
   * 设置列表内容
   */
  public void setlistdata() {
    // 创建二个一级条目标题
    map<string, string> title_1 = new hashmap<string, string>();
    map<string, string> title_2 = new hashmap<string, string>();
    map<string, string> title_3 = new hashmap<string, string>();
    title_1.put("group", "林炳文");
    title_2.put("group", "文炳林");
    gruops.add(title_1);
    gruops.add(title_2);
 
    // 创建二级条目内容
    // 内容一
    map<string, string> title_1_content_1 = new hashmap<string, string>();
    map<string, string> title_1_content_2 = new hashmap<string, string>();
    map<string, string> title_1_content_3 = new hashmap<string, string>();
    title_1_content_1.put("child", "工人");
    title_1_content_2.put("child", "学生");
    title_1_content_3.put("child", "农民");
 
    list<map<string, string>> childs_1 = new arraylist<map<string, string>>();
    childs_1.add(title_1_content_1);
    childs_1.add(title_1_content_2);
    childs_1.add(title_1_content_3);
 
    // 内容二
    map<string, string> title_2_content_1 = new hashmap<string, string>();
    map<string, string> title_2_content_2 = new hashmap<string, string>();
    map<string, string> title_2_content_3 = new hashmap<string, string>();
    title_2_content_1.put("child", "猩猩");
    title_2_content_2.put("child", "老虎");
    title_2_content_3.put("child", "狮子");
    list<map<string, string>> childs_2 = new arraylist<map<string, string>>();
    childs_2.add(title_2_content_1);
    childs_2.add(title_2_content_2);
    childs_2.add(title_2_content_3);
 
    childs.add(childs_1);
    childs.add(childs_2);
 
    /**
     * 创建expandablelist的adapter容器 参数: 1.上下文 2.一级集合 3.一级样式文件 4. 一级条目键值
     * 5.一级显示控件名 6. 二级集合 7. 二级样式 8.二级条目键值 9.二级显示控件名
     *
     */
    simpleexpandablelistadapter sela = new simpleexpandablelistadapter(
        this, gruops, r.drawable.groups, new string[] { "group" },
        new int[] { r.id.textgroup }, childs, r.drawable.childs,
        new string[] { "child" }, new int[] { r.id.textchild });
    // 加入列表
    setlistadapter(sela);
  }
 
  /**
   * 列表内容按下
   */
  @override
  public boolean onchildclick(expandablelistview parent, view v,
      int groupposition, int childposition, long id) {
    toast.maketext(
        mainactivity.this,
        "您选择了"
            + gruops.get(groupposition).tostring()
            + "子编号"
            + childs.get(groupposition).get(childposition)
                .tostring(), toast.length_short).show();
    return super.onchildclick(parent, v, groupposition, childposition, id);
  }
 
  /**
   * 二级标题按下
   */
  @override
  public boolean setselectedchild(int groupposition, int childposition,
      boolean shouldexpandgroup) {
    return super.setselectedchild(groupposition, childposition,
        shouldexpandgroup);
  }
 
  /**
   * 一级标题按下
   */
  @override
  public void setselectedgroup(int groupposition) {
    super.setselectedgroup(groupposition);
  }
}

5、效果
这是我手机上的效果,点击工人。学生等二级列表时,我手机上会有提示框出现的,但是不知为什么录制下来就是没有。

Android仿QQ好友列表实现列表收缩与展开

三、自定义列表图标
上面的图标是系统自己生成的,下面我们要改成自己的
1、更改自定义图标
在drawable文件夹下新建expandablelistview_change.xml

?
1
2
3
4
5
<?xml version = "1.0"  encoding = "utf-8"?>
<selector  xmlns:android = "http://schemas.android.com/apk/res/android" >   
   <item android:state_expanded = "true"  android:drawable = "@drawable/w2"/>   
   <item android:drawable = "@drawable/w1"/>   
</selector > 

2、修改上面布局activity.main.xml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >
 
  <expandablelistview
    android:id="@id/android:list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#f5f5f5"
    android:cachecolorhint="#f5f5f5"
    android:groupindicator="@drawable/expandablelistview_change" />
 
</linearlayout>

其实就是加了一句
android:groupindicator="@drawable/expandablelistview_change" 
下面我们再来看看效果:

Android仿QQ好友列表实现列表收缩与展开

四、图标放置右边
在上面mainactivity.java的函数setlistdata()加中:

?
1
2
3
4
5
// 得到屏幕的大小
displaymetrics dm = new displaymetrics();
getwindowmanager().getdefaultdisplay().getmetrics(dm);
//图标设置在右边
getexpandablelistview().setindicatorbounds(dm.widthpixels-60, dm.widthpixels); // 设置指示图标的位置

效果:        

Android仿QQ好友列表实现列表收缩与展开

以上就是本文的全部内容,希望对大家的学习android软件编程有所帮助。

延伸 · 阅读

精彩推荐